Skip to main content

JavaScript HTML DOM Methods

JavaScript provides a number of methods for working with the HTML Document Object Model (DOM).

Here are some of the most commonly used methods:

  • document.getElementById(id): Returns a reference to the element with the specified ID.
document.getElementById("myHeading"); // returns the element with an ID of "myHeading"
  • document.getElementsByTagName(tagname): Returns an array of elements with the specified tag name.
document.getElementsByTagName("p"); // returns an array of all <p> elements
  • document.getElementsByClassName(classname): Returns an array of elements with the specified class name.
document.getElementsByClassName("myClass"); // returns an array of all elements with a class of "myClass"
  • document.querySelector(selector): Returns the first element that matches the specified CSS selector.
document.querySelector("#myHeading"); // returns the first element with an ID of "myHeading"
  • document.querySelectorAll(selector): Returns an array of elements that match the specified CSS selector.
document.querySelectorAll(".myClass"); // returns an array of all elements with a class of "myClass"
  • document.createElement(element): Creates a new element node.
document.createElement("div"); // creates a new div element
  • parentNode.appendChild(node): Adds a new child node to an element as the last child node.
document.body.appendChild(newElement); // adds newElement as the last child of the body element
  • element.innerHTML: Gets or sets the HTML content of an element.
document.getElementById("myDiv").innerHTML; // returns the HTML content of the element with an ID of "myDiv"
  • element.style.property: Gets or sets the style attribute of an element.
document.getElementById("myDiv").style.color = "red"; // sets the color of the element with an ID of "myDiv" to red
  • element.setAttribute(attribute, value): Sets the value of an attribute on an element.
document.getElementById("myDiv").setAttribute("class", "myClass"); // sets the class attribute of the element with an ID of "myDiv" to "myClass"
  • element.getAttribute(attribute): Gets the value of an attribute on an element.
document.getElementById("myDiv").getAttribute("class"); // returns the value of the class attribute of the element with an ID of "myDiv"

These are just a few examples of the many methods available for working with the DOM in JavaScript

The getElementById Method​

The getElementById method is a built-in method in JavaScript that allows you to select an element on an HTML page using its ID attribute.

Here is the basic syntax of the method:

document.getElementById(id);

The id parameter is the value of the id attribute of the element you want to select. This method returns a reference to the first element with the specified ID.

Here's an example:

Editor

Loading...

In this example:

  • We have an h1 element with an id attribute of "myHeading".
  • We use the getElementById method to select this element and store a reference to it in the heading variable.
  • We then use the innerHTML property to change the content of the element to "Hello, Students!".
  • This updates the text displayed on the page from "Hello, World!" to "Hello, Students!".

The innerHTML Property​

The innerHTML property is a built-in property in JavaScript that allows you to get or set the HTML content of an element.

Here is the basic syntax of the property: 

element.innerHTML;

As an example:

Editor

Loading...

In this example:

  • We have a div element with an id attribute of "myDiv" and the text "Hello, World!" inside it.
  • We use the getElementById method to select this element and store a reference to it in the div variable.
  • We then use the innerHTML property to set the content of the element to "<strong>Hello, Students!</strong>".
  • This updates the text displayed on the page to "Hello, Students!" and makes it bold using the strong element.