Understanding the Document Object Model JS Foundation

One of the main concepts of JavaScript is the Document Object Model, so it is essential to have a solid understanding of JavaScript in order to be able to manipulate the DOM.

When you have finally mastered the fundamentals of JavaScript and are ready to go deeper, you need to understand how the DOM works.

The majority of the many behaviors you observe on a webpage are the result of adding, changing, and removing element classes that rely on DOM manipulation.

The DOM is where CRUD all began, which may go unnoticed while learning JS. If you need to use CRUD functionality in other JavaScript frameworks, the adding, editing, and deleting of elements from the DOM is evidence of that.

Key takeaways

Understand how the DOM works.
Know the various DOM selectors
*Understand how to select DOM elements.

Pre-Requisites
*HTML
*CSS
*JavaScript-basics

What is the DOM?

DOM is an abbreviation for Document Object Model; the DOM is the structural representation of a web page. After writing the HTML and CSS for a webpage, when it is viewed on a web browser, it is displayed as a structure, which is often referred to as a "family tree," which shows the relationship between elements and their hierarchy; this is practically the document object model.

The DOM provides a way to interact with the web elements ( HTMLand& CSS ), listen for events, add styling, and create and remove classes or elements.

In the DOM, each element turns into an object or a node. In order to manipulate and interact with the web page, JavaScript employs built-in methods to select specific elements.
The flow of the control to manipulate the DOM is to first select the element and then manipulate it. To carry out this manipulation, there are some activities carried out by the DOM.

DOM Activities

*Select element
*Traverse DOM
Create or Remove Elements
Create or remove classes
Add or Remove Styling
*Create Attributes

DOM Selectors
DOM selectors are JavaScript in-built methods used to select an object or node in the DOM before it is manipulated. There are several selectors, which are listed below:

*GetElementById
*GetElementsByTagName
*GetElementsByClassName
*QuerySelector
*QuerySelectorAll

How selectors work
A selector can pick an element from the DOM and assign it to a variable, then it can be referenced and manipulated with the given value. All selectors have different uses, as the name implies, but they all select data in a specific way.

getElementbyId: This method allows you to select an element based on its ID name.
getElementbyTagName: This method allows you to select an element based on its tag name.
The same is true for the ClassName, whereas the querySelector allows you to select elements based on the selector you passed, such as id, class, or tag, enclosed in a bracket:getELementbyquerySelector("selector-name");

How to select DOM elements

`<html>
<head>
<title>DOM Selectors</title>
</head>
<body>
<h1 id="title">Hello DOM</h1>
</body>
</html>`

The h1 element in the code above will be selected by Id and then assigned to a variable heading before it is manipulated.

"cont heading = document.getELementById('title');"
heading.style.color = "red";
`

The heading variable is used to change the h1 text color to red. "Hello DOM" becomes red. Now that you have selected and manipulated your first DOM element, code it out to see how it works. You can also decide to delete elements, add animation to an element, or add a new element to the DOM.

This is the basic way to select elements from the DOM. Other DOM selectors rely on the same method; they just have a unique selector mode, as you can see below.

"const heading = document.getELEMENTBYCLASSNAME('title');"
heading = doc.getELementsByTagName('h1');
const heading = document.querySelector('#title');
const heading = document.querySelectorAll('#title');
`
All selectors perform the same duty; what you select an element with depends on how you decide to create it. Note that querySelectorAll is unique because it selects every element that carries that selector name.

Take note of the syntax and selector differences and know the pattern.

Select the element or group of elements we want.
Decide on the effect we want to apply to the selection.
//getElementById('element')
//getElemensByTagName( 'tagname' );
//getElementsByClassName('classname');
//querySelector('any css'); - returns a single result.
// querySelectorAll('any css'); - returns all results.

Navigating your way through the DOM

Now that you have performed your first DOM manipulation, there are other advanced methods to select DOM elements in critical situations, like selecting an element's child, grandchild, parent, or grandparent. All these are dependent on other DOM methods; some of the examples are below.

"// childNodes" returns all childNodes, including whitespace, which is treated as a text node.
// children
// firstChild
// lastChild
// previousSibling
// nextSibling`

Summary
With these very basics, you can further navigate your way through finding and testing the most common DOM methods you will need as you write JavaScript. They are all dependent on this same concept; just know the method and know where and when to use it. I hope this article helps you understand how the DOM works.

Blog

Understanding the Document Object Model JS Foundation

Wisdom John ikoi

Join Our Newsletter. No Spam, Only the good stuff.

Related