Introduction to the DOM, DOM Tree, Nodes and Elements Part-1
Published on March 20, 2020
Introduction to the DOM
Understanding the DOM Tree and Nodes
The DOM is often referred to as the DOM tree, and consists of a tree of objects called nodes. In the Introduction to the DOM, we went over what the Document Object Model (DOM) is, how to access...
How To Access Elements in the DOM
In order to be proficient at accessing elements in the DOM, it is necessary to have a working knowledge of CSS selectors, syntax and terminology as well as an understanding of HTML elements. In this tutorial, we will go over several ways to access elements in the DOM: by ID, class, tag, and query selectors.
How To Traverse the DOM
This tutorial will go over how to traverse the DOM (also known as walking or navigating the DOM) with parent, child, and sibling properties.
How To Make Changes to the DOM
In this tutorial, we will go over how to create new nodes and insert them into the DOM, replace existing nodes, and remove nodes.
How To Modify Attributes, Classes, and Styles in the DOM
In this tutorial, we will learn how to further alter the DOM by modifying styles, classes, and other attributes of HTML element nodes. This will give you a greater understanding of how to manipulate essential elements within the DOM.
What is the DOM?
At the most basic level, a website consists of an HTML document. The browser that you use to view the website is a program that interprets HTML and CSS and renders the style, content, and structure into the page that you see.
The Document Object
In Developer Tools on index.html, move to the Console tab. Type document into the console and press ENTER. You will see that what is output is the same as what you see in the Elements tab.
<!DOCTYPE html> <html lang="en"> <head> <title>Learning the DOM</title> </head> <body> <h1>Document Object Model</h1> </body> </html>
document is an object, body is a property of that object that we have accessed with dot notation. Submitting document.body to the console outputs the body element and everything inside of it.
In the console, we can change some of the live properties of the body object on this website. We’ll edit the style attribute, changing the background color to fuchsia. Type this into the console:
document.body.style.backgroundColor = 'tks';
After typing and submitting the above code, you’ll see the live update to the site, as the background color changes.
lets explore more on DOM
For more in-depth information on the DOM, review the Document Object Model (DOM) page on the Mozilla Developer Network.
The DOM is often referred to as the DOM tree, and consists of a tree of objects called nodes. In the Introduction to the DOM, we went over what the Document Object Model (DOM) is, how to access the document object and modify its properties with the console, and the difference between HTML source code and the DOM.
To begin, let’s take a look at this HTML element.
Here we have an anchor element, which is a link to index.html.
- a is the tag
- href is the attribute
- index.html is the attribute value
- Home is the text.
- Everything between the opening and closing tag combined make the entire HTML element.
We’ll be working with the index.html from the previous tutorial:
index.html <!DOCTYPE html> <html lang="en"> <head> <title>Learning the DOM</title> </head> <body> <h1>Document Object Model</h1> </body> </html>
<body> <h1>Document Object Model</h1> <a id="nav" href="index.html">Home</a> </body>
Load or reload the page in your browser window and look at the DOM to ensure that the code has been updated.
We’re going to use the getElementById() method to access the entire element. In the console, type the following:
document.getElementById('nav'); // <a id="nav" href="index.html">Home</a>
We have retrieved the entire element using getElementById(). Now, instead of typing that object and method every time we want to access the nav link, we can place the element into a variable to work with it more easily.
let navLink = document.getElementById('nav'); navLink.href = 'https://www.wikipedia.org'; navLink.textContent = 'Navigate to Wikipedia';
The navLink variable contains our anchor element. From here, we can easily modify attributes and values. For example, we can change where the link goes by changing the href attribute:
We can also change the text content by reassigning the textContent property: Now when we view our element, either in the console or by checking the Elements tag, we can see how the element has been updated.
<a id="nav" href="https://www.wikipedia.org/">Navigate to Wikipedia</a>
This is also reflected on the front-end of the website.
If you like it, share it!