JavaScript getElementsByTagName() Method

JavaScript getElementsByTagName() method provides a convenient way to extract all the elements in a document by their tag names. Once you have the elements, you can check the type of each element and accordingly get their attributes and values.

It is useful, when you want to focus or extract data from a particular set of elements, say only textboxes.

➡️ .getElementById() method

Syntax of getElementsByTagName() Method

document.getElementsByTagName(tagname);

It takes a parameter in the form of "tagname". You can also use * as parameter and the method will return all the elements (any type). For example,

let ele = document.getElementsByTagName('*');

Remember, the method is case sensitive.

Example 1.

I have two P elements on my web page. I want to get the first P element only and change some of its default properties, like border colour, padding etc.

<!DOCTYPE html>
<html>
<head>
<style>
  * { font-family: calibri  }
  input, p, span { font-size: 18px; }
</style>
</head>

<body>
  <div>
    <p>Hi, I am Arun Banik</p>
    <span>Welcome to my blog.</span>
  </div>
  
  <p><input type="button" id="bt" onclick="greet()" value="Click it" /></p>
</body>

<script>
    let greet = () => {
      const el = document.getElementsByTagName('p');
      el[0].style.border = 'solid 1px red';
      el[0].style.padding = '10px';
      el[0].style.width = '30%';
    }    
</script>
</html>

Try it

Example 2.

In this example, I have a form with many elements like "textbox", "checkboxes" etc. Using the "getElementsByTagName()" method, I'll get only elements of type input (textboxes) and extract its properties.

<!DOCTYPE html>
<body>
  <div id="cont">
    <div>
      <p>Name: <input type="text" id="txtName" value="Arun" 
           onblur="verify(this)" /></p>
      <p>Designation: <input type="text" id="txtDesig" value="Sr. Programmer"
           onchange="verify(this)" /></p>
      <p>Age: <input type="text" id="txtAge" value="30" 
           onfocus="this.value='30'" /></p>
    </div>

    <p><label><input type="checkbox" id="chk" /> Check box</label></p>

    <div>
      Countries
      <input type="radio" name="country" value="India" checked /> India
      <input type="radio" name="country" value="USA" /> USA
    </div>

    <p>
      <input type="button" id="bt" onclick="getCount()" value="Find Textboxes" />
    </p>
    
    <p id="result"></p>
  </div>
</body>

<script>
    let getCount = () => {
        const result = document.getElementById('result');
        result.innerHTML = '';
    
        const cont = document.getElementById('cont');
        const ele = cont.getElementsByTagName('input');
    
        let cnt = 1;
        for (let i = 0; i < ele.length; i++) {
            if (ele[i].type == 'text') {
                result.innerHTML = result.innerHTML + ' <br /> (' + cnt + (')  Attribute : Value');
        
                for (let j = 0; j < ele[i].attributes.length; j++) {
                  result.innerHTML = result.innerHTML + '<br />' +
                    ele[i].attributes[j].name + ': ' + 
                    ele[i].attributes[j].value;
                }
                cnt = cnt + 1;
            }
      
            result.innerHTML = result.innerHTML + '<br />' + ' ';
        }
    }    
</script>
</html>

Try it