Carregando...

O DOM HTML

O ficheiro HTML no disco guarda só caracteres. O navegador constrói a partir dele uma árvore viva, e essa árvore é o DOM. No vidro da paragem há duas linhas: o título Market e a nota Stand clear. A página aberta já traz document. new document() lança um erro, e new Document() é um documento vazio, não este painel.

Uma árvore, não um arredondamento

Na página do objeto Math pedias um número a um objeto partilhado. Aqui não se arredonda uma largura nem se constrói um instante com new Date. Desces a partir de document: o elemento html, depois head ao lado de body, depois o título ao lado da nota. Escolher elementos por mais de um caminho, mudar a marcação e criar nós fica para depois. Esta página aprende a forma e lê dois nós.

Onde está cada peça

Cada linha é um sítio para onde podes apontar. A última coluna é a confusão que te manda para outro sítio.

📊 Lugares neste painel

Lugar O que tens na mão Neste painel Fácil de trocar
document a árvore em si a entrada, sem nome de etiqueta tomá-la por body
document.documentElement o elemento html etiqueta HTML chamar-lhe o título
document.head o elemento head irmão de body procurar Market aqui
document.body o elemento body pai do título um nó de texto
h1#stop o elemento do título texto Market o ficheiro gravado no disco
texto dentro do título só caracteres a palavra Market um elemento com id

O título e a nota são filhos elemento de body, por isso são irmãos. A palavra Market não é irmã da nota. É texto dentro do título. tagName volta em maiúsculas, logo o elemento html diz HTML. O nó document não tem etiqueta nem elemento pai.

Três nomes no cimo da árvore

Estas três propriedades nomeiam os elementos de fora. Nenhuma é o título no vidro.

Elementos de fora

javascript 
console.log(document.documentElement.tagName);
console.log(document.head.tagName);
console.log(document.body.tagName);

As três linhas são HTML, HEAD e BODY. Head e body são ambos filhos do elemento html, por isso são irmãos. Market não está no head. O título do separador no head é outra cadeia, diferente do título no vidro.

A família do título

O id stop é a pega do elemento do título. O elemento pai é body. O irmão elemento seguinte é a nota.

Pai e irmão

javascript 
let stop = document.getElementById("stop");
console.log(stop.parentElement.tagName);
console.log(stop.nextElementSibling.id);

A primeira linha é BODY. A segunda é note. nextElementSibling salta a quebra de linha e cai no parágrafo. O irmão elemento anterior é null, porque nenhum elemento está antes do título dentro de body.

A palavra e a pega

Ler o elemento não é ler os caracteres.

Texto e id

javascript 
let stop = document.getElementById("stop");
console.log(stop.textContent);
console.log(stop.id);

A primeira linha é Market. A segunda é stop. textContent são os caracteres. id é a pega. A nota diz Stand clear, e essa cadeia não está no título.

Primeiro elementos, depois cada nó

children conta só filhos elemento. childNodes conta também nós de texto, incluindo as quebras de linha do ficheiro do painel. Corre isto num body que só tenha o título e a nota, não nesta página da lição e não no ficheiro de leitura em baixo.

Dois comprimentos

javascript 
console.log(document.body.children.length);
console.log(document.body.childNodes.length);

Com uma quebra antes do título, outra entre os dois elementos e outra depois da nota, children.length é 2 e childNodes.length é 5. Os três nós a mais são texto e só têm espaço. Se colares as duas etiquetas numa linha, esses nós de texto desaparecem e os dois comprimentos encontram-se.

Um nome que não está no painel

Pede um id que o ficheiro nunca escreveu.

Id em falta

javascript 
console.log(document.getElementById("platform"));
console.log(document.getElementById("stop") === null);

A primeira linha é null. A segunda é false, porque stop existe. null quer dizer nenhum elemento, não um título vazio. Atribuir uma cadeia nova a textContent muda a árvore viva no navegador. O ficheiro HTML no disco continua a dizer Market.

Uma linha na página

Um terceiro parágrafo mostra a etiqueta do pai e o texto do título. O script fica no fim de body, depois de esses elementos existirem.

Pai e título

html 
<!DOCTYPE html>
<html>
<head>
<title>dom — page</title>
</head>
<body>
<h1 id="stop">Market</h1>
<p id="note">Stand clear</p>
<p id="board">…</p>
<script>
let stop = document.getElementById("stop");
let board = document.getElementById("board");
board.textContent = stop.parentElement.tagName + " / " + stop.textContent;
</script>
</body>
</html>

O parágrafo lê BODY / Market. Neste ficheiro há três elementos em body antes do script, por isso o comprimento 2 não lhe pertence. O elemento script é outro filho. A página seguinte escolhe elementos por mais de um caminho.

Confere o painel

  1. Mostra os três nomes de etiqueta exteriores e espera HTML, depois HEAD, depois BODY
  2. Mostra a etiqueta pai do título e espera BODY
  3. Mostra o id do irmão elemento seguinte e espera note
  4. Mostra o texto do título e espera Market, depois o id e espera stop
  5. No painel de dois elementos, espera comprimento de children 2 e de childNodes 5
  6. Mostra o id em falta e espera null, depois a comparação com stop e espera false
  7. Lê o parágrafo e espera BODY / Market

Sítio errado

A página abre. O sítio que nomeaste não é o do título.

  • Chamar new document() ou ler new Document() como se fosse este painel
  • Procurar Market em document.head
  • Tratar a palavra Market como irmão elemento da nota
  • Ler children.length quando querias cada nó, incluindo quebras de linha
  • Ler childNodes.length quando só querias o título e a nota
  • Ler null de um id em falta como uma cadeia vazia
  • Esperar que escrever em textContent mude o ficheiro no disco

Não mistures

  • document é a árvore; documentElement é o elemento html
  • head e body são irmãos sob esse elemento html
  • O pai do título é body; o irmão elemento seguinte é a nota
  • textContent são os caracteres; id é a pega
  • children são só elementos; childNodes inclui o texto em branco
  • Um id em falta é null; o ficheiro gravado não é a árvore viva
  • A página seguinte escolhe elementos por mais de um id

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
8
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 44 de 44
Javascript Tutorial