10X Sale
kh logo
All Courses
  2. Tutorials
  3. Web Development

HTML DOM in Javascript

Updated on Sep 3, 2025
 
8,038 Views
Table of Content

JavaScript can access every part of the HTML DOM(Document Object Model) and change the web-page or add event listeners.

The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

DOM Methods in Javascript

The HTML DOM can be accessed by the JavaScript language. We have properties and methods on DOM.

Let’s take a look at the dom example. Here, we have both property and method.

<!DOCTYPE html>
<html>
 <body>
   <h1 id="demo"></h1>
   <script>
     document.getElementById('demo').innerHTML = 'Hello JavaScript!';
   </script>
 </body>
</html>

getElementById method in Javascript

This method getElementById is used to get the object containing the HTML element with the given id. In the above example, we are calling document.getElementById('demo'), so it will return <h1 id="demo"></h1>

We can verify the same from the console for the web page, we created above.

Image

innerHTML property

This method innerHTML is used for getting or replacing the content of HTML elements. In the above example, we change the content of the <h1> tag. You can think of it changing the things inside the <h1> tag, which in the above example was empty.

DOM Elements in Javascript

We need to access HTML elements to work on it. We have already seen many examples of getElementById but there are some more also.

Element By Id

We have already seen an example in the previous topic of DOM Methods for getting element by Id using getElementById

Elements By Tag Name

The method getElementsByTagName selects all tags of a given type in the web-page and return an array like object called HTMLCollection. In the below example we are getting the HTMLCollection in “var x”. Since there are two <p> tags in the page we can access them by x[0] and x[1].

<!DOCTYPE html>
<html>
 <body>
   <p>Hello JS!</p>
   <p>This example is for you all JS People.</p>
   <div id="demo"></div>
   <script>
     var x = document.getElementsByTagName('p');
     document.getElementById('demo').innerHTML =
       x[0].innerHTML + ' ' + x[1].innerHTML;
   </script>
 </body>
</html>

Output with console

Image

<!DOCTYPE html>
<html>
 <body>
   <p class="intro">Hello JS!</p>
   <p class="intro">This example is for you all JS People.</p>
   <div id="demo"></div>
   <script>
     var x = document.getElementsByClassName('intro');
     document.getElementById('demo').innerHTML =
       x[0].innerHTML + ' ' + x[1].innerHTML;
   </script>
 </body>
</html>

Element By CSS Selector

We can use the more modern querySelector method to match a specified CSS Selector(id, class). The only difference from getElementById is that we need to add # for id or for class as we do in CSS.

<!DOCTYPE html>
<html>
 <body>
   <h1 id="demo"></h1>
   <script>
     document.querySelector('#demo').innerHTML = 'Hello JavaScript!';
   </script>
 </body>
</html>

Elements By CSS Selectors

We can use the querySelectorAll method to find HTML elements which match a specified CSS Selector(id, class). It returns an array like object called as NodeList. It can be used in place of getElementsByClassName or getElementsByTagName.

<!DOCTYPE html>
<html>
 <body>
   <p>Hello JS!</p>
   <p>This example is for you all JS People.</p>
   <div id="demo"></div>
   <script>
     var x = document.querySelectorAll('p');
     document.getElementById('demo').innerHTML =
       x[0].innerHTML + ' ' + x[1].innerHTML;
   </script>
 </body>
</html>

Output with console

Image

DOM CSS in Javascript

We can also change the CSS style of an HTML element. Below is an example of the same. Notice, that for CSS property like font-size, we have to use camel case like fontSize.

<!DOCTYPE html>
<html>
 <body>
   <div id="title">Hello JS!</div>
   <p id="para">This example is for you all JS People.</p>
   <script>
     document.querySelector("#title").style.fontSize = "22px";
     document.querySelector("#para").style.color = "blue";
   </script>
 </body>
</html>

Output

Image

+91

By Signing up, you agree to ourTerms & Conditionsand ourPrivacy and Policy

Get your free handbook for CSM!!
Recommended Courses