Traversing Dom Children

The term web developer implies that one looks at web related issues with a need to understand their inner intricacies. After all that is what sets this breed of developers apart from the countless users that enjoy tinkering with their browser and maybe some experimental scripting.

JQuery is great for small tasks. Maybe even larger tasks that run periodically but the weight jQuery carries with it makes it unsuitable for repeated tasks. I wont go into detail as to why using vanilla (raw) javascript is your best course of action because its explained in detail → here. JQuery although convenient has given web developers an introduction to the DOM that is not realistic. I am of those many that understood jQuery far before I understood DOM manipulation with raw javascript. Fast forward to present day, jQuery is not supported in most SPA frameworks, its considered a relic and we must all wake up to the reality of how the DOM was meant to be mutated.

When being enlightened to the ways of DOM manipulation through native javascript functions, you begin finding new and unique ways of doing what you once relied on jQuery for. A common but often overthought concept is traversing the DOM tree.

Look at the jQuery example below for what it looks like to fetch a child of our root node with a specific ID.

the result is going to be the grandchild node. Pretty simple right. Whats the tradeoff ?

1. ) Most importantly the benchmarks for this in comparison to Javascript’s native document.querySelectAll()are ten times slower.
2. ) This approach requires almost no understanding as to how javascript steps through our nodes.

If your more fond of doing and less of understanding, then this trade off will not bother you but if done repeatedly in your application (within a DOM mutation handler for instance) you will be utilizing memory poorly.

Here is how you can traverse this DOM tree to fetch a child using native javascript functionality at 10 times the speed.

querySelector() and querySelectorAll()came with ECMA version 5.1 and is was the beginning of rendering jQuery useless. Now you might be working with older browsers that don’t have the proper polyfills (fillers for newer JS methods that the browser does not yet support). You might be building bare-bone components that require some custom handling during the traversing of the DOM and if so, you need to write your own DOM traverser.

For this example, we’re going to build a traverser that strips all of the <a> tags, checks if their href attribute begins with mailto: and if the mail address matches the parent node’s label text. We’ll say its purpose is to make sure each labels text has been printed with the appropriate email and returns a boolean based on if they all match up. While we’re checking each one, we’ll append some text to the label, specifying if its a match.

1. ) Establish scope: We need a function that takes a container node to traverse as its argument. The traverse function will be a function within our parent function so that scope can be maintained no matter how many times we call traverse() .

2. ) Step through children: step through each child of the root node’s children. If its an <a> tag then we will assume it either does not have children or that its children are irrelevant to us. If it is not an <a> tag but it has children nodes that need traversed through, we will treat the child as our new root and supply it back into the traverse function. We our now running the same traverse routine on each grandchild node, treating each as the root. It will continue traversing each child → grandchild until the supplied node contains no children. This is the key to stepping through our DOM tree.

3.) Add our custom functionality: Here is where you can follow along with the functionality we’re implementing or take this concept and apply it to what you’r doing. This is the end result for our intent and purpose.

Line 7–15 :

• gets the href attribute
• checks that it begins with mailto: indicating that its a mail address.
• splits the href string on : so that we may access just the email address in the second index of the array.
• check that the email matches the label’s text.
• if it does, add some text to the label indicating that it has. If it has not, mark our checksOut flag as false and add an indicator to the label node that it does not.

Here is a more ES7 looking version of what we just did. After splitting it up into a few well named methods and getting rid of all this old ‘function’ syntax, things make more sense.