HTML DOM API and Selector API

In this article, you will be learning about the DOM API and the selector API.

Consider the following image of Mozilla developer console.

HTML 5 DOM API
HTML 5 DOM API

Every element in the DOM (document object model) has a number of APIs. The JavaScript will use those APIs to change the behavior or appearance of an HTML element.

HTML 5 offers some selector API to use CSS selectors to get to the HTML 5 elements.
document.querySelector(); // return the first DOM element that match the selector
document.querySelectorAll(); // returns all the DOM elements matching the selector.

Older DOM APIs

document.getElementById(identifier)
document.getElementsByTagName(tagName)
document.getElementsByClassName(className)

What can do with DOM APIs?

  • Change the style of HTML elements using .style attribute
  • Change the text content using .innerHTML attribute
  • Read or change the text using .textContent attributes

We can also create new element using

Create new HTML element using
document.createElement(“new element name”);

Add the newly created element to another element in the DOM, using
append(), appendChild(), insertBefore() or the
innerHTML property

Removing Element from DOM

Use .removeChild() property

//Example:
ul.removeChild(li);
//even innerHTML can remove elements
ul.innerHTML =

Please support us by disabling your adblocker or whitelist this site from your adblocker. Thanks!

turn of adblocker imag