JavaScript が子ノードを取得する

すべての子ノードを取得する

Javascript では、children を通じてすべての子ノードを取得できます。

children は HTML ノードのみを返します。標準の DOM 属性ではありませんが、ほぼすべてのブラウザでサポートされています。

構文:

    nodeObject.children

このうち、nodeObjectはノードオブジェクト(要素ノード)であり、戻り値は全ての子ノードのコレクション(配列)となります。

注: IE では、子にコメント ノードが含まれます。

たとえば、id="demo" を持つノードのすべての子ノードを取得します。

document.getElementById("demo").children;

通常、nodeType 属性を通じて選択できる要素ノードを取得する必要があります。nodeType==1 を持つノードです。要素ノードです。

次に、すべての要素サブノードを取得する関数をカスタマイズします:

var getChildNodes=function(ele){
   var childArr=ele.children,
         childArrTem=new Array();  //  临时数组，用来存储符合条件的节点
    for(var i=0,len=childArr.length;i<len;i++){
        if(childArr[i].nodeType==1){
            childArrTem.push(childArr[i]);  // push() 方法将节点添加到数组尾部
        }
    }
    return childArrTem;
}

例、id="demo" を持つノードのすべての要素サブノードを取得します:

<div id="demo">
    <!-- 这里是注释 -->
    <div>子节点一</div>
    <div>子节点二</div>
    <div>子节点三</div>
</div>
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
    var childArr=getChildNodes(this);
    alert("元素子节点的个数为："+childArr.length);
}
</script>

次のデモを参照してください

さらに、W3C 仕様では、子ノードは childNodes を通じて取得されます。これは、HTML ノード、テキスト ノード、注釈ノードなど、指定された要素の子ノードのコレクションを返す標準属性であり、より広範囲の属性を持ちます。子よりもノード タイプ。

以下は、childNode に対するブラウザのサポートのリストです:

コードの互換性を改善し、個々のブラウザが子ノードまたは childNode をサポートしない状況を避けるために、次のようにコードを書くことができます:

var childArr=ele.children || ele.childNodes

上記の getChildNodes () を変更します。 関数は少し変更されています:

var getChildNodes=function(ele){
   var childArr=ele.children || ele.childNodes,
         childArrTem=new Array();  //  临时数组，用来存储符合条件的节点
    for(var i=0,len=childArr.length;i<len;i++){
        if(childArr[i].nodeType==1){
            childArrTem.push(childArr[i]);
        }
    }
    return childArrTem;
}

最初の子ノードを取得します

Javascript では、firstChild を通じて最初の子ノードを取得できます。

構文:

    nodeObject.firstChild

このうち、nodeObjectはノードオブジェクト(要素ノード)です。

IE8.0 以下のブラウザは、ノード間の空白ノード (スペース、キャリッジ リターン、Tab キー) を無視します。W3C 仕様に準拠するブラウザ (Chrome、FireFox、Safari など) は、これらの空白をノード処理として扱います。 。

たとえば、最初の子ノードを取得します:

<div id="demo">
    <div>子节点一</div>
    <div>子节点二</div>
    <div>子节点三</div>
</div>
<script type="text/javascript">
    document.getElementById("demo").onclick=function(){
        alert(
            "第一个子节点："+this.firstChild+"\n"+
            "第一个子节点的类型是："+this.firstChild.nodeType+"\n"+
            "第一个子节点的名称是："+this.firstChild.nodeName
        );
    }
</script>

サンプルデモ

IE8.0以下のブラウザでは、以下のように表示されます。
最初の子ノード：[object HTMLDivElement]
最初の子ノードの型：1
最初の子ノードの名前は：DIV

Chrome、Opera、Safari、FireFox では、次のように表示されます。
最初の子ノード: [オブジェクト テキスト]
最初の子ノードのタイプ: 3
最初の子ノードの名前: #text

ノード間の空白を削除する上記のコード:

<div id="demo"><div>子节点一</div><div>子节点二</div><div>子节点三</div></div>
<script type="text/javascript">
    document.getElementById("demo").onclick=function(){
        alert(
            "第一个子节点："+this.firstChild+"\n"+
            "第一个子节点的类型是："+this.firstChild.nodeType+"\n"+
            "第一个子节点的名称是："+this.firstChild.nodeName
        );
    }
</script>

デモの例

すべてのブラウザで、次のように表示されます:
最初の子ノード: [object HTMLDivElement]
子ノードのタイプ: 1
最初の子ノードの名前は次のとおりです: DIV

最後の子ノードを取得します

Javascript では、lastChild を通じて最後の子ノードを取得できます。

firstChild と同様に、IE8.0 以下のブラウザはノード間の空白ノード (スペース、キャリッジ リターン、Tab キー) を無視しますが、W3C 仕様に従うブラウザ (Chrome、FireFox、Safari など) は無視します。これらの空白は次のとおりです。テキストノードとして扱われます。

子ノードがあるかどうかを確認する

JavaScript では、hasChildNodes() メソッドを使用して子ノードがあるかどうかを確認できます。

構文:

    nodeObject.hasChildNodes()

このうち、nodeObjectはノードオブジェクト(要素ノード)であり、戻り値はBoolean型です。

IE8.0 以下のブラウザは、ノード間の空白ノード (スペース、キャリッジ リターン、Tab キー) を無視します。W3C 仕様に準拠するブラウザ (Chrome、FireFox、Safari など) は、これらの空白をノード処理として扱います。 。

テキスト ノードと属性ノードには子ノードを含めることができなくなりました。そのため、これら 2 種類のノードの ChildNodes() メソッドの戻り値は常に false になります。

hasChildNodes()の戻り値がfalseの場合、firstChildとlastChildの戻り値はnull(ノードが存在しない)、childrenとchildNodesの戻り値は空の​​コレクション(配列長が0)となります。