Open In App

Explain various type of HTML DOM methods

Improve
Improve
Like Article
Like
Save
Share
Report

There are some instances in which the HTML markup needs to be dynamically manipulated without actually changing the HTML source code. To achieve this, users can make use of a variety of HTML DOM methods present in JavaScript at their disposal. First, it is important to understand what the HTML Document Object Model (DOM) is. In simple words, it can be categorized as a programming interface for HTML as well as XML (eXtensible Markup Language) documents. It defines the logical structure of the documents in the form of a tree of objects where each HTML element is represented as a node and it also describes the way these documents can be manipulated as mentioned earlier.

Now coming to the HTML DOM methods, there are six different methods in which users can access or manipulate HTML elements using JavaScript:

These methods are illustrated with some sample code snippets below:

HTML DOM getElementById(): This method is used when developers have defined certain HTML elements with IDs that uniquely identify the same elements in the whole document. It returns an Element object which matches the specified ID in the method. If the ID does not exist in the document, it simply returns null.

Syntax:

document.getElementById(id);

Parameter: It has a single parameter as mentioned above and described below:

  • id: The ID of the element to locate in the HTML document. It should be a case-sensitive string.

Return value: It returns the object corresponding to the passed ID in the method, or null if no match is found.

Example: The following example clearly demonstrates the use of the getElementById() method.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h2>GFG</h2>
  
    <!-- Paragraph element with an id of "geeks" -->
    <p id="geeks">Geeks</p>
  
    <script>
        const paragraph = 
              document.getElementById("geeks");
        console.log(
          "The selected element is " + paragraph
        );
    </script>
</body>
  
</html>


Output:

HTML DOM getElementsByClassName(): This method is used when there are multiple HTML elements with the same class name. It returns a collection of all objects which match the specified class in the method.

Syntax:

document.getElementsByClassName(className);

Parameter: It has a single parameter as mentioned above and described below:

  • className: The class name of the element(s) to locate in the HTML document. It should be a case-sensitive string.

Return value: It returns a collection of objects corresponding to the passed class name in the method.

Example: The following example clearly demonstrates the use of the getElementByClassName() method. Since this method returns a collection of objects, individual objects can also be selected by indexing (range of 0 – (length of collection-1))

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h2>GFG</h2>
  
    <!-- Div elements with class names
    of "geeks-for-geeks" -->
    <div class="geeks-for-geeks">Geeks</div>
    <div class="geeks-for-geeks">For</div>
    <div class="geeks-for-geeks">Geeks</div>
    <script>
        const divs = document.getElementsByClassName(
          "geeks-for-geeks"
        );
        console.log(divs);
  
        // Select first element with
        // class "geeks-for-geeks"
        console.log(divs[0]);
    </script>
</body>
  
</html>


Output: 

HTML DOM getElementsByName(): In Javascript, getElementsByName() returns a NodeList of objects which match a particular name attribute in the HTML document.

Syntax:

document.getElementsByName(nameAttribute);

Parameter: It has a single parameter as mentioned above and described below:

  • nameAttribute: The name attribute of the element(s) to locate in the HTML document. It should be a case-sensitive string.

Return value: It returns a NodeList of objects corresponding to the passed name attribute in the method.

Example: The following example clearly demonstrates the use of the getElementByName() method. Since this method returns a NodeList of objects, individual objects can also be selected by indexing (range of 0 – (length of NodeList-1)) (same as getElementsByClassName).

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h2>GFG</h2>
  
    <!-- Input elements with name 
    attributes of "geek" -->
    <input type="text" placeholder="Text input"
           name="geek" />
    <input type="number" placeholder="Number input"
           name="geek" />
    <script>
        const inputs = document.getElementsByName("geek");
        console.log(inputs);
  
        // Select second element with
        // name attribute "geek"
        console.log(inputs[1]);
    </script>
</body>
  
</html>


Output: 

HTML DOM getElementsByTagName(): The getElementsByTagName() returns a HTMLCollection of objects which match a tag name in the HTML document.

Syntax:

document.getElementsByTagName(tagName);

Parameter: It has a single parameter as mentioned above and described below:

  • tagName: The tag name of the element(s) to locate in the HTML document. It should be a case-sensitive string.

Return value: It returns an HTMLCollection of objects corresponding to the passed tag name in the method.

Example: The following example clearly demonstrates the use of the getElementByTagName() method. Since this method returns an HTMLCollection of objects, individual objects can also be selected by indexing (range of 0 – (length of HTMLCollection-1))

HTML




<!DOCTYPE html>
<html>
  
<body>
    <!-- Various HTML elements with
    different tag names -->
    <div>GFG</div>
    <p>Geeks</p>
    <p>For</p>
    <p>Geeks</p>
  
    <script>
        const p = document.getElementsByTagName("p");
        console.log(p);
  
        // Select third element with tag name "p"
        console.log(p[2]);
    </script>
</body>
  
</html>


Output: 

HTML DOM querySelector(): This method returns the first match of an element that is found within the HTML document with the specific selector. If there is no match, null is returned.

Syntax:

document.querySelector(selector);

Parameter: It has a single parameter as mentioned above and described below:

  • selector: A string containing one or more selectors to match elements located in the HTML document.

Return value: It returns the first occurrence of the object corresponding to the passed selector in the method.

Example: The following example clearly demonstrates the use of the querySelector() method.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <!-- Various HTML elements with
    different tag names -->
    <div class="gfg">GFG</div>
    <p>Geeks</p>
    <p id="para">For</p>
    <p>Geeks</p>
  
    <script>
  
        // Using "." for prefix class selector
        const div = 
              document.querySelector(".gfg");
  
        // Using tag name for tag selector
        const firstParagraph = 
              document.querySelector("p");
  
        // Using "#" prefix for ID selector
        const secondParagraph = 
              document.querySelector("#para");
        console.log(
          div, firstParagraph, secondParagraph
        );
    </script>
</body>
  
</html>


Output:

HTML DOM querySelectorAll(): This method returns a static NodeList of all elements that are found within the HTML document with the specific selector.

Syntax:

document.querySelectorAll(selector);

Parameter: It has a single parameter as mentioned above and described below:

  • selector: A string containing one or more selectors to match elements located in the HTML document.

Return value: It returns a NodeList of the objects corresponding to the passed selector in the method.

Example: The following example clearly demonstrates the use of the querySelectorAll() method.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <!-- Various HTML elements with
    different tag names -->
    <div class="gfg">GFG</div>
    <div class="gfg">G</div>
    <div class="gfg">F</div>
    <div class="gfg">G</div>
    <p>Geeks</p>
  
    <script>
          
        // Using "." for prefix class selector
        const divs = 
              document.querySelectorAll(".gfg");
        console.log(divs);
    </script>
</body>
  
</html>


Output: 



Last Updated : 10 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads