Propriedade HTML DOM firstChild
Exemplo
Obtenha o conteúdo HTML do primeiro nó filho de um elemento <ul>:
var x = document.getElementById("myList").firstChild.innerHTML;
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A propriedade firstChild retorna o primeiro nó filho do nó especificado, como um objeto Node.
A diferença entre esta propriedade e firstElementChild , é que firstElementChild retorna o primeiro nó filho como um nó de elemento, um nó de texto ou um nó de comentário (dependendo de qual é o primeiro), enquanto firstElementChild retorna o primeiro nó filho como um nó de elemento (ignora texto e nós de comentário).
Nota: O espaço em branco dentro dos elementos é considerado como texto e o texto é considerado como nós (consulte "Mais exemplos").
Esta propriedade é somente leitura.
Dica: Use a propriedade .childNodes do elemento para retornar qualquer nó filho de um nó especificado. childNodes[0] produzirá o mesmo resultado que firstChild.
Dica: Para retornar o último nó filho de um nó especificado, use a propriedade lastChild .
Suporte ao navegador
| Property | |||||
|---|---|---|---|---|---|
| firstChild | Yes | Yes | Yes | Yes | Yes |
Sintaxe
node.firstChild
Detalhes técnicos
| Valor de retorno: | Um objeto Node, representando o primeiro filho de um nó, ou null se não houver nós filhos |
|---|---|
| Versão DOM | Objeto de nó de nível 1 principal |
Mais exemplos
Exemplo
Neste exemplo, demonstramos como o espaço em branco pode interferir nessa propriedade.
Obtenha o nome do nó do primeiro nó filho de um 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>
Exemplo
No entanto, se removermos o espaço em branco da fonte, não haverá nós #text em <div>, o que tornará o elemento <p> o primeiro nó filho:
<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>
Exemplo
Obtenha o texto do primeiro nó filho de um elemento <select>:
var x = document.getElementById("mySelect").firstChild.text;
Páginas relacionadas
Referência HTML DOM: node. propriedade lastChild
Referência HTML DOM: node. propriedade childNodes
Referência HTML DOM: node. Propriedade parentNode
Referência HTML DOM: node. próximoPropriedade de irmãos
Referência HTML DOM: node. anteriorPropriedade do irmão
Referência HTML DOM: node. propriedade nodeName