Being the “Don” Of the “Dom”(DOD).

The Document Object Model known as the DOM is basically a structured representation of the HTML document it can be thought of as a tree of nodes or elements created by the browser, the DOM is object-oriented meaning each node has a set of values and properties that can be changed and we can use Javascript to manipulate these DOM elements/nodes.

Which, I would do the honors of briefly putting you through how you can use Javascript to manipulate the DOM and be a DON at it as well.

Press enter or click to view image in full sizeImage representation of DOD by Yasir Gaji

The browser provides us the window object for a webpage and within that, we have the document object which the diagram above represents, We have the document that’s a parent to the root element(In this case the HTML tag) which is also a parent to two sibling elements, the head and body tags which are parents to other elements, the <a> & <h1>, and <title> are children to the sibling elements respectively and these children serve as parents to other nodes/elements, attributes, and texts as seen in the diagram above.

There are libraries like JQUERY that seems to make DOM manipulation easy but it’s not quite, using traditional Javascript (vanilla js) to traverse and manipulate the DOM is more efficient, faster and it’s the best practice if understanding the Javascript language is your focus and it as well makes you the DON of the DOM.

Examining The Document Object.

Press enter or click to view image in full sizeDocument object as an object of the window object by Yasir Gaji

The document object is a property of the window object (also known as the global object) which is what we would explore and in this section, I would show you how to select items from it, checking a DOM tree using this code
let val;
val = document;
console.log(val);
we would have the entire document object in the console.

Press enter or click to view image in full sizeThe DOM tree in the browser console image by Yasir Gaji

Now, when working with the DOM we can get different types of structures, for instance, the HTML collection in the diagram above which is like an array but it’s not, it’s only formatted like an array so we can’t use array methods like forEach loop with it. To get the HTML collection use;
let val;
val = document.all;
console.log(val);
We would get the following in the console;

Press enter or click to view image in full sizeThe HTML collection in the DOM image by Yasir Gaji

Just like an array, we can access certain indexes in the HTML collection, and just like an array it is zero-based for example we have
let val;
val = document.all[0];
console.log(val);
OR
let val;
val = document.all[4];
console.log(val);
we would get:

Press enter or click to view image in full sizeResult for HTML collection index selection image by Yasir Gaji

We can as well check for properties this way :
let val;
val = document.all.length;
console.log(val);
this code would check the total number of nodes/elements present in the document object,

Press enter or click to view image in full sizeThe total number of nodes/elements in the document object image by Yasir Gaji

we can as well access individual nodes/elements, to select any specific node like the domain, Links, contentType, URL, characterSet… and assign a function to it, for instance
let val1, val2, val3;
val1 = document.head;
val2 = document.body;
val3 = document.links;
console.log(val1, val2, val3);
this code would print out these individual nodes respectively in the console:

Press enter or click to view image in full sizeSpecific Individual nodes image by Yasir Gaji

Here are a few more node selection ways without using javascript selectors, for example:
let val;
val = document.forms;
val = document.forms[0];
val = document.forms.id;
val = document.forms.method;

val = document.links;
val = document.links[4];
val = document.links.className;
val = document.links[7].classList.[6];

val = document.scripts;
val = document.scripts[1].getAttributes("src");
console.log(val);

Fun fact about being the Don is making and breaking the rules, and Javascript does just that, I stated earlier that the HTML collection is only formatted as an array but it is not an array, and array methods can not be used on it, well there’s a trick to that statement but to prove the statement if we have
let val;
val = document.scripts;
val.forEach(function(script) {
console.log(script);
});
console.log(val);
here's the result we would get “module is not defined” as seen in the diagram below.

Press enter or click to view image in full sizeProof that the HTML collection in the DOM is not an Array by Yasir Gaji

Well, as the Don you can apply this trick to it
let val;
val = document.scripts;
let scriptsArr = Array.from(val)
scriptsArr.forEach(function(script) {
console.log(script);
});
console.log(val);

Press enter or click to view image in full sizeResult of conversion of the HTML collection to an array by Yasir Gaji

Awesome right, that's one of the ways of being the DON of the DOM.

DOM Selectors For Nodes/Elements.

