Table Of Contents
* 🤓INTRODUCTION
* 🤳🏻WHAT IS DOCUMENT OBJECT MODEL
* 🌴DOM TREES
* 🧮ORDER SETS
* 👁VISUAL REPRESENTATION
* #️⃣GETTING AN ELEMENT BY ID
* 🅰CHANGE TEXT OF AN ELEMENT
* 📝SUMMARY
* 🙏THANK YOU
🤓 INTRODUCTION
**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.🚀
🤳🏻 WHAT IS DOCUMENT OBJECT MODEL
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 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 😉
🧮 ORDER SETS
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
👁 VISUAL REPRESENTATION OF THE PARENT-CHILD-SIBLING concept
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
Now, we are going to demonstrate how to access DOM elements using javascript. Open your console and click the button.
In your console, you should get this:
<div id="get-me">GET ME</div>
The important part in the javascript code is:
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.
🅰 CHANGE TEXT OF AN ELEMENT
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>";
📝 SUMMARY
- 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!
References:
School notes...
School books...
whatwg
Please leave the comment, tell me about you, about your work, comment your thoughts, connect with me!
☕ SUPPORT ME AND KEEP ME FOCUSED!
Have a nice time hacking! 😊
Top comments (0)