propiedad HTML DOM Element lastChild

definición y uso

lastChild propiedad devuelve el último nodo hijo del nodo especificado como objeto Node.

lastChild la propiedad es de solo lectura.

nota

lastChild se devuelve estos nodos hijos: nodos de elemento, nodos de texto o nodos de comentario.

los espacios en blanco entre los elementos también son nodos de texto.

solución alternativa:

propiedad lastElementChild - lastElementChild propiedad devuelve el último elemento hijo (ignora nodos de texto y comentarios).

por favor, consulte:

propiedad childNodes

propiedad firstChild

propiedad nextSibling

propiedad previousSibling

propiedades de nodo

propiedad parentNode

propiedad nodeName

propiedad nodeType

propiedad nodeValue

nodo HTML y elemento

en HTML DOM（文档对象模型）中，HTML 文档是拥有（或没有）子节点的节点集合。

Nodose refiere a nodos de elemento, nodos de texto y nodos de comentario.

elementoentre los espacios en blanco también son nodos de texto.

mientras que el elemento es solo un nodo de elemento.

nodo hijo y elemento hijo

childNodes devuelveHijo del nodo（元素节点、文本节点和注释节点）。

children devuelveElemento hijo（而非文本和注释节点）。

firstChild y firstElementChild

firstChild devuelve el primeroHijo del nodo（nodo de elemento, de texto o de comentario）. Los espacios en blanco entre elementos también son nodos de texto.

firstElementChild devuelve el primeroElemento hijo（No devuelve nodos de texto ni de comentario）.

lastChild y lastElementChild

lastChild Devuelve el últimoHijo del nodo（nodo de elemento, de texto o de comentario）. Los espacios en blanco entre elementos también son nodos de texto.

lastElementChild Devuelve el últimoElemento hijo（No devuelve nodos de texto ni de comentario）.

Ejemplo

Ejemplo 1

Devuelve el contenido HTML del último hijo del elemento <ul>:

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

Prueba por ti mismo

Ejemplo 2

Obtener el texto del último hijo del elemento <select>:

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

Prueba por ti mismo

Ejemplo 3

Este ejemplo muestra la interferencia de los espacios en blanco, intenta obtener el nombre del nodo del último hijo de "myDIV":

<div id="myDIV">
  <p>Se parece al primer hijo</p>
  <p>Se parece al último hijo</p>
</div>
<script>
let text = document.getElementById("myDIV").lastChild.nodeName;
</script>

Prueba por ti mismo

Ejemplo 4

Sin embargo, si eliminas los espacios en blanco del código fuente, no hay nodo #text en "myDIV":

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

Prueba por ti mismo

Sintaxis

element.lastChild

o

node.lastChild

Valor devuelto

Tipo Descripción
Nodo El último hijo del nodo.
null Si no hay hijos.

Compatibilidad del navegador

element.lastChild Es una característica de DOM Level 1 (1998).

Se admite en todos los navegadores:

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