Suzie's Blog

[JavaScript] Selecting HTML Elements.

Suzie Choi's photo
Suzie Choi
·

3 min read

Table of contents

1. getElementsByTagName("TagName")

when you use the mentioned one, you will get all the elements from the HTML as below.

HTML

    <ul id="list">
        <li class = "item">
            <a href = "http://www.google.com">Google</a>
        </li>  
        <li class = "item">Second</li>
        <li class = "item">Third</li>
    </ul>

Executing JavaScript

document.getElementsByTagName("li");
->
HTMLCollection(3) [li.item, li.item, li.item]
0: li.item
1: li.item
2: li.item
length: 3
[[Prototype]]: HTMLCollection

Getting length of the Tag (the number of Tag)

document.getElementsByTagName("li").length;
-> 3

If you want to change the style of the tag, you should use "[]" to specify.

document.getElementsByTagName("li")[2].style.color = "purple";
'purple'

Result :

image.png

2. getElementsByClassName("ClassName")

HTML

    <button class = "btn">Click me</button>

Executing JavaScript and change coluor of the element. Even though there is only one class in one HTML, "[]"must be used to point. otherwise, it won't work.

document.getElementsByClassName("btn");
-> HTMLCollection [button.btn]
document.getElementsByClassName("btn")[0].style.color = "green";
-> 'green'

Result :

image.png

3. getElementById("Id")

HTML

 <h1 id = "title">Hello</h1>

Executing JavaScript and change the font colour and the text. Because Id is unique itself, '[]' is not needed to change its property.

document.getElementById("title");
<em>HTML</em>
-> <h1 id=​"title">​Hello​</h1>​
document.getElementById("title").style.color = "brown";
-> 'brown'
document.getElementById("title").innerHTML = "Good Bye";
-> 'Good Bye'

Result : image.png

4. querySelector("Selector")⭐️

I think this one is the best for usage as it can be very specified and used for element, class, id selectors.

HTML

<body>

    <h1 id = "title">Hello</h1>
    <a href = "http://www.google.com">Google</a>
    <input type = "checkbox">

    <button class = 
    "btn">Click me</button>

    <ul id="list">
        <li class = "item">
            <a href = "http://www.google.com">Google</a>
        </li>  
        <li class = "item">Second</li>
        <li class = "item">Third</li>
    </ul>
</body>

For this mentioned one, Selector can be used like we use for CSS. Please see the example how to use HTML element by using selector.

document.querySelector("h1").style.color = "blue";
-> 'blue'
document.querySelector(".btn").style.color = "red";
-> 'red'
document.querySelector("#list").style.color = "orange";
-> 'orange'

Result :

image.png

It is possible to use multiple selector to choose more specific one as below.

document.querySelector("#list .item").style.color = "red";
'red'

Result :

image.png

However, above one will just select first one even though there are several classes under the same name. in this case, we can use querySelectorAll("Selector")

document.querySelectorAll("#list .item")
-> NodeList(3) [li.item, li.item, li.item]
0: li.item
1: li.item
2: li.item
length: 3
[[Prototype]]: NodeList

My concern 🤔

I've got a question about querySelectorAll("Selector"). It is possible to select multiple elements but there's error if I want to change the style of the multiple element to the same colour. if I code **document.querySelectorAll("#list .item")[0,1,2], there's no error but only [2] will be changed to red. If you know the answer why, please comment for me. Thank you!

-> I have found the answer! 🥹 please refer to suzie.hashnode.dev/questions#heading-how-to..

Source - Udemy / Angela / 143. Selecting HTML Elements with Javascript

JavaScriptSelectingElements