Ejemplo
Obtener el contenido HTML del primer nodo hijo de un <ul> elemento:
var x = document.getElementById("myList").firstChild.innerHTML;El resultado de x será:
Coffee Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
La propiedad firstChild devuelve el primer nodo hijo del nodo especificado, como un objeto Node.
La diferencia entre esta propiedad y firstElementChild , es que firstChild devuelve el primer nodo hijo como un nodo de elemento, un nodo de texto o un nodo de comentario (depending on which one's first) , mientras que firstElementChild devuelve el primer nodo hijo como un nodo de elemento (ignores text and comment nodes) .
Nota: El espacio en blanco en el interior de elementos es considerado como texto, y el texto se considera como nodos (See "More Examples") .
Esta propiedad es de solo lectura.
Consejo: Utilice la .childNodes elemento propiedad para devolver cualquier nodo hijo de un nodo especificado. childNodes [0] producirán el mismo resultado que firstChild.
Sugerencia: Para volver al último nodo hijo de un nodo especificado, utilice el lastChild propiedad.
Soporte del navegador
| Propiedad | |||||
|---|---|---|---|---|---|
| firstChild | Sí | Sí | Sí | Sí | Sí |
Sintaxis
node .firstChildDetalles técnicos
| Valor de retorno: | Un objeto de nodo, que representa el primer hijo de un nodo, o null si no hay nodos secundarios |
|---|---|
| Versión DOM | Nivel básico de objetos 1 Nodo |
Más ejemplos
Ejemplo
En este ejemplo, se demuestra cómo los espacios en blanco puede interfare con esta propiedad.
Recibe el nombre de nodo del primer nodo hijo de un <div> elemento:
<!--
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>El resultado de x será:
#text Inténtalo tú mismo " Ejemplo
Sin embargo, si eliminamos el espacio en blanco de la fuente, no hay ningún nodo en #text <div>, que hará que el <p> elemento del primer nodo hijo:
<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>El resultado de x será:
P Inténtalo tú mismo " Ejemplo
Obtener el texto del primer nodo hijo de un <select> elemento:
var x = document.getElementById("mySelect").firstChild.text;El resultado de x será:
Audi Inténtalo tú mismo " Páginas relacionadas
Referencia HTML DOM: nodo. lastChild propiedad
Referencia HTML DOM: nodo. childNodes propiedad
Referencia HTML DOM: nodo. parentNode propiedad
Referencia HTML DOM: nodo. nextSibling propiedad
Referencia HTML DOM: nodo. previousSibling propiedad
Referencia HTML DOM: nodo. nombreNodo propiedad