DOM methods

The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM is a tree-like structure composed of nodes, where each node represents a part of the document. Understanding DOM methods is essential for web developers as these methods allow for dynamic interaction and manipulation of web pages. This topic will explore various DOM methods.

getElementById()

The getElementById() method is one of the most commonly used DOM methods. It allows you to select a single HTML element based on its unique id attribute. This method returns a reference to the element, which you can then manipulate using JavaScript.

Consider the following example:

<div id="header">Welcome to My Website</div>

<script>
    const headerElement = document.getElementById('header');
    headerElement.style.color = 'blue'; // Changes the text color to blue
</script>

In this example, the getElementById() method selects the <div> element with the id of "header" and changes its text color to blue.

getElementsByClassName()

The getElementsByClassName() method allows you to select all elements with a specific class name. It returns a live HTMLCollection, which is an array-like object containing all matching elements.

Take a look at the example:

<p class="note">Note 1</p>
<p class="note">Note 2</p>

<script>
    const notes = document.getElementsByClassName('note');
    for (let i = 0; i < notes.length; i++) {
        notes[i].style.fontWeight = 'bold'; // Makes the text bold
    }
</script>

In the example, the getElementsByClassName() selects all <p> elements with the class "note" and loops over them to apply a bold font style for each paragraph.

getElementsByTagName()

The getElementsByTagName() method selects all elements with a specified tag name. This method returns a live HTMLCollection of elements, allowing you to manipulate them collectively or individually.

Here is an example:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<script>
    const listItems = document.getElementsByTagName('li');
    for (let item of listItems) {
        item.style.listStyleType = 'square'; // Changes bullet points to squares
    }
</script>

In this example, all <li> elements within the list are selected and modified to have square bullet points.

querySelector()

The querySelector() method returns the first element that matches the specified selector.

<div class="container">
    <p>First paragraph</p>
    <p>Second paragraph</p>
</div>

<script>
    const firstParagraph = document.querySelector('.container p');
    firstParagraph.style.color = 'green'; // Changes the text color to green
</script>

In the example, the querySelector() selects the first <p> element within the element with the class "container" and changes its color to green.

querySelectorAll()

The querySelectorAll() method is similar to querySelector(), but it returns a static NodeList of all elements matching the specified CSS selector. Unlike HTMLCollection, NodeList can be iterated using forEach(). We will learn about the forEach method and the NodeList in the following topics. You can use class and id attributes in the querySelectorAll() method.

Here is an example:

<div class="container">
    <p>First paragraph</p>
    <p>Second paragraph</p>
</div>

<script>
    const paragraphs = document.querySelectorAll('.container p');
    paragraphs.forEach(paragraph => {
        paragraph.style.fontSize = '18px'; // Sets the font size to 18px
    });
</script>

In this example, querySelectorAll() selects all <p> elements inside the "container" class, and the font size of each paragraph is set to 18px.

Conclusion

JavaScript provides a bunch of opportunities to work with web interfaces. Today we have taken another step towards mastering this programming language and learned how to obtain elements using the DOM methods. Each of them allows to get elements in different ways.