Selecting Elements in JavaScript

Key Concepts

• Selecting Elements by ID
• Selecting Elements by Class Name
• Selecting Elements by Tag Name
• Selecting Elements by Query Selector

Selecting Elements by ID

Selecting an element by its ID is a direct way to target a specific element on a webpage. The ID is unique within the document, so this method returns a single element.

Example:

        <div id="uniqueDiv">This is a unique div.</div>
        <script>
            let element = document.getElementById("uniqueDiv");
            console.log(element.textContent); // Outputs: This is a unique div.
        </script>
    

Selecting Elements by Class Name

Selecting elements by class name allows you to target multiple elements that share the same class. This method returns a collection of elements.

Example:

        <div class="commonClass">Div 1</div>
        <div class="commonClass">Div 2</div>
        <script>
            let elements = document.getElementsByClassName("commonClass");
            for (let i = 0; i < elements.length; i++) {
                console.log(elements[i].textContent); // Outputs: Div 1, Div 2
            }
        </script>
    

Selecting Elements by Tag Name

Selecting elements by tag name targets all elements of a specific type. This method also returns a collection of elements.

Example:

        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
        <script>
            let paragraphs = document.getElementsByTagName("p");
            for (let i = 0; i < paragraphs.length; i++) {
                console.log(paragraphs[i].textContent); // Outputs: Paragraph 1, Paragraph 2
            }
        </script>
    

Selecting Elements by Query Selector

The query selector allows you to use CSS selectors to target elements. This method is versatile and can select elements by ID, class, tag name, or any valid CSS selector.

Example:

        <div id="main">
            <p class="text">Paragraph inside main</p>
        </div>
        <script>
            let elementById = document.querySelector("#main");
            let elementByClass = document.querySelector(".text");
            console.log(elementById.textContent); // Outputs: Paragraph inside main
            console.log(elementByClass.textContent); // Outputs: Paragraph inside main
        </script>