HTML DOM Element lastChild attribut

Définition et utilisation

lastChild L'attribut retourne le dernier nœud enfant de l'élément spécifié sous forme d'objet Node.

lastChild L'attribut est lecture seule.

Attention

lastChild Ce sont ces nœuds enfants qui sont retournés : nœuds d'élément, nœuds de texte ou nœuds de commentaires.

Les espaces entre les éléments sont également des nœuds de texte.

Solution de remplacement :

lastElementChild attribut - lastElementChild L'attribut retourne le dernier élément enfant (ignorant les nœuds de texte et de commentaires).

Veuillez également consulter :

childNodes attribut

firstChild attribut

nextSibling attribut

previousSibling attribut

Attributs de nœud

parentNode attribut

nodeName attribut

nodeType attribut

nodeValue attribut

Les nœuds HTML et les éléments

Dans HTML DOMDans le (document object model), le document HTML est une collection de nœuds qui possèdent (ou non) des nœuds enfants.

NoeudSe réfère aux nœuds d'élément, aux nœuds de texte et aux nœuds de commentaires.

ÉlémentLes espaces entre eux sont également des nœuds de texte.

Les éléments ne sont que des nœuds d'élément.

Les nœuds enfants et les éléments enfants

childNodes RetourneNoeud enfant（nœuds d'élément, nœuds de texte et nœuds de commentaires）.

children RetourneEnfant（au lieu de nœuds de texte et de commentaires）.

firstChild et firstElementChild

firstChild Retourne le premierNoeud enfant（Noeud d'élément, noeud de texte ou noeud de commentaire）. Les espaces entre les éléments sont également des noeuds de texte.

firstElementChild Retourne le premierEnfant（Ne retourne pas les noeuds de texte et les noeuds de commentaire）.

lastChild et lastElementChild

lastChild Retourner le dernierNoeud enfant（Noeud d'élément, noeud de texte ou noeud de commentaire）. Les espaces entre les éléments sont également des noeuds de texte.

lastElementChild Retourner le dernierEnfant（Ne retourne pas les noeuds de texte et les noeuds de commentaire）.

Exemple

Exemple 1

Retourner le contenu HTML du dernier noeud enfant de l'élément <ul> :

document.getElementById("myList").lastChild.innerHTML;

Essayez-le vous-même

Exemple 2

Obtenir le texte du dernier noeud enfant de l'élément <select> :

let text = document.getElementById("mySelect").lastChild.text;

Essayez-le vous-même

Exemple 3

Cet exemple montre l'interférence des espaces, essayez de récupérer le nom du noeud de l'enfant dernier de "myDIV" :

<div id="myDIV">
  <p>Looks like first child</p>
  <p>Looks like last Child</p>
</div>
<script>
let text = document.getElementById("myDIV").lastChild.nodeName;
</script>

Essayez-le vous-même

Exemple 4

Cependant, si vous supprimez les espaces du code source, il n'y a pas de noeud #text dans "myDIV" :

<div id="myDIV"><p>First child</p><p>Last Child</p></div>
<script>
let text = document.getElementById("myDIV").lastChild.nodeName;
</script>

Essayez-le vous-même

Syntaxe

element.lastChild

ou

node.lastChild

Valeur de retour

Type Description
Noeud Dernier noeud enfant du noeud.
null S'il n'y a pas d'enfant.

Support du navigateur

element.lastChild C'est une caractéristique de DOM Level 1 (1998).

Tous les navigateurs le supportent complètement :

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support