Within the final article we realized what the DOM is and that it may be manipulated (change the nodes inside it). We additionally realized about a technique we are able to goal DOM nodes utilizing totally different selectors (when you did not learn the primary article of the collection, I like to recommend doing so earlier than going any additional). We mainly realized learn how to make use of the built-in strategies of the doc object to entry HTML parts by class, id, tage identify or question selectors.
One other means of focusing on nodes is by traversing the DOM. Traversing merely means to transfer throught the DOM utilizing the relation between nodes (when accessing a sure DOM node, we are able to attain its associated nodes). This implies we are able to keep on the identical DOM stage (department) whereas shifting up, down and even sideways.
However why would we have to do this? We’d assume that utilizing doc.querySelector() can be sufficient for each scenario we encounter when attempting to control the DOM. Nicely, sure and no.
Let’s consider an analogy
Think about you’re within your favourite guide retailer, the place the books in a collection are sorted in ascending order, from left to proper. You’re looking on the first Harry Potter quantity that is sitting on a shelf. You are lacking the primary two volumes and also you wish to purchase them, so after you discovered the primary one, the second ought to be subsequent to it. Now you’ve gotten two potentialities to get the second quantity:
- You get it instantly from the shelf, since you possibly can transfer a bit to the fitting and discover it straight away.
- You go to the money register and ask for the individual working there to search for the guide of their system, let you know the place within the retailer it is positioned after which go get it.
Which method can be sooner? The primary one, after all. We discovered the second quantity based mostly on the place (relation) to the primary one, as an alternative of interogating the system (do a search by identify). Based mostly on this analogy, it should all the time be simpler to maneuver from one node to the opposite than doing a full search.
TRAVERSING THE DOM
Earlier than shifting ahead, let’s write some easy HTML code so we are able to visualize our examples higher:
<!DOCTYPE html>
<html>
<head>
<title>Traversing the DOM is enjoyable!</title>
</head>
<physique>
<h2>Methods to</h2>
<p>If you wish to discover ways to traverse the DOM, you need to proceed studying this
tutorial.</p>
<h2>We are able to traverse the DOM based mostly on the relation between:</h2>
<ul id="nodesList">
<li>Guardian nodes</li>
<li>Youngsters nodes</li>
<li>Siblings nodes</li>
</ul>
</physique>
</html>
An actual illustration of the DOM based mostly on the above HTML seems to be like bellow (if you wish to generate actual DOM timber, you need to use this device)
We are able to traverse the DOM based mostly on the relation between mother or father, youngsters and sibling nodes. We’ve the primary node within the tree which is named the root node. That is the one node that does not have a mother or father because it’s positioned on the very best stage. Each different node has precisely one mother or father and may have any variety of youngsters. We name nodes with the identical mother or father sibling nodes.
In our instance above, the best parent-child relationship between nodes is:
- the
docis theroot nodeand it has two youngsters: theDOCTYPE declarationand thehtml - the
htmlis the mother or father ofheadandphysique - the
physiqueis the mother or father ofh2,p,h2andul - the
ulis mother or father to thelis
Additionally, let’s keep in mind that the whole lot in an HTML doc is taken into account a node and now we have:
- the Doc, which in itself is
a node - HTML parts, that are
Factor Nodes - the textual content contained in the HTML parts, that are
Textual content Nodes - feedback, that are
Remark Nodes
TRAVERSING BASED ON THE PARENT NODE RELATION
A mother or father node is any node that’s one stage above one other node, or nearer to the doc node within the DOM hierarchy. There are two methods to get the mother or father of a node: parentNode and parentElement. So, in our instance, if we’d wish to get the mother or father node of the primary h2, we’d say:
// first we goal the h2 tag
const headerTwo = doc.getElementsByTagName("h2")[0];
const mother or father = headerTwo.parentNode;
console.log(mother or father);
► (1) [body]
What we’re going to get is the <physique></physique> tag, because it’s one stage above the <h2></h2> tag. If we wish to go even another stage up, we are able to chain a number of parentNode properties, like so:
const headerTwo = doc.getElementsByTagName("h2")[0];
const mother or father = headerTwo.parentNode.parentNode;
console.log(mother or father);
► (1) [html]
Now we ‘ll be focusing on the <html></html> tag because it’s one stage above the <physique></physique>.
TRAVERSING BASED ON THE CHILDREN NODES RELATION
The kids of a node are thought-about to be all nodes which might be positioned one stage bellow that node (that’s one stage of nesting).
The properties that assist us goal youngsters nodes are: childNodes, firstChild, lastChild, youngsters, firstElementChild and lastElementChild.
An fascinating scenario
If we’d wish to goal the kids of the <physique></physique> component in our instance, we’d most likely say:
const bodyChildren = doc.physique.childNodes;
console.log(bodyChildren);
I assume you’d count on to see an inventory of 4 objects printed to the console.
► (4) [h2, p, h2, ul]
As a substitute you will note this:
► (9) [text, h2, text, p, text, h2, tex, ul, text]
That is taking place as a result of the childNodes property is focusing on all nodes, together with textual content nodes. In our instance, the indentation between the HTML strains of code are interpreted as textual content.
I feel now could be the right time to make clear what nodes (which have been focused by the childNodes property) and parts (h2, p, h2, ul, which we have been anticipating to see within the console) are.
A node is any object represented within the DOM. Nodes may be of a number of varieties however the ones we’re going to encounter most frequently are
doc,componentandtextual content. So, parts are simply nodes of the kindcomponent. A whole record of all node varieties may be discovered right here.
Coming again to out instance, the place as an alternative of 4 nodes we obtained again 9, it’s because childNodes selects all node varieties (together with textual content), not solely the component ones, which we have been concerned about.
If we wish to choose solely the kids of the kind node component, we are able to use the youngsters, firstElementChild and lastElementChild properties. So, to rewrite our instance:
const bodyChildren = doc.physique.youngsters;
console.log(bodyChildren);
► (4) [h2, p, h2, ul]
TRAVERSING BASED ON THE SIBLING NODES RELATION
A sibling node is any node that’s on the identical DOM stage with some other node. In our instance, h2, p, h2 and ul are all siblings since they’re on the identical DOM stage. The property we are able to use to pick out sibling nodes are: previousSibling, nextSibling, previousElementSibling and nextElementSibling. Needless to say, identical to within the case of kid nodes, previousSibling and nextSibling choose siblings of any kind, whether or not previousElementSibling and nextElementSibling will solely choose nodes of kind component.
So, if we wish to choose the second <li> component within the <ul>, we have to write:
// we goal the record based mostly on its id
const record = doc.getElementById("nodesList");
// we goal the primary node of component kind
const firstElement = record.firstElementChild;
// we use nextElementSibling to get to the second record merchandise
const thirdElement = firstElement.nextElementSibling;
console.log(thirdElement )
► (1) [li]
If as an alternative we’d have used the nextSibling property, the return worth would have been a textual content node because the indentation within the HTML is taken into account textual content, so we’d have focused white area (a node of kind textual content) as an alternative of the subsequent record merchandise component.
const thirdElement = firstElement.nextSibling;
console.log(thirdElement )
► (1) [text]
Now that we all know learn how to traverse the DOM, within the subsequent article we are going to give attention to how we are able to truly change issues within the DOM, with examples. See you subsequent time!
Header supply picture: Paul Esch-Laurent on Unsplash
Refrence articles:
