How to get all childNodes in JS including all the 'grandchildren'?

Question

I want to scan a div for all childNodes including the ones that are nestled within other elements. Right now I have this:

var t = document.getElementById(\'DivId         


        

Answer 1

If you're looking for all HTMLElement on modern browsers you can use:

myDiv.querySelectorAll("*")

Answer 2

What about great-grandchildren?

To go arbitrarily deep, you could use a recursive function.

var alldescendants = [];

var t = document.getElementById('DivId').childNodes;
    for(let i = 0; i < t.length; i++)
        if (t[i].nodeType == 1)
            recurseAndAdd(t[i], alldescendants);

function recurseAndAdd(el, descendants) {
  descendants.push(el.id);
  var children = el.childNodes;
  for(let i=0; i < children.length; i++) {
     if (children[i].nodeType == 1) {
         recurseAndAdd(children[i]);
     }
  }
}

If you really only want grandchildren, then you could take out the recursion (and probably rename the function)

function recurseAndAdd(el, descendants) {
  descendants.push(el.id);
  var children = el.childNodes;
  for(i=0; i < children.length; i++) {
     if (children[i].nodeType == 1) {
         descendants.push(children[i].id);
     }
  }
}

Answer 3

This is the fastest and simplest way, and it works on all browsers:

myDiv.getElementsByTagName("*")