“Don” Of the “Dom”(Beta).

In the alpha article of being the don of the dom I tried my best in putting you through the introduction phase of the dom, where we examined it, introduced the javascript dom selectors both single and multiple selectors, and learned a don trick on how to convert the Html collection to an array.

Press enter or click to view image in full sizeImage representation of DOD (BETA) with Don Pablo imitation By Yasir Gaji

In this article, we would dive a bit deeper into the art of being the don of the dom where we would learn to traverse the dom, create an element(s) from the dom, and how to fire and hire elements in the dom like a don using this Html collection.

Traversing The Dom

Having known all the dom selectors let us get down to traversing the dom which is basically navigating/moving upwards and downwards in the dom, we would get to deal with parents and children of individual nodes/elements.

First Instance

We would look at different properties attached to individual nodes/elements and these have to do with parent and children elements/nodes selection, if we were to select child nodes/elements from the provided HTML collection we can use the .childNode method operator as is in this example;

How to select children nodes of an Html collection by Yasir Gaji

now, these few lines of codes would return the children nodes of the ul element in the console.

Press enter or click to view image in full sizeThe children nodes of the ul element returned in the console By Yasir Gaji

Notice the children nodes do not consist of only the li elements but it has text nodes as well, if you are new to javascript you might wonder that there are no texts between the li elements in the Html file well the .childNode method identifies the line breaks in between the li elements as texts, but we can avoid these “text” nodes, as the don, we should use the .children method in place of the .childNode method, so if we have;

How to select children elements of an Html collection by Yasir Gaji

this would have just the child elements, not children nodes returned in the console.

Press enter or click to view image in full sizeThe children elements of the ul element returned in the console by Yasir Gaji

this concludes that .children method is advisable compared to .childNode method when traversing the dom, but both methods are effective and we can manipulate them in so many ways as well as have addon methods attached to them such as .nodeName to get a selected node’s node name or the .nodeType to get the selected node’s node type to mention a few when using the .childNode method.

Second Instance

We can make a specific or targeted selection of the nodes/elements children and manipulate them, for instance, if we want to select/target and manipulate the second child element of the parent element in the Html collection;

How to select specific children elements of an element by Yasir Gaji

this would change the text contents of the selected specific child element

Press enter or click to view image in full sizeThe text content of the selected child element has been changed in the interface by Yasir Gaji

with this method, we can assign properties to children elements or children’s children element/node for instance;

A representation of the manipulation of a child element’s child by Yasir Gaji

this would change the color of the targeted element in the interface as you can see in the representation below;

Press enter or click to view image in full sizeThe text color of the selected child element’s child has been changed in the interface by Yasir Gaji

we can assign a lot more like a dynamic id or className, we can as well select a child element’s child using other methods like .firstChild, .firstElementChild, .lastChild, and .lastElementChild. The tasks performed on the children/child can be done on the parent nodes/elements as well using these methods .parentNode,.parentElement, and .parentElement.parentElement. And just as we can select child and parent elements/nodes we can select sibling elements using methods like .nextSibling,.nextElementSibling,.previousSibling and .previousElementSibling.

That wraps up traversing the dom I’d let you be the don and allow you to figure out how to work with the parent and sibling methods I listed above.

Creating Elements

As the don of the dom we can construct dom elements from absolute scratch, assign attributes to them and insert them into the dom for manipulation, that mentioned creating an additional li element and inserting into the provided Html collection;

creating a new “li” element and appending it to the “ul” element by Yasir Gaji

These few lines of code would output a new li element in the interface and in the Html collection.

Press enter or click to view image in full sizeImage representation if the newly created “li” in the interface by Yasir Gaji

We can create more elements and assign them more dynamically compare to this representation but I would allow you to figure that out yourself as the don.

Hiring and Firing Elements

Removing and replacing elements/nodes in the dom and manipulating classes and attributes in the dom is the way to hire and fire elements/nodes as a don.

Hiring

Let’s hire elements from the provided Html collection shall we, to do this we would make use of the .replaceChild() method which takes in two parameters, the replacement, and the element to be replaced;

Replacing an element with a new one by Yasir Gaji

These set of codes would execute the task of replacing the content of the first child element as is in the image representation

Press enter or click to view image in full sizeElement replacement in the interface byYasir Gaji

Firing

Firing elements from the dom is simply removing them using the
.remove() method, heres a representation below;

Code representation of removing an element by Yasir Gaji

These two lines of code would take out the li elememt in the second index of the unordered list’s list in the Html collection provided, try it out and see it work it’s magic. We can as well remove by child using the .removeChild() method;

code representation of removing an element using the .removeChild() method in JS by Yasir Gaji

These three lines of code would take out the li element in the 4th index of the Html collection.

Conclusion

These methods of traversing the dom, creating an element(s) from the dom, and firing and hiring elements in the dom are core fundamentals in dom manipulation in javascript and can be implemented directly or dynamically into projects. Do ask questions for clarifications.

Notes & References

The .childNode and .children methods are zero-based indexed.
Here’s an exclusive list of node types.
To count the total child elements present we can use the .childElementCount method.