Show
We've looked through few binary tree traversal techniques so far: 1- Traversing through binary tree using recursive and iterative algorithms 2- Traversing through binary tree using parent pointers In this article we'll put those learnings to use for an n-ary tree i.e. DOM. We'll see how we can locate DOM elements using various CSS selectors without using inbuilt APIs like
DOM traversal overviewBorrowing the idea from first article, let's come up with the preOrder traversal algorithm for DOM:
Enter fullscreen mode Exit fullscreen mode We can modify this algorithm to return an iterator instead:
Enter fullscreen mode Exit fullscreen mode We can use any of breadth first or depth first algorithms (discussed in previous articles) to traverse the DOM. For the sake of this article, we'll stick with the above approach though. Let's also assume we're working on a document having following HTML:
Enter fullscreen mode Exit fullscreen mode Locating a node by IDBrowsers offer
Enter fullscreen mode Exit fullscreen mode We can use the
Enter fullscreen mode Exit fullscreen mode Locating nodes by classNameBrowsers offer
Enter fullscreen mode Exit fullscreen mode How browser optimizes the selection queriesSelecting DOM node is a fairly common operation for web applications. Traversing through the tree multiple times for the same selector doesn't seem optimal. Browser optimizes the selection by using memoization. Looking at mozilla parser's source, namely an excerpt from the function startTag:
Enter fullscreen mode Exit fullscreen mode We can see that node IDs are kept in a simple hash map. It's done to ensure repeated queries for the same ID do not require full traversal, instead we can just look it up from hashMap and return it. Here's how our solution would look like post memoization:
Enter fullscreen mode Exit fullscreen mode Dealing with more complex selectorsLet's try to implement something like
Example:
Enter fullscreen mode Exit fullscreen mode In this case we can pass any CSS selector to the function and it should be able to traverse the DOM to find that element for us. Let's see it we how it can be implemented:
Enter fullscreen mode Exit fullscreen mode Implementation of
Enter fullscreen mode Exit fullscreen mode BonusWe can use the recursive preOrder traversal approach, describe at the start of this article, to clone any tree. Let's see how we can use it to clone any DOM tree, similar to what
Enter fullscreen mode Exit fullscreen mode This article has been originally published at StackFull.dev. If you enjoyed reading this, you may want to opt for my newsletter. It would let me reach out to you whenever I publish a new thought! How do you traverse a DOM tree?We can also traverse up the DOM tree, using the parentNode property. while (node = node. parentNode) DoSomething(node); This will traverse the DOM tree until it reaches the root element, when the parentNode property becomes null.
How do you traverse a DOM in JavaScript?With the HTML DOM, you can navigate the node tree using node relationships.. parentNode.. childNodes[nodenumber]. firstChild.. lastChild.. nextSibling.. previousSibling.. What do you mean by traversing down the DOM tree?With jQuery traversing, you can easily move up (ancestors), down (descendants) and sideways (siblings) in the tree, starting from the selected (current) element. This movement is called traversing - or moving through - the DOM tree.
Can you access DOM in Nodels?Simply, you cannot. There is no DOM on the server, just a plain html source file. Seems you are looking for some serverside HTML templating language, that allows you to dynamically generate HTML pages, e.g. with a list of icons from an array in them.
|