These are basically document-object methods that allow node selection from the DOM for dynamic functionality, in the past JQUERY was used to accomplish this task and I don’t recommend it, because it’s like using a sledgehammer to kill a mosquito, and with the recent updates on the traditional javascript (vanilla js) we have selectors categorized into single and multiple selectors so JQUERY is not needed.

Single selectors will allow you to select a single element/node by its ID or className and it only stores one thing so if we use the single selector on an ID or className that appears more than once in the root document it would only select the first one while Multiple selectors do just the opposite.

The first single selector we would take a look at is the document.getElementById(); this does just as it implies it selects elements by their ID alone we can not select a class or tag just the ID, for example, if we select the ID “box” from the document object.
console.log(document.getElementById('box'));

Press enter or click to view image in full sizeThe “box” ID in the header element and its children Image representation by Yasir Gaji

it would print out the ID in the console we can as well get any attribute within the element/node in which the ID exists, for instance
console.log(document.getElementById('box').id);
console.log(document.getElementById('box').className);

we can as well change the CSS of the element for instance to change the background color, text color, and set a padding of the element with the ID of the box we can use these lines of code
document.getElementById('box').style.background = '#333';
document.getElementById('box').style.color= 'red';
document.getElementById('box').style.padding= '1.5rem';

in situations where we want to fetch through the fetch API or AJAX and we want to insert or change the text content of the node/element we can change the text content this way
document.getElementById('box').innerHtml = '<h3>This is Yasir's article</h3>';

but we can change text contents normally using these syntaxes
document.getElementById('box').innerText = 'This is Levitan's article';
document.getElementById('box').textContent= 'This is Gaji's article';

The second single selector we would take a look at works just like JQUERY and has a similar syntax to JQUERY but it is not, it is the document.querySelector(); this selector is better than the initial with it we can select with anything, not just the ID, for instance, to select the ID, className, and element itself we would use the following

console.log(document.querySelector('#box'));
console.log(document.querySelector('.section-features'));
console.log(document.querySelector('header'));

and we can perform every dynamic function we performed using document.getElementById(); with document.querySelector(); and get the same results.

Note for element selection using the document.querySelector(); if we select for instance an li element and in the document object we have multiple li elements it would only select the first one, this applies to multiple IDs and classNames.

Multiple selectors will allow you to select multiple elements/nodes for dynamic functions the first selector we would take a look at is the document.getElementsByClassName() selector, this would select multiple elements by their class names for instance to select the multiple figure elements in the document object using this block of code
const meals = document.getElementsByClassName('meals-photo');
console.log(meals);

Press enter or click to view image in full sizeFigure elements selected with the multiple selector from the document object by Yasir Gaji

the figure elements would be printed in the console indexed (the DOM is zero-based) so we can access them like an array and assign individual tasks to them.

The second multiple selectors is document.getElementsByTagName(); this selects with the tag title instead of the class name for instance
const meals = document.getElementsByTagName('figure');
console.log(meals);
and to manipulate specific index for instance
const meals = document.getElementsByTagName('figure');
meals[1].style.diplay = 'none';
this would take out the second figure from the index.
Being the don you can manipulate the multiple selected elements as an array using either selectors take for instance using document.getElementsByTagName(); to reverse the selected multiple elements;
let meals = document.getElementsByTagName('figure');
meals = Array.from(meals) ;
meals = reverse();

The third multiple selector isdocument.querySelectorAll(); , this selector accepts tag names, class names, and IDs just like JQUERY it also returns nodes list, unlike the two initial selectors that return element lists, this selector would return every attribute within the node that it is being selected from. For instance
const info = document.queryselectorAll('ul.meals-showcase li');
console.log(info);
this would return

Press enter or click to view image in full sizequerySelectorAll() returning the selected node from the document object by Yasir Gaji

we can perform dynamic functions with this selector like a forEach loop, style change, and text replacement just like we’ve done with initial selectors.

Conclusion

Like I said in the first paragraph that I would briefly put you through on how to navigate the Dom, with this little piece of knowledge I shared I believe I have. Now it is left to you to be the Don and expand this racket to Traverse the DOM as you please.

You can learn more from platforms like Free code camp, udemy and W3schools.

References
Free code camp, Brad traversey, and Hemil patel.