Tech Daily

Understanding the Document Object Model JS Foundation

Understanding the Document Object Model JS Foundation

The Document Object Model is one of the core fundamentals in JavaScript, to get a solid foundation of manipulating the DOM, one needs to get a good knowledge of JavaScript.

Once you have finally gotten a grasp of JavaScript basics and are ready to move to the more complex stuff, you need to understand the DOM.

Most of the different behavior you see on a webpage is been performed by the adding, modifying, and removing element classes which depend on DOM manipulation.

It might not be noticed while learning JS, but the origin of CRUD all started from the DOM, yeah!! The adding, editing, and removing elements from the DOM is proof of that, if you must further use CRUD functionalities in other JavaScript frameworks you need to understand the DOM as well.

Key take away

*Understand how the DOM works
*Know the various DOM selectors
*Know 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 & CSS for a webpage, when it is viewed on a web browser it is displayed as a Structure, this structure 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 interreact with the web elements ( HTML & 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 JavaScript uses inbuilt methods to select specific elements in order to Manipulate and interact with the web page.
 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 been manipulated, there are several selectors which are listed below:

*GetElementById
*GetElementsByTagName
*GetElementsByClassName
*QuerySelector
*QuerySelectorAll

How selectors work
A Selector 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: Allows you select an element by Id name.
getElementbyTagName: Allows you select an element by Tag Name 
 Same thing applies to the ClassName while the **querySelector **lets you select elements based on the Selector you passed e.g. id, class or tag, inside of a bracket like so: getELementbyquerySelector("selector-name");

 How to select DOM elements

`<html>
<head>
<title>DOM Selectors</title>
</head>
<body>
<h1 id="title">Hello DOM</h1>
</body>
</html>`
Enter fullscreen mode Exit fullscreen mode

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

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

Enter fullscreen mode Exit fullscreen mode

The heading variable is used to change the h1 text color to red. ' Hello DOM 'Becomes red, now 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 unique selectors mode as you can see below.

const heading = document.getELementsByClassName('title');
const heading = document.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 the querySelectorAll is unique because it selects every element that carries that selector name.

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

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

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 elements child, grand child and parent or grand parents. 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

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. winks ;).