Table Of Contents
* 🤳🏻WHAT IS DOCUMENT OBJECT MODEL
* 🌴DOM TREES
* 🧮ORDER SETS
* 👁VISUAL REPRESENTATION
* #️⃣GETTING AN ELEMENT BY ID
* 🅰CHANGE TEXT OF AN ELEMENT
* 🙏THANK YOU
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.
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:
<!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 😉
The order set parser takes a string input and then runs these steps:
- Let inputTokens be the result of splitting input on ASCII whitespace
- Let tokens be a new ordered set - ** a list with the additional semantic that it must not contain the same item twice **
- For each token in inputTokens, append token to tokens
- Return all tokens
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.
In your console, you should get this:
<div id="get-me">GET ME</div>
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:
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.
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.
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).
I changed the text of a div with this line of code:
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:
get_me.innerHTML = "<p>CHANGE</p>";
- The Document Object Model is the data representation of the objects that comprise the structure and content of a document on the web.
- Access element by Id
- Change inner text
document.getElementById("id").innerText = "text"
- Change inner HTML -
document.getElementById("id").innerText = "<p>text</p>"
Please leave the comment, tell me about you, about your work, comment your thoughts, connect with me!
Have a nice time hacking! 😊