Categories
JavaScript Tutorials

Getting Elements by ID, Tag Name, or Class

Functions
Objects
Array Properties and Methods
DOM
Built-in Objects
Using Events in JavaScript
Handling Input and Output
Ajax and JSON

The getElementBy methods provide easy access to any element or groups of elements in a document without relying on parent/child relationships of nodes. The three most commonly used ways to access elements are

  • getElementById
  • getElementsByTagName
  • getElementsByClassName

getElementById

By far the most widely used method for selecting elements, getElementById is essential to modern web development. With this handy little tool, you can find and work with any element simply by referencing a unique id attribute. No matter what else happens in the HTML document, getElementById will always be there for you and will reliably select the exact element that you want.

Listing 10-5 demonstrates the awesome power of getElementById to enable you to keep all your JavaScript together in your document or to modularize your code. By using getElementById, you can work with any element, anywhere in your document just as long as you know its id.

getElementsByTagName

The getElementsByTagName method returns a node list of all the elements with the specified tag name. For example, in Listing 10-6, getElementsByTagName is used to select all h1 elements and change their innerHTML properties to sequential numbers.

getElementsByClassName

The getElementsByClassName method works in much the same way as the getElementsByTagName, but it uses the values of the class attribute to select elements. The function in Listing 10-7 selects elements with a class of “error” and will change the value of their innerHTML property.


The result of running Listing 10-7 in a web browser and entering a wrong

answer is shown in the figure below.

Examples

Create a h1 element and put the text “Hello World” into it by using the getElementById method.

<html>
  <head></head>
  <body>
    <h1 id='header'></h1>
    <script>
      var h1 = document.getElementById('header');
      h1.innerHTML = 'Hello World';
    </script>
  </body>
</html>

Create a paragraph element with some text and change the font color using the getElementById method.

<html>
  <head></head>
  <body>
    <p id='para'>This is a paragraph</p>
    <script>
      var p1 = document.getElementById('para');
      p1.style.color = 'red';
    </script>
  </body>
</html>

This is a paragraph

Create five h2 elements with some text and change the text and font color of the third h2 element by using the getElementsByTagName method.

<html>
  <head></head>
  <body>
    <h2>First</h2>
    <h2>Second</h2>
    <h2>Third</h2>
    <h2>Fourth</h2>
    <h2>Fifth</h2>
    <script>
      var headers = document.getElementsByTagName('h2');
      headers[2].innerHTML = 'New Text';
      headers[2].style.color = 'blue';
    </script>
  </body>
</html>

First

Second

New Text

Fourth

Fifth

Create five paragraph elements with some text and apply the same class to all of them. Use the getElementsByClassName method to change the text color of all the paragraph elements to red and change the font size of the third paragraph element to 24px.

<html>
  <head></head>
  <body>
    <p class="para">First</p>
    <p class="para">Second</p>
    <p class="para">Third</p>
    <p class="para">Fourth</p>
    <p class="para">Fifth</p>
    <script>
      var paragraphs = document.getElementsByClassName('para');
      for(var i=0;i<=paragraphs.length-1;i++){
        paragraphs[i].style.color = 'red';
      }
      paragraphs[2].style.fontSize = '24px';
    </script>
  </body>
</html>

First

Second

Third

Fourth

Fifth