The Document Object Model, popularly known as the DOM is a web application programming interface, (API) that represents a web document as nodes and objects.

So what is the function of this DOM?

It provides a way in which JavaScript interacts with the document and manipulates the style, content, and structure of its elements. With it, you can create documents, and add, modify, or delete elements.

It enables you to develop dynamic web pages by allowing scripts to dynamically update the contents, structure, and styles of the document in response to user interactions, e.g clicks.

How to access the DOM

The DOM is available from within a script, i.e, a program run by the browser. Therefore, the moment you create a <script></script> then you are able to access the DOM. There are methods used to access the DOM, and we will look at them below.

1. getElementByID() - It is used to select an element with a specific id. Returns an element object with the specified id and null if there is no element with the specified id.

    const element = document.getElementById('id-name');
    /// Style the element
    element.style.color = 'red';
   

2. getElementsByTagName() - Returns an array-like object of all the elements with the specified tag name in the order in which they appear on the document.

    const elements = document.getElementsByTagName('tag-name');
   

3. getElementsByClassName() - Returns an array-like object of all child elements with the specified class name. You can call this method on the document object, which will search the whole document, or on a specific element, which returns only the descendants of the specific element with that class name.

    const elements = document.getElementsByClassName('class-name');
    // Call the method in specific element
    let items = document.getElementById('id-name');
    let childItems = items.getElementsByClassName('class-name');
   

4. querySelector() - Returns the first element that matches the specified selector, like id or class name or null if there is no match. Its parameter must be a valid CSS selector or else you will get a syntax error.

    // select by id
    const elements = document.querySelector('#id-name');
    // select by class name
    const elements = document.querySelector('.class-name');
   

5. querySelectorAll() - Returns a NodeList of all the elements that match the specified selector or an empty NodeList if there is no matching element.

    // select by class name
    const elements = document.querySelectorAll('.class-name'); // selects all elements with class 'class-name'
    // select by type 
    const p = document.querySelectorAll('p'); // selects all p elements
    // select by attribute
    const checkInputs = document.querySelectorAll('input[type=text]');  // selects all inputs with type text
   

Selectors can also be grouped together, for example:

// Select all a and p tags
const items = document.querySelectorAll('a, p');
// Select adjacent siblings
const elements = document.querySelectorAll('div + p'); // selects all p that follows a div

Conclusion

The DOM is a very important tool for building modern web applications that are interactive and accessible, and you should aspire to learn and understand it. Hope you found this article helpful.