HTML DOM propiedad firstChild
Ejemplo
Obtenga el contenido HTML del primer nodo secundario de un elemento <ul>:
var x = document.getElementById("myList").firstChild.innerHTML;
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La propiedad firstChild devuelve el primer nodo secundario del nodo especificado, como un objeto Node.
La diferencia entre esta propiedad y firstElementChild es que firstElementChild devuelve el primer nodo secundario como un nodo de elemento, un nodo de texto o un nodo de comentario (dependiendo de cuál sea el primero), mientras que firstElementChild devuelve el primer nodo secundario como un nodo de elemento (ignora texto y nodos de comentarios).
Nota: Los espacios en blanco dentro de los elementos se consideran como texto y el texto se considera como nodos (consulte "Más ejemplos").
Esta propiedad es de sólo lectura.
Sugerencia: use la propiedad del elemento .childNodes para devolver cualquier nodo secundario de un nodo específico. childNodes[0] producirá el mismo resultado que firstChild.
Sugerencia: para devolver el último nodo secundario de un nodo específico, use la propiedad lastChild .
Compatibilidad con navegador
| Property | |||||
|---|---|---|---|---|---|
| firstChild | Yes | Yes | Yes | Yes | Yes |
Sintaxis
node.firstChild
Detalles técnicos
| Valor devuelto: | Un objeto de nodo, que representa el primer elemento secundario de un nodo, o nulo si no hay nodos secundarios |
|---|---|
| Versión DOM | Objeto de nodo de nivel básico 1 |
Más ejemplos
Ejemplo
En este ejemplo, demostramos cómo los espacios en blanco pueden interferir con esta propiedad.
Obtenga el nombre de nodo del primer nodo secundario de un elemento <div>:
<!--
Whitespace inside elements is considered as text, and text is considered as nodes
In this example, there is whitespace before <p>, before <span> and after <span>
Therefore, the first child node of <div> is a #text node, and not the <p> element you expected
-->
<div id="myDIV">
<p>Looks like first child</p>
<span>Looks like last Child</span>
</div>
<script>
var x = document.getElementById("myDIV").firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>
Ejemplo
Sin embargo, si eliminamos los espacios en blanco de la fuente, no hay nodos #text en <div>, lo que hará que el elemento <p> sea el primer nodo secundario:
<div id="myDIV"><p>First child</p><span>Last Child</span></div>
<script>
var x = document.getElementById("myDIV").firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>
Ejemplo
Obtenga el texto del primer nodo secundario de un elemento <select>:
var x = document.getElementById("mySelect").firstChild.text;
páginas relacionadas
Referencia HTML DOM: nodo. propiedad lastChild
Referencia HTML DOM: nodo. propiedad childNodes
Referencia HTML DOM: nodo. propiedad parentNode
Referencia HTML DOM: nodo. nextPropiedad entre hermanos
Referencia HTML DOM: nodo. anteriorPropiedad de hermanos
Referencia HTML DOM: nodo. Propiedad nodeName