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.

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
<span style="color:#ee1710" class="tadv-color"> append(), appendChild(), insertBefore() or the<br> innerHTML property</span>

Removing Element from DOM

Use .removeChild() property

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