仅在javascript中将带有标记名的子项设为<div>

Question

我有一个HTML作为:

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

我希望所有带有标签的孩子都是javascript变量中id = xyz的父元素的"div".

这样我的输出应该是:

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

你可以#xyz先得到div,然后找到所有div孩子:

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

这种方法的优点Document.querySelectorAll是这些选择器几乎 适用于每个浏览器,而不是IE 8/9 +用于queryselector.

Answer 2

你可以使用querySelectorAll:

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

将div转换为字符串(存储或警报)的方法可以是:

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('');
}();

如果您需要兼容旧版浏览器(ic IE <8),请使用@ Cerbrus '方法检索div,或使用垫片.

为避免(嵌套)div的双重列表,您可能想要使用

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('');
}();

这是一个jsfiddle

Answer 3

除非我误解了，这正是getElementsByTagName所做的。

Answer 4

如果你只想要xyz的直接孩子,你可以打电话

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

或者如果您使用不带document.querySelectorAll-Support 的旧浏览器,请自行计算

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