Navegação HTML DOM do JavaScript

Através do HTML DOM, você pode usar as relações de nó para navegar na árvore de nós.

Nó DOM

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

  • Todo o documento é um nó de documento.
  • Cada elemento HTML é um nó de elemento.
  • O texto dentro do elemento HTML é um nó de texto.
  • Cada atributo 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 podem ser acessados pelo JavaScript.

Pode criar novos nós, bem como modificar e excluir todos os nós.

Relações de nós

Os nós na árvore de nós têm uma relação hierárquica.

  • Os termos (pai, filho e irmão, parent, child e sibling) são usados para descrever essas relações.
  • No nó da árvore, o nó superior é chamado de raiz (o nó raiz).
  • Cada nó tem um nó pai, exceto o raiz (o nó raiz não tem nó pai).
  • Os nós podem ter um número determinado de filhos.
  • Irmao (irmão ou irmã) se refere a nós que compartilham o mesmo pai.
<html>
   <head>
       <title>Manual DOM</title>
   </head>
  <body>
       <h1>Primeira Lição de DOM</h1>
       <p>Hello world!</p>
   </body>
</html>
Árvore DOM HTML

A partir do HTML acima, você pode ler a seguinte informação:

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

Ao mesmo tempo:

  • <head> tem um filho: <title>
  • <title> tem um filho (nó de texto): "DOM Tutorial"
  • <body> tem dois filhos: <h1> e <p>
  • <h1> tem um filho: "Primeira lição DOM"
  • <p> tem um filho: "Hello world!"
  • <h1> e <p> são irmãos

Navegação entre nós

Através do JavaScript, você pode usar os seguintes atributos de nó para navegar entre nós:

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

nó-irmão e valor do nó

Um erro comum no processamento DOM é acreditar que os nós de elemento contêm texto.

Exemplo:

<title id="demo">DOM Tutorial</title>

（no exemplo acima）nó de elemento <title> Não incluide texto.

Ele contém o texto "DOM Tutorial"Nó de texto.

O valor do nó de texto pode ser obtido através do nó innerHTML Para acessar as propriedades:

var myTitle = document.getElementById("demo").innerHTML;

Acesso ao atributo innerHTML é equivalente ao acesso ao primeiro nó-filho nodeValue:

var myTitle = document.getElementById("demo").firstChild.nodeValue;

Também pode ser acessado assim o primeiro nó-filho:

var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

Os três exemplos a seguir recuperam <h1> Texto do elemento e copiar para <p> Elemento dentro de:

Exemplo 1

<html>
<body>
<h1 id="id01">Minha primeira página</h1>
<p id="id02">Olá!</p>
<script>
 document.getElementById("id02").innerHTML  = document.getElementById("id01").innerHTML;
</script>
</body>
</html>

Experimente você mesmo

Exemplo 2

<html>
<body>
<h1 id="id01">Minha primeira página</h1>
<p id="id02">Olá!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>

Experimente você mesmo

Exemplo 3

<html>
<body>
<h1 id="id01">Minha primeira página</h1>
<p id="id02">Olá!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>

Experimente você mesmo

InnerHTML

Neste tutorial, usamos innerHTML Recupera o conteúdo do elemento HTML.

No entanto, aprender os outros métodos acima ajuda a entender a estrutura em árvore e a navegação do DOM.

Nó raiz do DOM

Existem duas propriedades especiais que permitem acessar o documento completo:

  • document.body - Corpo do documento
  • document.documentElement - Documento completo

Exemplo

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM é muito útil!</p>
<p>Desta vez, demonstramos a propriedade <b>document.body</b>.</p>
</div>
<script>
 alert(document.body.innerHTML);
</script>
</body>
</html>

Experimente você mesmo

Exemplo

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM é muito útil!</p>
<p>Desta vez, demonstramos a propriedade <b>document.documentElement</b>.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html>

Experimente você mesmo

Propriedade

nodeName define o nome do nó.

  • nodeName é apenas leitura
  • o nó de elemento é equivalente ao nome da tag
  • o nó de atributo é o nome do atributo
  • o nó de texto
  • O nó de documento

Exemplo

<h1 id="id01">Minha primeira página web</h1>
<p id="id02">Olá!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

Experimente você mesmo

Notas:nodeName sempre contém o nome da tag em maiúsculas do elemento HTML.

Propriedade

nodeValue define o valor do nó.

  • do nó de elemento é undefined
  • do nó de texto é o texto
  • o valor do nó

Propriedade

A propriedade retorna o tipo do nó.A propriedade é apenas leitura.

Exemplo

<h1 id="id01">Minha primeira página web</h1>
<p id="id02">Olá!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

Experimente você mesmo

A propriedade nodeType mais importante é:

Nó Tipo Exemplo
ELEMENT_NODE 1 <h1 class="heading">W3School</h1>
ATTRIBUTE_NODE 2 class = "heading" (descontinuado)
TEXT_NODE 3 W3School
COMMENT_NODE 8 <!-- Isso é um comentário -->
DOCUMENT_NODE 9 O documento HTML em si (<html> pai)
DOCUMENT_TYPE_NODE 10 <!Doctype html>

Type 2 foi descontinuado no HTML DOM. Não foi descontinuado no XML DOM.