Getting started with JavaScript - Chapter 4 🚀
Tags: javascript, beginners, programming, codenewbie
Published: 2021-02-01 21:56:07

Table Of Contents
        * 🤓[INTRODUCTION](#intro)
        * 🤳🏻[WHAT IS DOCUMENT OBJECT MODEL](#model)
        * 🌴[DOM TREES](#tree)
        * 🧮[ORDER SETS](#sets)
        * 👁[VISUAL REPRESENTATION](#visual)
        * #️⃣[GETTING AN ELEMENT BY ID](#by-id)
        * 🅰[CHANGE TEXT OF AN ELEMENT](#text)
        * 📝[SUMMARY](#summary)
        * 🙏[THANK YOU](#thank-you)


##🤓 INTRODUCTION <a name="intro"></a>
**Welcome, my dear hackers! I hope you are all having a great start to the working week! Here we are, at our fourth chapter of the Getting started with javascript series. Today, we will discuss the Document Object Model (DOM) and how to use JavaScript to manipulate it.🚀

![luci](https://media.giphy.com/media/L1K3G4dQK2OPzeCUjW/giphy.gif)

##🤳🏻 WHAT IS DOCUMENT OBJECT MODEL <a name="model"></a>
The **Document Object Model** is the data representation of the objects that comprise the structure and content of a document on the web.

It represents a programming interface for HTML and XML documents. The document is represented as nodes and objects. In that way, programming languages can connect to the page.

The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.

##🌴 DOM TREES <a name="tree"></a>
A tree is a finite hierarchical tree structure. In the tree, the order is the preorder, depth-first traversal of a tree. (Depth-first traversal is an algorithm for traversing or searching tree or graph data structure, that we'll discuss soon).

An Object that **participates** in a tree has a **parent**, which is either null or an object, and has children, which is an **order set** of objects. An object X whose parent is object Y is a child object of the object Y.

The **root** of an object is itself, if its parent is null (non existing), or else it is the root of its parent. The root of a tree is any object participating in that tree whose parent is null.

Let's describe the parent-child concept by looking and the very basic HTML div parent-child structure:

```HTML
<!DOCTYPE html>
<html lang="en"> <!--This is the root node of the entire page-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="parent-1"> <!--A parent div 1-->
     <div id="child-1"></div><!--The first child div-->
     <div id="child-2"></div><!--The second child div-->
    </div>
    <div class="parent-2"> <!--A parent div 2-->
    <!--The child div 3 this is an only child of the parent div 2
    while in the same time it is a parent div for the child 3-1 
    and 3-2-->
     <div id="child-3"> 
       <!--A child of a div child-3 & descendant of the div 
       parent-2 -->
       <div id="child-3-1"></div> <!--This is also a sibling to 
                           child 3-2 -->
       <div id="child-3-2"></div>
     </div>
    </div>
</body>
</html>
```
An object A is called a **descendant** of an object B, if either A is a child of B or A is a child of an object C that is a descendant of B.

An inclusive descendant is an object or one of its descendants

An object A is called an **ancestor** of an object B if and only if B is a **descendant** of A.

An object A is called a **sibling** of an object B, if and only if B and A share the same non-null parent. 

The **first child** of an object is its first child or null if it has no children

The **last child** of an object is its last-child or null if it has no children.

I think you get where I'm going with this 😉

##🧮 ORDER SETS <a name="sets"></a>
The order set parser takes a string input and then runs these steps:
1. Let inputTokens be the result of [splitting input on ASCII whitespace](https://infra.spec.whatwg.org/#split-on-ascii-whitespace)
2. Let tokens be a new ordered set - ** a list with the additional semantic that it must not contain the same item twice **
3. For each token in inputTokens, append token to tokens
4. Return all tokens

##👁 VISUAL REPRESENTATION OF THE PARENT-CHILD-SIBLING concept <a name="visual"></a>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mvcrdxi901iqbrrpkfj9.png)

The DIV 1 is the parent element of Child 1 and Child 2. Child 1 and Child 2 elements are siblings.

The DIV 2 is the parent element of Child 3 and Child 4, at the same time Child 3 and Child 4 are siblings. Child 5 and Child 6 are children of the Child 3 element, also, they are siblings and descendants of DIV 2.

###️⃣ GETTING AN ELEMENT BY ID <a name="by-id"></a>
Now, we are going to demonstrate how to access DOM elements using javascript. Open your console and click the button.

{% codepen https://codepen.io/codespressoweb/pen/eYBNpjx default-tab=js,result %}

In your console, you should get this:

```HTML
<div id=​"get-me">​GET ME​</div>​
```

The important part in the javascript code is:

```javascript
var get_me = document.getElementById("get-me");
```
Here, we declare a variable get_me that we use to store an element (div with an id of "get-me"). **YES** we can store the entire HTML element inside a single variable!

**Why would we want to store an entire element inside a single variable?**

Well, we don't, but we want to store an object that represents an HTML element we are trying to get, and we already do that, but if we change console.log(get_me) to console.dir(get_me) we will get something like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3tjbggxdxgm0gt52h766.png)

This is just a small part of an object try copying code from my codepen and running it on your machine with the console.dir directive and you'll see the entire object.

![mscott](https://media.giphy.com/media/10mg1YnJMmJgkM/giphy.gif)

What the heck is that? 😲

Don't worry. You don't need to remember or know every single property of that object, but this is why we are getting an element by id and storing it inside a variable, maybe we need to manipulate that object. Like change text or color.

##🅰 CHANGE TEXT OF AN ELEMENT <a name="text"></a>
You probably noticed that I have a line of code that is commented out. If you uncomment that line you will see a change on a button click, the change affects a property within a get_me element object that is called **innerText**; An innerText as its name says is a simple text that is inside the div (if div has no text initially, innerText is just an empty string).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wwuv5nycyiqlva0m8ibw.png)

I changed the text of a div with this line of code:
```javascript
get_me.innerText = "CHANGE"
```
You probably noticed the **innerHTML** on the picture. The innerHTML contains HTML tags as well as the text. So, if we were to change an innerHTML by adding a new paragraph to get_me div we would do something like this:

```javascript
get_me.innerHTML = "<p>CHANGE</p>";
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jqwhe1byzf5a02xhotq3.png)

##📝 SUMMARY <a name="summary"></a>
- The **Document Object Model** is the data representation of the objects that comprise the structure and content of a document on the web.
- The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.
- Access element by Id `document.getElementById("id")`
- Change inner text `document.getElementById("id").innerText = "text"`
- Change inner HTML - `document.getElementById("id").innerText = "<p>text</p>"`

# 🙏 THANK YOU FOR READING!<a name="thank-you"></a>
References:
School notes...
School books...
[whatwg](https://dom.spec.whatwg.org/)

Please leave the comment, tell me about you, about your work, comment your thoughts, connect with me! 

☕ SUPPORT ME AND KEEP ME FOCUSED!
<a href='https://ko-fi.com/Z8Z33D1HJ' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://cdn.ko-fi.com/cdn/kofi4.png?v=2' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>

Have a nice time hacking! 😊