# The Document Object Model (DOM)

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.
    
    ```javascript
    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.
    
    ```javascript
    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.
    
    ```javascript
    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.
    
    ```javascript
    // 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.
    
    ```javascript
    // 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:

```javascript
// 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.