html - Get children with tagname as <div> only in javascript

Question

I have a HTML as:

<div id="xyz">

 <svg>......</svg>
 <img>....</img>
 <div id = "a"> hello </div>
 <div id = "b"> hello
      <div id="b1">I m a grand child</div>     
 </div>
 <div id = "c"> hello </div>

</div>

I want to get all the children with tags as "div" of the parent element with id = xyz in a javascript variable.

Such that my output should be:

"<div id = "a"> hello </div>
 <div id = "b"> hello
      <div id="b1">I m a grand child</div>     
 </div>
 <div id = "c"> hello </div>"

Answer 1

You can simply get the #xyz div first, then find all div children:

var childDivs = document.getElementById('xyz').getElementsByTagName('div')
//                        ^ Get #xyz element;         ^ find it's `div` children.

The advantage of this method over Document.querySelectorAll is that these selectors work in pretty much every browser, as opposed to IE 8/9+ for the queryselector.