tutoriais mais recente desenvolvimento web
 

JavaScript HTML DOM Navigation

❮ Anterior Próxima Capítulo ❯

Com o HTML DOM, você pode navegar pela árvore de nós usando relações de nó.

DOM Nodes

De acordo com o padrão W3C HTML DOM, tudo em um documento HTML é um nó:

  • O documento inteiro é um nó de documento
  • Cada elemento HTML é um nó de elemento
  • O texto dentro elementos HTML são nós de texto
  • Todos os atributos HTML é um nó de atributo
  • Todos os comentários são nós de comentário
árvore DOM HTML

Com o HTML DOM, todos os nós na árvore de nós pode ser acessado por JavaScript.

Novos nós podem ser criados, e todos os nós pode ser modificado ou excluído.

Relações nó

Os nós na árvore de nós tem uma relação hierárquica entre si.

Os termos pai, filho e irmão são usados ​​para descrever as relações.

  • Em uma árvore de nós, o nó superior é chamado de raiz (ou nó raiz)
  • Cada nó tem exactamente um dos pais, excepto a raiz (que não tem nenhum pai)
  • Um nó pode ter um número de crianças
  • Irmãos (irmãos ou irmãs) são os nós com o mesmo pai
<html>

  <head>
      <title>DOM Tutorial</title>
  </head>

  <body>
      <h1>DOM Lesson one</h1>
      <p>Hello world!</p>
  </body>

</html>
árvore de nós

A partir do HTML acima, você pode ler-se:

  • <html> é o nó raiz
  • <html> não tem pais
  • <html> é o pai de <head> e <body>
  • <head> é o primeiro filho de <html>
  • <body> é o último filho do <html>

e:

  • <head> tem um filho: <title>
  • <title> tem um filho (um nó de texto): "DOM Tutorial"
  • <body> tem dois filhos: <h1> e <p>
  • <h1> tem um filho: "Lição DOM one"
  • <p> tem um filho: "Olá, mundo!"
  • <h1> e <p> são irmãos

Navegando entre nós

Você pode usar as seguintes propriedades do nó para navegar entre nós com JavaScript:

  • parentNode
  • childNodes[ nodenumber ]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Atenção !

Um erro comum no processamento DOM é esperar um nó de elemento para conter texto.

Neste exemplo:<title> DOM Tutorial </title> , o nó de elemento <title> não contém texto.Ele contém umnó de textocom o valor "DOM Tutorial".

O valor do nó texto pode ser acessado pelo nó innerHTML propriedade ou o nodeValue .

Child nós e valores Nó

Além do innerHTML propriedade, você também pode usar os childNodes e nodeValue propriedades para obter o conteúdo de um elemento.

O exemplo a seguir recolhe o valor do nó de um <h1> elemento e copiá-lo para um <p> elemento:

Exemplo

<html>
<body>

<h1 id="intro">My First Page</h1>

<p id="demo">Hello!</p>

<script>
var myText = document.getElementById("intro").childNodes[0].nodeValue;
document.getElementById("demo").innerHTML = myText;
</script>

</body>
</html>
Tente você mesmo "

No exemplo acima, getElementById é um método, enquanto childNodes e nodeValue são propriedades.

Neste tutorial vamos usar o innerHTML propriedade. No entanto, aprender o método acima é útil para a compreensão da estrutura da árvore e a navegação do DOM.

Usando o firstChild propriedade é o mesmo que usar childNodes[0] :

Exemplo

<html>
<body>

<h1 id="intro">My First Page</h1>

<p id="demo">Hello World!</p>

<script>
myText = document.getElementById("intro").firstChild.nodeValue;
document.getElementById("demo").innerHTML = myText;
</script>

</body>
</html>
Tente você mesmo "

Nós raiz DOM

Há duas propriedades especiais que permitem o acesso ao documento completo:

  • document.body - O corpo do documento
  • document.documentElement - O documento completo

Exemplo

<html>
<body>

<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.body</b> property.</p>
</div>

<script>
alert(document.body.innerHTML);
</script>

</body>
</html>
Tente você mesmo "

Exemplo

<html>
<body>

<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.documentElement</b> property.</p>
</div>

<script>
alert(document.documentElement.innerHTML);
</script>

</body>
</html>
Tente você mesmo "

O nodeName Property

O nodeName propriedade especifica o nome de um nó.

  • nodeName é somente leitura
  • nodeName de um nó de elemento é o mesmo que o nome da marca
  • nodeName de um nó de atributo é o nome do atributo
  • nodeName de um nó de texto é sempre #text
  • nodeName do nó do documento é sempre #document

Nota: nodeName sempre contém o nome da marca maiúscula de um elemento HTML.

O nodeValue Property

O nodeValue propriedade especifica o valor de um nó.

  • nodeValue para nós de elemento é indefinido
  • nodeValue para nós de texto é o texto em si
  • nodeValue para nós de atributo é o valor do atributo

O nodeType Property

O nodeType propriedade retorna o tipo de nó. nodeType é somente leitura.

Os tipos de nó mais importantes são:

tipo de elemento NodeType
Element 1
Attribute 2
Text 3
Comment 8
Document 9

❮ Anterior Próxima Capítulo ❯