web-dev-qa-db-ja.com

JavaScriptでのみ<div>としてタグ名を持つ子を取得する

私は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>"
javascripthtmlparent-child
12
Hardik Dave

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

古いブラウザ（つまりIE <8）との互換性が必要な場合は、@ Cerbrus 'メソッドを使用してdivを取得するか、shimを使用します。

（ネストされた）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 です

9
KooiInc

最初に#xyz divを取得し、次にすべてのdiv子を見つけるだけです。

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

このメソッドのDocument.querySelectorAllに対する利点は、これらのセレクターが かなりすべてのブラウザー で機能することです queryselector のIE 8/9 +。

18
Cerbrus

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]);
    }
}
5
Artjom B.

私が誤解しない限り、これはまさに getElementsByTagName が行うことです。

3
georg