Exemplo
Obter o conteúdo HTML do primeiro nó filho de um <ul> elemento:
var x = document.getElementById("myList").firstChild.innerHTML;
O resultado x será:
Coffee
Tente você mesmo " Mais "Try it Yourself" exemplos 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 firstChild retorna o primeiro nó filho como um nó de elemento, um nó de texto ou um nó comentário (depending on which one's first) , enquanto firstElementChild retorna o primeiro nó filho como um nó de elemento (ignores text and comment nodes) .
Nota: Espaços em branco dentro elementos é considerada como texto, eo texto é considerado como nós (See "More Examples") .
Esta propriedade é somente leitura.
Dica: Use o .childNodes elemento propriedade para retornar qualquer nó filho de um nó especificado. childNodes [0] irá produzir o mesmo resultado que firstChild.
Dica: Para retornar o último nó filho de um nó especificado, use o lastChild propriedade.
Suporte navegador
Propriedade | |||||
---|---|---|---|---|---|
firstChild | sim | sim | sim | sim | sim |
Sintaxe
node .firstChild
Detalhes técnicos
Valor de retorno: | Um objeto Node, o que representa o primeiro filho de um nó, ou null se não houver nós filhos |
---|---|
DOM Versão | Núcleo Nível Objeto 1 Node |
mais Exemplos
Exemplo
Neste exemplo, demonstramos como espaços em branco podem interfare com esta propriedade.
Obter o nome do nó do primeiro nó filho de um <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>
O resultado x será:
#text
Tente você mesmo " Exemplo
No entanto, se remover o espaço em branco a partir da fonte, não há nós de #text em <div>, o que tornará o <p> elemento 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>
O resultado x será:
P
Tente você mesmo " Exemplo
Obter o texto do primeiro nó filho de um <select> elemento:
var x = document.getElementById("mySelect").firstChild.text;
O resultado x será:
Audi
Tente você mesmo " Páginas relacionadas
HTML DOM referência: nó. lastChild propriedade
HTML DOM referência: nó. childNodes propriedade
HTML DOM referência: nó. parentNode propriedade
HTML DOM referência: nó. nextSibling propriedade
HTML DOM referência: nó. previousSibling propriedade
HTML DOM referência: nó. nodeName propriedade