Lynxsia IT Solution

JavaScript HTML DOM Elements

JS HTML DOM Elements

Often, with JavaScript, you want to manipulate HTML elements. The easiest way to find an HTML element in the DOM, is by using the element id.

Finding HTML Elements

Often, with JavaScript, you want to manipulate HTML elements.

To do so, you have to find the elements first. There are several ways to do this.

Finding HTML elements by id
Finding HTML elements by tag name
Finding HTML elements by class name
Finding HTML elements by CSS selectors
Finding HTML elements by HTML object collections

Finding HTML Element by Id

The easiest way to find an HTML element in the DOM, is by using the element id. Use getElementById().

This example finds the element with id="intro".

If the element is found, the method will return the element as an object (in element).

If the element is not found, element will contain null.

					 
        
          const element = document.getElementById("intro");

Test Code Online

Finding HTML Elements by Tag Name

Use getElementsByTagName() to find an element by tag name.

This example finds all <p> elements.

					 
        
          const element = document.getElementsByTagName("p");

Test Code Online

This example finds the element with id="main", and then finds all <p> elements inside "main".

					 
        
          const x = document.getElementById("main");
          const y = x.getElementsByTagName("p");

Test Code Online

Finding HTML Elements by Class Name

If you want to find all HTML elements with the same class name, use getElementsByClassName().

This example returns a list of all elements with class="intro".

					 
        
          const x = document.getElementsByClassName("intro");

Test Code Online

Finding HTML Elements by CSS Selectors

If you want to find HTML elements that match a specified CSS selector (id, class names, types, attributes, values of attributes, etc), use the querySelector() and querySelectorAll() method.

The querySelector() returns the single elements (first one).

The querySelectorAll() returns all the elements as array object.

					 
        
          // return first <p> element having class "intro"
          const x = document.querySelectorAll("p.intro");

          // return first all <p> elements having class "intro"
          const x = document.querySelectorAll("p.intro");

Test Code Online

Finding HTML Elements by HTML Object Collections

This example finds the form element with id="frm1", in the forms collection, and displays all element values.

					 
        
          const x = document.forms["frm1"];
          let text = "";
          for (let i = 0; i < x.length; i++) {
            text += x.elements[i].value + "
";
          }
          document.getElementById("demo").innerHTML = text;

Test Code Online

The following HTML objects (and object collections) are also accessible

document.anchors: returns all the <a> elements (name attribute must present).
document.body: returns the content of the <body> element.
document.documentElement: returns the content of the document elements.
document.embeds: returns all the <embed> elements.
document.forms: returns all the <form> elements.
document.head: returns <head> element as [object HTMLHeadElement].
document.images: returns all the <img> elements.
document.links: returns all the <a> elements (href attribute must present).
document.scripts: returns all the <script> elements.
document.title: returns all the title (text) of <title> element.

View JS PDF Ebooks

Previous Next

How you feel about this blog:

Share this blog on:

Report Us

If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com

Ads

JavaScript HTML DOM Elements

JS HTML DOM Elements

Finding HTML Elements

Finding HTML Element by Id

Finding HTML Elements by Tag Name

Finding HTML Elements by Class Name

Finding HTML Elements by CSS Selectors

Finding HTML Elements by HTML Object Collections

Report Us

Solutions

Prices

Industries

Resources

Lynxsia IT Solutions