v1
- by gullerya 10/30/202010
Setup HTML
<div class="tested-root-with-children">
<span></span>
<span></span>
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
</div>
<div class="tested-root-without-children"></div>
Setup JavaScript
const root = document.querySelector('.tested-root-with-children');
//const root = document.querySelector('.tested-root-without-children');
ready
const list = Array.from(root.querySelectorAll('*'));
list.unshift(root);
ready
const list = [root, ...root.querySelectorAll('*')];
ready
const list = [];
const ni = document.createNodeIterator(root, NodeFilter.SHOW_ELEMENT);
let next;
while (next = ni.nextNode()) {
list.push(next);
}
ready
const list = [root];
const tw = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
let next;
while (next = tw.nextNode()) {
list.push(next);
}
ready
const list = [root];
if (root.childElementCount) {
const tw = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
let next;
while (next = tw.nextNode()) {
list.push(next);
}
}