Hi! It’s Mayu.
In this post, I’m going to explain about DOM.

What is DOM ?

DOM stands for Document Object Model, it is the mechanism for operating HTML elements.
In the DOM, elements contained in the HTML document and the text data contained in the elements are treated as objects. These objects are calle “nodes”, and the DOM views an HTML documents as tree of nodes.

The DOM world

Here is image of DOM stracture.

Each boxes are elements be called “nodes”
All nodes connects with other nodes as parents or children relations.
ex) HTML is parent of Head and Body, and child of Document.

What can we do with the DOM ?

The DOM allows us to get, change, remove nodes from HTML documents.
For example, I’ll show some method the way to get nodes! 🙂
Here is sample document.

    

        
Page title
    
    

        
Main
        

            
 id="section-name">Today's topic
            

                 class="topic-name">Topic 1
                    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                
Topic 2
                    
Aenean commodo ligula eget dolor.
                
Topic 3
                    
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            
        
    
    

When you want to get any node, you have some choices depends the propaties that the node has.

Get element using element’s id

If the target node has id, you can get it with getElementById() method.

let elementGetById = document.getElementById("section-name");

It returns an HTML element.

console.log(elementGetById);
// 
Today's topic

Get elements using element’s class name

If the target nodes have class name, you can get these with getElementByClassName() method.
Because of more than two nodes can have the same class name, when you get element with getElementByClassName() the element is returned as array. So you need to know it is not single element.

let elementGetByClassName = document.getElementsByClassName("topic-name");

It returns an array as HTML Collection (in thin case, its length is 3)

console.log(elementGetByClassName);
// [ {0:li.topic-name}, {1:li.topicname}, {2:li.topicname,} ]

Get elements using element’s tag

Also you can get element with tag name by getElementByTagName() method. This method gets an array as well as getElementByClassName.

let elementGetByTagName = document.getElementsByTagName("p");

It returns an array as HTML Collection (in thin case, its length is 4, 3 are children of li tag and 1 is footer’s.)

console.log(elementGetByTagName);
// [ {0:p}, {1:p}, {2:p}, {3:p} ]

Get elements using CSS selector

When you want to get element with CSS selector, you can use querySelectore() method.
This method returns the first element that matches a specific CSS selectore. And you can get element with many ways.

with id

let elementIdWithClass = document.querySelector("#section-name");

It returns an HTML element.

console.log(elementIdWithClass);
// 
Today's topic

with class name

let elementClassNameWithClass = document.querySelector(".topic-name");

It returns an HTML element.

console.log(elementClassNameWithClass);
// 
Topic 1

with tag name

let elementTagNameWithClass = document.querySelector("p");

It returns an HTML element.

console.log(elementTagNameWithClass);
// 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

with more specific CSS selector

let elementWithSpecificClass = document.querySelector("footer p");

It returns an HTML element.

console.log(elementWithSpecificClass);
// 
this is footer

Get more than 2 elements using CSS selector

When you want to get all elements that matches a specific CSS selector, querySelectorAll() method allows it. And you need to know it returns a NodeList, not single HTML element, not an array.

let elementAllWithClass = document.querySelectorAll("p");

It returns a NodeList.

console.log(elementAllWithClass);
// [ {0:p}, {1:p}, {2:p}, {3:p} ]

What is difference between HTMLCollection and NodeList ?

As I mentioned earlier, only querySelectorAll() returns NodeList. The differences between the two are…

Dynamic or Static

When number of elements of HTMLCollection or NodeList changes,
HTMLCollection is dynamic then it can catch the change. But NodeList is static then its number of elements doesn’t change.

Availability of forEach()

Available methods are different between HTMLCollection and NodeList. And common one is forEach method. HTMLCollection is available forEach(), but NodeList is not. So when you use loop process with NodeList, you should other method.