子ノードを取得する最良の方法

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オブジェクトです。これを使用して、テーブル要素のフォームを確認しました。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"… >。どうして？1つのオブジェクトで「生の」HTMLコードを操作できるようにする一方で、他のオブジェクトはDOMに固執することを理解していますが、childNodes要素は両方のレベルで機能するようです。

私の最初の質問に戻るために、私の推測は次のようになります：最も包括的なオブジェクトが必要な場合、それchildNodesが方法ですが、その包括性のため、必要な要素を返すという点で最も予測しにくいかもしれません/いつでも期待しています。その場合、ブラウザー間のサポートも課題となる可能性がありますが、私は間違っている可能性があります。

誰かが手元にあるオブジェクトの違いを明確にできますか？速度差があっても無視できる程度であれば、私も知りたい。これがすべて間違っていると思われる場合は、遠慮なく教えてください。

PS：ええと、どうか、私はJavaScriptが好きなので、そうです、この種のことを扱いたいのです。「jQueryがこれを処理します」のような答えは私が探しているものではないため、いいえjquery 鬼ごっこ。

考えすぎているようですね。childNodesとの違いを確認しました。childrenつまりchildNodes、完全に空白で構成されるテキストノードを含むすべてのノードを含みchildren、は要素である子ノードのみのコレクションです。これですべてです。

注意すべき問題がいくつかありますが、どちらのコレクションについても予測できないことはありません。

• IE <= 8には、空白のみのテキストノードは含まれませんが、childNodes他のブラウザには含まれます
• IE <= 8にはコメントノードが含まれますがchildren、他のブラウザには要素しかありません

children、firstElementChildそして友達は便利なだけで、要素だけに制限されたDOMのフィルターされたビューを表示します。

firstElementChildはIE <9では使用できない場合があります（firstChildのみ）

MS DOM（IE <9）は空のテキストノードを格納していないため、IE <9ではfirstChildがfirstElementChildです。しかし、他のブラウザでそうすると、空のテキストノードが返されます...

私の解決策

child=(elem.firstElementChild||elem.firstChild)

これはIE <9でも最初の子供を与えるでしょう

クロスブラウザーの方法は、を使用childNodesして取得しNodeList、nodeType ELEMENT_NODEを使用してすべてのノードの配列を作成することです。

/**
 * Return direct children elements.
 *
 * @param {HTMLElement}
 * @return {Array}
 */
function elementChildren (element) {
    var childNodes = element.childNodes,
        children = [],
        i = childNodes.length;

    while (i--) {
        if (childNodes[i].nodeType == 1) {
            children.unshift(childNodes[i]);
        }
    }

    return children;
}

http://jsfiddle.net/s4kxnahu/

lodashなどのユーティリティライブラリを使用している場合、これは特に簡単です。

/**
 * Return direct children elements.
 *
 * @param {HTMLElement}
 * @return {Array}
 */
function elementChildren (element) {
    return _.where(element.childNodes, {nodeType: 1});
}

未来：

疑似クラスquerySelectorAllと組み合わせて使用できます:scope（セレクターの参照ポイントである要素に一致します）。

parentElement.querySelectorAll(':scope > *');

執筆時点では、これ:scopeは Chrome、Firefox、Safariでサポートされています。

他の答えを追加するために、特に<svg>要素を処理する場合は、ここでも注目すべき違いがあります。

私はとの両方.childNodesを使用しており、ゲッターによって配信されたものを使用する.childrenことを推奨しています。HTMLCollection.children

しかし今日、でを使用.childrenするとIE / Edgeが失敗するという問題に遭遇しました<svg>。一方で.children、基本的なHTML要素にIEでサポートされ、それが文書/文書の断片、でサポートされていないか、 SVG要素。

私にとっては、気にする必要の.childNodes[n]ない余分なテキストノードがないため、必要な要素を経由して簡単に取得できました。同じことができるかもしれませんが、上記の他の場所で述べたように、予期しない要素に遭遇する可能性があることを忘れないでください。

これが.children、最新のIEでjsの他の場所で機能し、ドキュメントまたはSVG要素で失敗する理由を理解しようとする頭をひっくり返す人に役立つことを願っています。

みなさん、ホワイトスペースに騙されてはいけません。これをコンソールブラウザでテストしてください。ネイティブJavaScriptを使用します。以下は、同じクラスの2つの「ul」セットの例です。空白を避けるために 'ul'リストをすべて1行にする必要はありません。配列カウントを使用して空白を飛び越えてください。

どのように周りの白いスペースを取得するためにquerySelector()、その後childNodes[]フィドルリンクをJS：https://jsfiddle.net/aparadise/56njekdo/

var y = document.querySelector('.list');
var myNode = y.childNodes[11].style.backgroundColor='red';

<ul class="list">
    <li>8</li>
    <li>9</li>
    <li>100</li>
</ul>

<ul class="list">
    <li>ABC</li>
    <li>DEF</li>
    <li>XYZ</li>
</ul>