Obtener niños con nombre de etiqueta como solo en javascript

Tengo un HTML como:

<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>

Quiero obtener todos los elementos secundarios con etiquetas como “div” del elemento principal con id = xyz en una variable de javascript.

De tal manera que mi salida debería ser:

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

Simplemente puede obtener el #xyz div primero, luego encuentra todo div niños:

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

La ventaja de este método sobre Document.querySelectorAll es que estos selectores funcionan en bastante cada navegadorOpuesto a IE 8/9+ para el selector de consulta.

Puedes usar querySelectorAll:

var childDivs = document.querySelectorAll('#xyz div')

Un método para transformar los divs en una cadena (para almacenar o alertar) podría ser:

var divsHtml = function () {
    var divhtml = [],
        i = -1,
        divs = document.querySelectorAll('#xyz div');
    while (i++ < divs.length) {
        divs[i] && divhtml.push(divs[i].outerHTML);
    }
    return divhtml.join('');
}();

Si necesita compatibilidad con navegadores más antiguos (ic IE

Para evitar la doble lista de divs (anidados), es posible que desee utilizar

var divsHtml = function () {
    var divhtml = [],
        i = -1,
        divs = document.querySelector('#xyz').childNodes;
    while (i++ < divs.length) {
        divs[i] &&
        /div/i.test(divs[i].tagName) &&
        divhtml.push(divs[i].outerHTML);
        /* ^ this can also be written as:
          if(divs[i] && /div/i.test(divs[i].tagName) {
              divhtml.push(divs[i].outerHTML)
          }
        */
    }
    return divhtml.join('');
}();

[edit 2021] Siete años, esta respuesta. Ver este fragmento para otro enfoque.

Si solo desea los hijos inmediatos de xyz, puede llamar

var childrendivs = document.querySelectorAll('#xyz > div');

o calcularlos usted mismo, si utiliza un navegador antiguo sin document.querySelectorAll-Apoyo

var childrendivs = [],
    children = document.getElementById('xyz').children;
for(var i = 0; i < children.length; i++){
    if (children[i].tagName == "DIV") {
        childrendivs.push(children[i]);
    }
}

A menos que haya entendido mal, esto es exactamente lo que getElementsByTagName lo hace.

Para obtener solo los hijos directos de una etiqueta de elemento específica:

// All `div` children of document (body) (including nested)
document.querySelectorAll('div')
  .forEach(elm => elm.classList.add('querySelectorAll'))


// only direct children of document (body) which matches a `div` selector
const directDivs = [...document.body.children]
  .filter(elm => elm.matches('div'))
  // style only the `div`
  .forEach(elm => elm.classList.add('direct-div-children'))

*:not(body):not(html) {
  margin: 5px;
  padding: 5px;
  border: 3px solid black;
}

.querySelectorAll { 
  background: lightyellow;
}

.direct-div-children {
  border: 3px solid red;
}

<div>
  A
  <div>A1</div>
  <div>A2</div>
</div>
<p>not a div</p>
<div>B</div>
<div>C</div>