The fastest way to get recursively all children of an element in the DOM
There are several ways to get element descendants, but fancy does not mean efficient, old does not mean inefficient
As web pages grow increasingly bigger because of trendy gradual loading, the once negligible time spent on DOM traversal and manipulations starts to matter.
There are several approaches to retrieve all descendants of an element. Which way is the fastest? What approaches to forget forever because of their poor performance?
In this post I measure performance of approaches based on:
el.getElementsByTagName()el.querySelectorAll()el.childrendocument.createTreeWalker()document.createNodeIterator()
They differ significantly in their speed. After reading this post to the end, you will avoid the method in the middle.
To benchmark the methods, I combined HTML code from several popular web sites with infinite loading and stripped it of URLs. The realistic sample HTML code contains 68848 tags. It is parsed but not displayed. It is only inserted in a container div element:
