Propriété nextSibling de HTML DOM

Objet Element HTML DOM

nextSiblingLa propriété retourne le nœud frère suivant immédiatement après l'élément (y compris les nœuds texte, les nœuds de commentaire, les retours chariot, les sauts de ligne, les espaces, le texte, etc.).

Si il n'y a pas de prochain élément de niveau égal, cette propriété retournenull.

Les espaces sont considérés comme du texte, et le texte est considéré comme un nœud. Les commentaires sont également considérés comme des nœuds.

Pour éviter les problèmes de retour de #text ou de nœuds #comment par nextSibling, on peut utilisernextElementSiblingRetourne uniquement les nœuds élément.

L'utilisationpreviousSiblingLa propriété peut retourner le nœud précédent au même niveau dans l'arbre que le nœud spécifié.

L'utilisationchildNodesLa propriété peut retourner n'importe quel sous-nœud du nœud spécifié.

Syntaxe :

node.nextSibling

<div id="div-1">Here is div</>-1</div>
<div id="div-2">Here is div</>-2</div>
<script>
var x = document.querySelector("#div-1").nextSibling.nodeName;
document.getElementById("result").innerHTML = x;
</script>

Mais, si on supprime les espaces entre les DIV, la valeur retournée ne sera pas #text :

<div id="div-1">Here is div</>-1</div><div id="div-2">Here is div</>-2</div>
<script>
var x = document.querySelector("#div-1).nextSibling.innerHTML;
document.getElementById("result").innerHTML = x;
</script>

Compatibilité du navigateur

La propriété nextSibling est complètement supportée par tous les navigateurs :

Détails techniques

Références associées

Référence HTML DOM :node propriété .childNodes

Référence HTML DOM :node propriété .firstChild

Référence HTML DOM :node propriété .lastChild

Référence HTML DOM :node propriété .parentNode

Référence HTML DOM :node propriété .previousSibling

Référence HTML DOM :node propriété .nodeName

Objet Element HTML DOM