What in the world is DOM?
Published: 2023-02-13 00:14:44

Hi! It's Mayu.
In this post, I'm going to explain about DOM.
<hr>
<h2>What is DOM ?</h2>
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.
<hr>
<h2>The DOM world</h2>
Here is image of DOM stracture.
<imgsrc="https://www.freecodecamp.org/news/content/images/size/w1000/2021/09/Document.jpg" />
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.
<hr>
<h2>What can we do with the DOM ?</h2>
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.
```html
<body>
    <header>
        <h1>Page title</h1>
    </header>
    <main>
        <h2>Main</h2>
        <div>
            <h2 id="section-name">Today's topic</h2>
            <ul>
                <li class="topic-name">Topic 1</li>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
                <li>Topic 2</li>
                    <p>Aenean commodo ligula eget dolor.</p>
                <li>Topic 3</li>
                    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            </ul>
        </div>
    </main>
    <footer>
        <p>this is footer</p>
    </footer>
</body>
```
When you want to get any node, you have some choices depends the propaties that the node has.
<br>
<h3>Get element using element’s id</h3>
If the target node has id, you can get it with _getElementById()_ method.
```javascript
let elementGetById = document.getElementById("section-name");
```
It returns an HTML element.
```javascript
console.log(elementGetById);
// <h2 id="section-name">Today's topic</h2>
```
<br>
<h3>Get elements using element’s class name</h3>
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.
```javascript
let elementGetByClassName = document.getElementsByClassName("topic-name");
```
It returns an array as HTML Collection (in thin case, its length is 3)
```javascript
console.log(elementGetByClassName);
// [ {0:li.topic-name}, {1:li.topicname}, {2:li.topicname,} ]
```
<br>
<h3>Get elements using element’s tag</h3>
Also you can get element with tag name by _getElementByTagName()_ method. This method gets an array as well as getElementByClassName.
```javascript
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.)
```javascript
console.log(elementGetByTagName);
// [ {0:p}, {1:p}, {2:p}, {3:p} ]
```
<br>
<h3>Get elements using CSS selector</h3>
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.
<br>
<h4>with id</h4>
```javascript
let elementIdWithClass = document.querySelector("#section-name");
```
It returns an HTML element.
```javascript
console.log(elementIdWithClass);
// <h2 id="section-name">Today's topic</h2>
```
<h4>with class name</h4>
```javascript
let elementClassNameWithClass = document.querySelector(".topic-name");
```
It returns an HTML element.
```javascript
console.log(elementClassNameWithClass);
// <li class="topic-name">Topic 1</li>
```
<h4>with tag name</h4>
```javascript
let elementTagNameWithClass = document.querySelector("p");
```
It returns an HTML element.
```javascript
console.log(elementTagNameWithClass);
// <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
```
<h4>with more specific CSS selector</h4>
```javascript
let elementWithSpecificClass = document.querySelector("footer p");
```
It returns an HTML element.
```javascript
console.log(elementWithSpecificClass);
// <p>this is footer</p>
```
<br>
<h3>Get more than 2 elements using CSS selector</h3>
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.
```javascript
let elementAllWithClass = document.querySelectorAll("p");
```
It returns a NodeList.
```javascript
console.log(elementAllWithClass);
// [ {0:p}, {1:p}, {2:p}, {3:p} ]
```

<h3>What is difference between HTMLCollection and NodeList ?</h3>
As I mentioned earlier, only querySelectorAll() returns NodeList. The differences between the two are...
<h4>Dynamic or Static</h4>
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.
<h4>Availability of forEach()</h4>
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.