DEV Community

_Khojiakbar_
_Khojiakbar_

Posted on

3

DOM | Selectors

DOM (Document Object Model) selectors are methods provided by the browser to access elements in an HTML document. Here are the primary types of DOM selectors explained with examples:


1. getElementById
This method selects an element by its unique id attribute.

html
Copy code
<!DOCTYPE html>
<html>
<head>
    <title>getElementById Example</title>
</head>
<body>
    <div id="myDiv">Hello, World!</div>

    <script>
        var element = document.getElementById('myDiv');
        console.log(element.textContent);  // Output: Hello, World!
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

2. getElementsByClassName
This method selects all elements with a specified class name and returns an HTMLCollection (similar to an array, but not exactly).

<!DOCTYPE html>
<html>
<head>
    <title>getElementsByClassName Example</title>
</head>
<body>
    <div class="myClass">Element 1</div>
    <div class="myClass">Element 2</div>
    <div class="myClass">Element 3</div>

    <script>
        var elements = document.getElementsByClassName('myClass');
        console.log(elements.length);  // Output: 3
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

3. getElementsByTagName
This method selects all elements with the specified tag name.

<!DOCTYPE html>
<html>
<head>
    <title>getElementsByTagName Example</title>
</head>
<body>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>

    <script>
        var elements = document.getElementsByTagName('p');
        console.log(elements.length);  // Output: 3
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

4. querySelector
This method returns the first element that matches a specified CSS selector.

<!DOCTYPE html>
<html>
<head>
    <title>querySelector Example</title>
</head>
<body>
    <div class="myClass">Element 1</div>
    <div class="myClass">Element 2</div>

    <script>
        var element = document.querySelector('.myClass');
        console.log(element.textContent);  // Output: Element 1
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

5. querySelectorAll
This method returns all elements that match a specified CSS selector as a NodeList (similar to an array).

<!DOCTYPE html>
<html>
<head>
    <title>querySelectorAll Example</title>
</head>
<body>
    <div class="myClass">Element 1</div>
    <div class="myClass">Element 2</div>
    <div class="myClass">Element 3</div>

    <script>
        var elements = document.querySelectorAll('.myClass');
        elements.forEach(function(element) {
            console.log(element.textContent);
        });
        // Output:
        // Element 1
        // Element 2
        // Element 3
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Summary

getElementById: Selects a single element by its id.
getElementsByClassName: Selects all elements with a specified class name.
getElementsByTagName: Selects all elements with a specified tag name.
querySelector: Selects the first element that matches a CSS selector.
querySelectorAll: Selects all elements that match a CSS selector.

These methods are fundamental for interacting with the DOM, allowing you to dynamically update content, handle events, and manipulate the structure of your web pages.

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay