Tutorial básico do JavaScript

Objeto do JavaScript

Função do JavaScript

HTML DOM do JS

BOM do navegador JS

Tutorial básico do AJAX

Manual de referência do JavaScript

Modelo de Objetos de Janela JS JS DOM altera atributos do elemento

Navegação JS DOM

O HTML DOM permite que o JavaScript navegue pelo nó de árvore usando relações de nós.

Nós da DOM

De acordo com W3Padrão C HTML DOM, todo o conteúdo do 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 (não recomendado para usar)
Todas as anotações são nós de anotação

Usando o HTML DOM, todos os nós no nó de árvore podem ser acessados pelo JavaScript.

Novos nós podem ser criados e todos os nós podem ser modificados ou excluídos.

Relações de nós

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

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

No nó de árvore, o nó superior é chamado de raiz (ou nó raiz)
Cada nó tem apenas um nó pai, exceto o nó raiz (o nó raiz não tem nó pai)
Um nó pode ter vários nós filhos
Irmãos (irmãos) são nós que compartilham o mesmo nó pai

Exemplo

<html>
　　<head>
<title>Tutorial do DOM</title>
　　</head>
　　
<h1>Nós da DOM</h1>
<p>Hello,　World</p>
　　
</html>

A partir do HTML acima, você pode ler:
<html>是根节点，并且没有父节点
<html>是<head>和<body>的父级
<head>是<html>的第一个孩子
<body>是<html>的最后一个孩子
和：
<head>有一个孩子：<title>
<title>有一个孩子（一个文本节点）：“ DOM Tutorial”
<body>有两个孩子：<h1>和<p>
<h1>有一个孩子（一个文本节点）：“ DOM Nodes”
<p>有一个孩子（一个文本节点）：“ Hello，world”
<h1>和<p>是同级

在节点之间导航

您可以使用以下节点属性在具有JavaScript的节点之间导航：

parentNode

childNodes[nodenumber]

访问子节点

Você pode usarfirstChild使用DOM节点的属性来访问节点的第一个直接子节点。

Exemplo

<p id="para">
　　<span>First span</span>
　　<b>First Bold</b>
</p>
<script>
var para = document.getElementById("para");
alert(para.firstElementChild.nodeName);　//　returns SPAN
</script>

测试看看 ‹/›

注意：在上面的示例中，输出将是#text，因为插入了文本节点以维护标记之间的空白。任何空格都会创建一个#text节点，从单个空格到多个空格，返回，制表符等。

但是，如果删除空格，则不会插入#text节点，并且span元素将成为段落的第一个子元素：

Exemplo

<p id="para"><span>First span</span>  <b>First Bold</b></p>
<script>
var para = document.getElementById("para");
alert(para.firstChild.nodeName);　//　returns SPAN
</script>

Teste e veja‹/›

访问第一个孩子也可以这样进行：

Exemplo

para.childNodes[0].nodeName;　//　returns SPAN

Teste e veja‹/›

Você pode usarlastChild使用DOM节点的属性来访问节点的最后一个直接子节点。

Exemplo

para.lastChild.nodeName;　//　returns B

Teste e veja‹/›

为了避免出现#textou#commentNófirstChildelastChild返回该问题，您可以选择使用：

firstElementChild属性返回指定父元素的第一个子元素。

Exemplo

<p id="para">
　　<span>First span</span>
　　<b>First Bold</b>
</p>
<script>
var para = document.getElementById("para");
alert(para.firstElementChild.nodeName);　//　returns SPAN
</script>

Teste e veja‹/›

lastElementChild属性返回指定父元素的最后一个子元素。

Exemplo

<p id="para">
　　<span>First span</span>
　　<b>First Bold</b>
</p>
<script>
var para = document.getElementById("para");
alert(para.lastElementChild.nodeName);　//　returns B
</script>

Teste e veja‹/›

Obs:NotnodeNameÉ uma propriedade de leitura apenas, que retorna o nome do nó como uma string.

Acessar nó pai

Você pode usarparentNodeA propriedade permite acessar o pai do nó especificado na árvore DOM.

Exemplo

<div>
　　　<p>This is first P inside DIV</p>
　　　<p id="para">This is second P inside DIV</p>
　　　<p>This is third P inside DIV</p>
</div>
<script>
var para = document.getElementById("para");
alert(para.parentNode.nodeName);　　//　returns DIV
</script>

Teste e veja‹/›

Você também pode usarparentElementA propriedade retorna o elemento pai do elemento especificado.

para acessar os nós irmãos

Você pode usarpreviousSiblingenextSiblingA propriedade permite acessar o nó anterior e seguinte na árvore DOM.

Exemplo

<div id="div-1">Here is div-1</div>
<div id="div-2">Here is div-2</div>
<div id="div-3">Here is div-3</div>
<script>
var x = document.querySelector("#div-2");
alert(x.previousSibling.nodeName);
alert(x.nextSibling.nodeName);
</script>

Teste e veja‹/›

Ou, você pode usarpreviousElementSiblingenextElementSiblingpara pular qualquer nó de texto em branco e obter o elemento同级 anterior e seguinte.

Exemplo

<div id="div-1">Here is div-1</div>
<div id="div-2">Here is div-2</div>
<div id="div-3">Here is div-3</div>
<script>
var x = document.querySelector("#div-2");
alert(x.previousElementSibling.textContent);
alert(x.nextElementSibling.textContent);
</script>

Teste e veja‹/›

textContentA propriedade representa o conteúdo textual do nó.

Nó raiz do DOM

As duas propriedades a seguir permitem acessar todo o documento:

document.bodyA propriedade define ou retorna o elemento do documento.

Exemplo

<!DOCTYPE html>
<html>
<p>Hello, World!</p>
<div>
　　<p>Nó raiz do DOM</p>
　　<p>A propriedade "document.body" define ou retorna o elemento "body" do documento.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</html>

Teste e veja‹/›

document.documentElementA propriedade retorna o documento do<html>Elemento.

Exemplo

<!DOCTYPE html>
<html>
<p>Hello, World!</p>
<div>
　　<p>Nó raiz do DOM</p>
　　<p>A propriedade "document.documentElement" retorna o elemento raiz do documento.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</html>

Teste e veja‹/›

Propriedade nodeType

nodeTypeA propriedade nodeType retorna o tipo de nó especificado em forma numérica.

Exemplo

var x = document.getElementById("myPara").nodeType;

Teste e veja‹/›

A árvore DOM é composta por diferentes tipos de nós, por exemplo, elementos, texto, comentários, etc.

Cada nó tem umnodeTypeAtributos, que podem ser usados para encontrar os tipos de nó a serem tratados.

A tabela a seguir lista os tipos de nó mais importantes:

Nó	Tipo	Exemplo
ELEMENT_NODE	1um	<p class="heading">Olá, Mundo</p>
ATTRIBUTE_NODE	2	class =“heading”（não recomendado usar)
TEXT_NODE	3	Olá, Mundo
COMMENT_NODE	8	<!--Este é um comentário-->
DOCUMENT_NODE	9	O documento HTML em si (o pai do <html>)
DOCUMENT_TYPE_NODE	10	<!doctype html>

Modelo de Objetos de Janela JS JS DOM altera atributos do elemento