Skip to content
Home » HTML DOM API and Selector API

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
    <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 =
    Previous
    Next