ELEMENT SELECTORS IN DOM

#dom #element #selector #javascript

Element selectors:

JavaScript element selectors are built-in DOM methods used to target, select, and manipulate HTML elements on a webpage.

1. document.getElementById():

Finds a single unique element by its strict id attribute.

Example:
const header = document.getElementById("head");

2. document.getElementsByClassName():

Finds all elements sharing a specific class attribute.

Example:
const buttons = document.getElementsByClassName("btn");

3. document.getElementsByTagName():

Finds all elements matching a specific HTML tag.

Example:
const paragraphs = document.getElementsByTagName('p');

4. document.querySelector():

Finds the first element that matches the specified CSS selector.

Example:
const mainNav = document.querySelector('#nav');

5. document.querySelectorAll():

Finds all elements that match the specified CSS selector.

Example:
const cards = document.querySelectorAll('.card');

Example for all element selectors:

<h1 id="one">hello</h1>
<h2 class="two">hii</h2>
<h2 class="two">hii hii</h2>
<p>Lorem ipsum dolor sit amet.</p>

<script>
    const elem = document.getElementById("one")
    console.log(elem);
    console.log(elem.innerText);

    const elems = document.getElementsByClassName("two")
    console.log(elems);
    console.log(elems.innerText);
    console.log(elems[1].innerText);

    const para = document.getElementsByTagName("p")
    console.log(para);
    console.log(para.innerText);
    console.log(para[0].innerText);

    const query = document.querySelector(".two");
    console.log(query);
    console.log(query.innerText);

    const queryall = document.querySelectorAll("h2");
    console.log(queryall);
    console.log(queryall.innerText);
    console.log(queryall[1].innerText);                
</script>

output:

<h1 id="one">
hello
HTMLCollection { 0: h2.two, 1: h2.two, length: 2 }
undefined
hii hii
HTMLCollection { 0: p, length: 1 }
undefined
Lorem ipsum dolor sit amet.
<h2 class="two">
hii 
NodeList [ h2.two, h2.two]
undefined 
hii hii

addEventListener():

The addEventListener() method attaches an event handler to a specified HTML element or DOM object without overwriting existing event handlers.
It allows web pages to react dynamically to user actions like clicks, keypresses, or window resizing.

syntax:
element.addEventListener(event, function, options);

task - uppercase converter

<style>
        body{
            width: 100%;
            height: 95vh;
            background-color: aquamarine;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 30px;
        }
        #one{
            width: 300px;
            height: 8vh;
            border: 3px solid black;
            font-size: 30px;
        }
        #two{
            font-size: xx-large;
        }
    </style>

    <input id="one" type="text">
    <h2 id="two"></h2>

    <script>
        const inputs = document.getElementById("one")
        const result = document.getElementById("two")

        inputs.addEventListener("input", getvalue);

        function getvalue(){
            result.innerText = inputs.value;
            result.style.textTransform = "uppercase"

            // result.innerText = inputs.value.toUpperCase();
        }
    </script>