Obtenir tous les n?uds enfants

En Javascript, vous pouvez obtenir tous les n?uds enfants via les enfants.

children ne renvoie que les n?uds HTML, pas même les n?uds de texte. Bien qu'il ne s'agisse pas d'un attribut DOM standard, il est pris en charge par presque tous les navigateurs.

Syntaxe?:

    nodeObject.children

Parmi eux, nodeObject est l'objet n?ud (n?ud élément) et la valeur de retour est la collection (tableau) de tous les n?uds enfants.

Remarque?: Dans IE, les enfants contiennent des n?uds de commentaires.

Par exemple, pour obtenir tous les n?uds enfants du n?ud avec id="demo":

document.getElementById("demo").children;

Généralement, nous voulons obtenir le n?ud élément, qui peut être sélectionné via l'attribut nodeType, les n?uds avec nodeType==1 sont des n?uds d'élément.

Ci-dessous, personnalisez une fonction pour obtenir tous les sous-n?uds d'éléments?:

var getChildNodes=function(ele){
   var childArr=ele.children,
         childArrTem=new Array();  //  臨時數(shù)組，用來存儲符合條件的節(jié)點
    for(var i=0,len=childArr.length;i<len;i++){
        if(childArr[i].nodeType==1){
            childArrTem.push(childArr[i]);  // push() 方法將節(jié)點添加到數(shù)組尾部
        }
    }
    return childArrTem;
}

Par exemple, récupérez tous les sous-n?uds d'éléments du n?ud avec id="demo":

<div id="demo">
    <!-- 這里是注釋 -->
    <div>子節(jié)點一</div>
    <div>子節(jié)點二</div>
    <div>子節(jié)點三</div>
</div>
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
    var childArr=getChildNodes(this);
    alert("元素子節(jié)點的個數(shù)為："+childArr.length);
}
</script>

Veuillez consulter la démonstration suivante

De plus, dans la spécification W3C, les n?uds enfants sont obtenus via childNodes, qui est un attribut standard qui renvoie une collection de n?uds enfants de l'élément spécifié. , y compris les n?uds HTML, les n?uds de texte, les n?uds de commentaires, etc., qui sont plus étendus que les types de n?uds renvoyés par les enfants.

Ce qui suit est une liste des navigateurs pris en charge pour childNodes?:

Afin d'améliorer la compatibilité du code et d'éviter que les navigateurs individuels ne prennent pas en charge les enfants ou les childNodes Dans ce cas , vous pouvez écrire le code comme ceci :

var childArr=ele.children || ele.childNodes

Modifiez légèrement la fonction getChildNodes() ci-dessus :

var getChildNodes=function(ele){
   var childArr=ele.children || ele.childNodes,
         childArrTem=new Array();  //  臨時數(shù)組，用來存儲符合條件的節(jié)點
    for(var i=0,len=childArr.length;i<len;i++){
        if(childArr[i].nodeType==1){
            childArrTem.push(childArr[i]);
        }
    }
    return childArrTem;
}

Obtenez le premier n?ud enfant

En Javascript, vous pouvez passer firstChild pour obtenir le premier n?ud enfant.

Syntaxe?:

    nodeObject.firstChild

Parmi eux, nodeObject est l'objet n?ud (n?ud élément).

Les navigateurs d'IE8.0 et inférieurs ignoreront les n?uds vides (touches espace, entrée et tabulation) entre les n?uds. Les navigateurs qui suivent les spécifications du W3C (Chrome, FireFox, Safari, etc.) ignoreront ces espaces. comme n?uds de texte.

Par exemple, récupérez le premier n?ud enfant?:

<div id="demo">
    <div>子節(jié)點一</div>
    <div>子節(jié)點二</div>
    <div>子節(jié)點三</div>
</div>
<script type="text/javascript">
    document.getElementById("demo").onclick=function(){
        alert(
            "第一個子節(jié)點："+this.firstChild+"\n"+
            "第一個子節(jié)點的類型是："+this.firstChild.nodeType+"\n"+
            "第一個子節(jié)點的名稱是："+this.firstChild.nodeName
        );
    }
</script>

Exemple de démonstration

Dans les navigateurs d'IE8.0 et inférieurs, il affiche?:
Le premier n?ud enfant?: [objet HTMLDivElement]
Le type du premier n?ud enfant est?: 1
Le nom du premier n?ud enfant est : DIV

Sous Chrome, Opera, Safari, FireFox, il affiche :
Le premier n?ud enfant : [texte de l'objet]
Le type du premier n?ud enfant le n?ud enfant est?: 3
Le nom du premier n?ud enfant est?: #text

Modifiez légèrement le code ci-dessus pour supprimer l'espace blanc entre les n?uds?:

<div id="demo"><div>子節(jié)點一</div><div>子節(jié)點二</div><div>子節(jié)點三</div></div>
<script type="text/javascript">
    document.getElementById("demo").onclick=function(){
        alert(
            "第一個子節(jié)點："+this.firstChild+"\n"+
            "第一個子節(jié)點的類型是："+this.firstChild.nodeType+"\n"+
            "第一個子節(jié)點的名稱是："+this.firstChild.nodeName
        );
    }
</script>

Exemple de démonstration

Dans tous les navigateurs, affichez :
Premier n?ud enfant : [objet HTMLDivElement]
Le type du premier n?ud enfant est : 1
Le nom du premier n?ud enfant est : DIV

Obtenir le dernier n?ud enfant

En Javascript, vous pouvez passer lastChild pour obtenir le dernier n?ud enfant.

Comme firstChild, les navigateurs d'IE8.0 et inférieurs ignoreront les n?uds vides (espaces, retours chariot et touches de tabulation) entre les n?uds. Les navigateurs qui suivent les spécifications du W3C (Chrome, FireFox, Safari, etc.) le feront. traitez ces espaces comme des n?uds de texte.

Déterminer s'il existe des n?uds enfants

En Javascript, vous pouvez utiliser la méthode hasChildNodes() pour déterminer s'il existe des n?uds enfants.

Syntaxe?:

    nodeObject.hasChildNodes()

Parmi eux, nodeObject est l'objet n?ud (n?ud d'élément), et la valeur de retour est de type booléen.

Les navigateurs d'IE8.0 et inférieurs ignoreront les n?uds vides (touches espace, entrée et tabulation) entre les n?uds. Les navigateurs qui suivent les spécifications du W3C (Chrome, FireFox, Safari, etc.) les ignoreront. sont traités comme des n?uds de texte.

Les n?uds de texte et les n?uds d'attribut ne peuvent plus contenir de n?uds enfants, donc la valeur de retour de la méthode ChildNodes() pour ces deux types de n?uds est toujours fausse.

Si la valeur de retour de hasChildNodes() est fausse, la valeur de retour de firstChild et lastChild est nulle (le n?ud n'existe pas), et la valeur de retour de children et childNodes est une collection vide (longueur du tableau est 0).