tutoriais mais recente desenvolvimento web
 

HTML DOM firstChild Propery

<Elemento de objeto

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

Exemplos

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


<Elemento de objeto