[解決済み】子ノードを取得する最適な方法

質問

JavaScriptには、任意の要素から最初の子要素を取得する様々な方法がありますが、どれが一番いいのでしょうか？ベストというのは、最もクロスブラウザに対応し、最も速く、最も包括的で、動作が予測しやすいという意味です。私がエイリアスとして使っているメソッド/プロパティのリストです。

var elem = document.getElementById('container');
var child = elem.children[0];
var child = elem.firstElementChild; // == children[0]

これはどちらの場合にも有効です。

var child = elem.childNodes[0]; // or childNodes[1], see below

それは、フォームの場合、あるいは <div> の繰り返しです。テキスト要素に遭遇する可能性がある場合。

var child = elem.childNodes; // treat as NodeList
var child = elem.firstChild;

私が解決できる範囲では firstChild のNodeListを使用しています。 childNodes と firstElementChild が使用します。 children . MDN のリファレンスから推測しています。

childNode は、要素ノードの最初の子要素への参照、または null がない場合は

速度の面では、もし違いがあるとしても、ほとんどないだろうと推測しています。 firstElementChild への参照です。 children[0] であり、その children オブジェクトは、いずれにせよすでにメモリ内にあります。

何が私を混乱させるか、それは childNodes オブジェクトを使用します。このオブジェクトを使用して、table 要素内のフォームを見てみました。一方 children はすべてのフォーム要素をリストアップします。 childNodes は、HTMLコードの空白も含んでいるようです。

console.log(elem.childNodes[0]);
console.log(elem.firstChild);

両ログ <TextNode textContent="\n ">

console.log(elem.childNodes[1]);
console.log(elem.children[0]);
console.log(elem.firstElementChild);

全てのログ <input type="text" ... > . どうして？一方のオブジェクトは「生の」HTMLコードを扱うことができ、もう一方はDOMに張り付くというのは理解できるのですが childNodes 要素は両方のレベルで機能するようです。

最初の質問に戻ると、私の推測では、最も包括的なオブジェクトが必要な場合。 childNodes しかし、その包括性ゆえに、私が望む/期待する要素をいつでも返してくれるという点では、最も予測しやすい方法ではないかもしれません。その場合、クロスブラウザのサポートが課題になるかもしれません。

どなたか、手元のオブジェクトの区別を明確にしていただけませんか？もし、ごくわずかでもスピードに差があるのなら、私も知りたいのです。もし、私の見方が間違っていたら、遠慮なくご教授ください。

PS：お願いします！JavaScriptが好きなので、そうですね、こういうのを何とかしたいです。jQueryはあなたのためにこれを処理する」のような回答は、私が探しているものではありません、したがって、ありません。 jquery タグを使用します。

解決方法は？

考えすぎのようですね。の違いを観察したんだろ？ childNodes と children ということです。 childNodes は空白だけで構成されたテキストノードを含むすべてのノードを含むのに対し children は、要素である子ノードだけを集めたものです。本当にそれだけなんです。

どちらのコレクションも予測不可能なことはありませんが、注意しなければならない問題がいくつかあります。

• IE <= 8 は、空白のみのテキストノードを childNodes 他のブラウザでは
• IE <= 8 は、コメントノードを children 他のブラウザでは要素

children , firstElementChild などは、DOM を要素に限定してフィルタリングしたビューを表示するための便利な機能です。