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.

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay