私は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>"
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 です
最初に#xyz
divを取得し、次にすべてのdiv
子を見つけるだけです。
var childDivs = document.getElementById('xyz').getElementsByTagName('div')
// ^ Get #xyz element; ^ find it's `div` children.
このメソッドのDocument.querySelectorAll
に対する利点は、これらのセレクターが かなりすべてのブラウザー で機能することです queryselector のIE 8/9 +。
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]);
}
}
私が誤解しない限り、これはまさに getElementsByTagName が行うことです。