DOM "Modelo de Objeto de Documento"

DOM é a interface para JS operar páginas da web, e seu nome completo é "Document Object Model". Sua função é converter a página web em um objeto JS, para que diversas operações (como adicionar e excluir conteúdo) possam ser realizadas por meio de scripts.

• Documentação

–O documento representa todo o documento da página HTML da web

• Objeto

– A representação de objeto converte cada parte da página da web em um objeto.

• Modelo

– Usar modelos para representar as relações entre objetos, para que possamos obter objetos facilmente

O Document Object Model (DOM) é a interface de programação para páginas da web. Ele fornece uma representação estruturada do documento (árvore de estrutura) e define uma forma como os programas podem acessar a árvore de estrutura para alterar a estrutura, o estilo e o conteúdo do documento.

O DOM fornece uma representação de um documento como um grupo estruturado de nós e objetos contendo propriedades e métodos . Essencialmente, ele conecta uma página da web a um script ou linguagem de programação.

Para alterar algo na página, JS precisa obter acesso a todos os elementos da página. Esta entrada, juntamente com os métodos e propriedades para adicionar, mover, alterar ou remover elementos HTML, é obtida através do DOM.

O navegador analisará documentos estruturados (como HTML e XML) em uma série de nós baseados no modelo DOM e, em seguida, formará uma estrutura de árvore (Árvore DOM) a partir desses nós. Todos os nós e a estrutura em árvore final possuem interfaces externas padronizadas. Portanto, DOM pode ser entendido como a interface de programação de uma página web . O DOM possui seu próprio padrão internacional. As versões comuns atuais são DOM 3 e DOM 4.

A rigor, o DOM não pertence ao JS, mas a manipulação do DOM é a tarefa mais comum do JS, e o JS também é a linguagem mais comumente usada para a manipulação do DOM. DOM é uma API fornecida por fabricantes de navegadores para JS operar HTML. Diferentes fabricantes de navegadores podem fornecer APIs diferentes, portanto, há problemas de compatibilidade com o DOM (um pequeno número deles).

1. Nível do nó

Qualquer documento HTML ou XML pode ser representado pelo DOM como uma estrutura hierárquica composta por nós. Existem muitos tipos de nós. Cada tipo corresponde a diferentes informações e/ou tags no documento. Ele também possui características, dados e métodos próprios e tem algum relacionamento com outros tipos. Esses relacionamentos formam uma hierarquia que permite que a marcação seja representada como uma estrutura de árvore enraizada em um nó específico. Tome o seguinte HTML como exemplo:

<html>
<head>
  <title>Sample Page</title>
</head>
<body>
  <p>Hello World!</p>
</body>
</html>

Dentre eles, o nó do documento representa o nó raiz de cada documento. Aqui, o único nó filho do nó raiz é o elemento <html>, que chamamos de elemento document (documentElement). O elemento do documento é o elemento mais externo do documento, dentro do qual existem todos os outros elementos. Só pode haver um elemento de documento por documento. Nas páginas HTML, o elemento document é sempre o elemento <html>. Em um documento XML, não existem tais elementos predefinidos e qualquer elemento pode se tornar um elemento de documento. Cada tag em HTML pode ser representada como um nó nesta estrutura em árvore. Os nós de elemento representam elementos HTML, os nós de atributo representam atributos, os nós de tipo de documento representam tipos de documento e os nós de comentário representam comentários. Há um total de 12 tipos de nós no DOM, e todos esses tipos herdam um tipo básico.

1.2.Nó

A menor unidade do DOM é chamada node . A estrutura em árvore do documento (árvore DOM) é composta por vários tipos de nós. Cada nó pode ser visto como uma folha da árvore do documento.

Existem sete tipos de nós: Document, DocumentType, Element, Text, Comment e DocumentFragment.

Nós comumente usados

nó de documento

Todo o objeto de documento do documento HTML existe como uma propriedade do objeto de janela e podemos usá-lo diretamente, sem obtê-lo.

Nó do elemento (elemento)

Tags HTML em documentos HTML.

Nó de atributo

Os atributos do elemento representam cada atributo na tag. Deve-se notar aqui que o nó do atributo não é um nó filho do nó do elemento, mas uma parte do nó do elemento.

Nó de texto (Texto)

Conteúdo de texto em tags HTML.
Outros nós

Tipo de documento

tag doctype (por exemplo <!DOCTYPE html>).

Comente

Comente

Fragmento de Documento

fragmento de documento

Esses sete tipos de nós são todos objetos derivados do objeto de nó fornecido nativamente pelo navegador (objeto de nó a ser discutido abaixo) e possuem alguns atributos e métodos comuns.

1.3.Árvore de nós

Todos os nós de um documento podem ser abstraídos em uma estrutura em árvore de acordo com seu nível. Essa estrutura em árvore é o DOM.

O nó de nível superior é documento nó que representa todo o documento. A tag HTML mais alta no documento geralmente <html>constitui o nó raiz da estrutura em árvore, e outros nós de tags HTML são seus subordinados.

Exceto o nó raiz, outros nós possuem três relacionamentos com os nós adjacentes.

Relacionamento do nó pai (parentNode): o nó superior direto.
Relacionamento do nó filho (childNode): nó subordinado direto.
Relacionamento de nó irmão (irmão): nós com o mesmo nó pai.

DOM fornece uma interface de operação para obter nós de três relacionamentos. Entre eles, a interface do nó filho inclui atributos como firstChild(primeiro nó filho) e lastChild(último nó filho), e a interface do nó irmão inclui atributos nextSibling(o nó irmão imediatamente depois) e previousSibling(o nó irmão imediatamente antes).

2. Tipo de nó

O DOM Nível 1 descreve uma interface chamada Node, que deve ser implementada por todos os tipos de nós DOM. A interface Node é implementada em JavaScript como o tipo Node, que pode ser acessado diretamente em todos os navegadores, exceto IE. Em JavaScript, todos os tipos de nós herdam do tipo Node, portanto, todos os tipos compartilham as mesmas propriedades e métodos básicos.

2.1. Propriedades

2.1.1.nodeType

O atributo nodeType retorna um valor inteiro indicando o tipo de nó. Os tipos de nós comuns são os seguintes

Tipo de nó	valor	Constante correspondente
nó de documento	9	Nó.DOCUMENT_NODE
nó de elemento	1	Nó.ELEMENT_NODE
Nó de atributo (attr)	2	Nó.ATTRIBUTE_NODE
Nó de texto (texto)	3	Nó.TEXT_NODE
Nó de tipo de documento (DocumentType)	10	Nó.DOCUMENT_TYPE_NODE
Nó de comentário (comentário)	8	Nó.COMMENT_NODE
Nó Fragmento de Documento (DocumentFragment)	11	Nó.DOCUMENT_FRAGMENT_NODE

<script>
  console.log(document.nodeType); //9
</script>

2.1.2.nodeName

A propriedade nodeName retorna o nome do nó

<div id="d1">hello world</div>
<script>
  var div = document.getElementById('d1');
  console.log(div.nodeName); //DIV
</script>

2.1.3.nodeValue

O atributo nodeValue retorna uma string representando o valor de texto do próprio nó atual. Este atributo é legível e gravável. Somente nós de texto (texto), nós de comentário (comment) e nós de atributo (attr) possuem valores de texto.

<div id="d1">hello world</div>
<script>
  var div = document.getElementById('d1');
  console.log(div.nodeValue); // null
  // 读
  console.log(div.firstChild.nodeValue); //hello world
  // 写
  div.firstChild.nodeValue = '123';
</script>

2.1.4.textContent

A propriedade textContent retorna o conteúdo de texto do nó atual e todos os seus nós descendentes.

<div id="d1">Hello <span>JavaScript</span> DOM</div>
<script>
  var div = document.getElementById('d1');
  console.log(div.textContent); //Hello JavaScript DOM
</script>

2.1.5.próximoIrmão

A propriedade nextSibling retorna o primeiro nó irmão imediatamente após o nó atual. Se não houver nenhum nó irmão atrás do nó atual, retorne nulo

( Nota : você pode obter nós de texto como "espaço" ou "retorno de carro")

<div id="d1">hello</div><div id="d2">world</div>
<script>
  var div1 = document.getElementById('d1');
  var div2 = document.getElementById('d2');
  console.log(div1.nextSibling); //<div id="d2">world</div>
  console.log(div1.nextSibling === div2); // true
</script>

2.1.6.irmão anterior

A propriedade previousSibling retorna o nó irmão mais próximo na frente do nó atual. Se não houver nenhum nó irmão na frente do nó atual, retorne nulo

<div id="d1">hello</div><div id="d2">world</div>
<script>
  var div1 = document.getElementById('d1');
  var div2 = document.getElementById('d2');
  console.log(div2.previousSibling); //<div id="d1">hello</div>
  console.log(div2.previousSibling === div1); // true
</script>

2.1.7.parentNode

A propriedade parentNode retorna o nó pai do nó atual. Para um nó, seu nó pai só pode ser de três tipos: nó de elemento (elemento), nó de documento (documento) e nó de fragmento de documento (documentfragment).

<div id="d1">hello world</div>
<script>
  var div1 = document.getElementById('d1');
  console.log(div1.parentNode); // body
</script>

2.1.8.parentElement

A propriedade parentElement retorna o nó do elemento pai do nó atual. Se o nó atual não tiver um nó pai ou se o tipo de nó pai não for um nó de elemento, retorne nulo

<div id="d1">hello world</div>
<script>
  var div1 = document.getElementById('d1');
  console.log(div1.parentElement); // body
  // 将父元素节点的背景颜色设置为红色
  div1.parentElement.style.backgroundColor = 'red';
</script>

2.1.9.firstChild和lastChild

A propriedade firstChild retorna o primeiro nó filho do nó atual. Se o nó atual não tiver nós filhos, ele retorna nulo. Last retorna o último nó filho.

<div id="d1">hello world<div>我是子节点</div></div>
<div id="d2"><div>我是子节点</div></div>
<script>
  var div1 = document.getElementById('d1');
  console.log(div1.firstChild); // hello world
  console.log(div1.lastChild); // <div>我是子节点</div>
  var div2 = document.getElementById('d2');
  console.log(div2.firstChild); // <div>我是子节点</div>
</script>

2.1.10.childNodes

A propriedade childNodes retorna um objeto semelhante a um array (coleção NodeList) cujos membros incluem todos os nós filhos do nó atual.

<div id="d1">hello world<div>我是子节点</div></div>
<script>
  var div1 = document.getElementById('d1');
  console.log(div1.childNodes); //NodeList[text, div]
</script>

Também podemos usar um loop for para iterar por todos os nós filhos de um nó

var div = document.getElementById('div1');
var children = div.childNodes;
for (var i = 0; i < children.length; i++) {
  // ...
}

2.2.Método

Os métodos a seguir são comumente usados para operar nós: O método mais comumente usado é appendChild(), que é usado para adicionar nós no final da lista childNodes.

Nota: Todos os quatro métodos a seguir exigem que o objeto do nó pai seja chamado!

2.2.1.appendChild

O método appendChild aceita um objeto de nó como parâmetro e o insere no nó atual como o último nó filho. O valor de retorno deste método é o nó filho do documento inserido.

<script>
  // 创建元素节点p
  var p = document.createElement('p');
  // 向p标签插入内容
  p.innerHTML = '我是一个p标签';
  // 将节点插入到body中
  document.body.appendChild(p);
</script>

2.2.2.insertBefore()

O método insertBefore é usado para inserir um nó na posição especificada dentro do nó pai.

var inseridoNode = parentNode.insertBefore(newNode, referenceNode);

O método insertBefore aceita dois parâmetros: o primeiro parâmetro é o nó newNode a ser inserido e o segundo parâmetro é um nó filho referenceNode dentro do nó pai parentNode. newNode será inserido na frente do nó filho de referenceNode. O valor de retorno é o novo nó inserido newNode

<div id="parentElement">
  <span id="childElement">foo bar</span>
</div>
<script>
  //创建一个新的、普通的<span>元素
  var sp1 = document.createElement("span");
  // 向span标签插入内容
  sp1.innerHTML = '我是span标签'
  //插入节点之前，要获得节点的引用
  var sp2 = document.getElementById("childElement");
  //获得父节点的引用
  var parentDiv = sp2.parentNode;
  //在DOM中在sp2之前插入一个新元素
  parentDiv.insertBefore(sp1, sp2);
</script>

2.2.3.removeChild()

O método removeChild aceita um nó filho como parâmetro e é usado para remover o nó filho do nó atual. O valor de retorno é o nó filho removido.

<div id="d1">
  <span id="s1">我是span标签</span>
</div>
<script>
  var span1 = document.getElementById('s1');
  span1.parentNode.removeChild(span1);
</script>

2.2.4.replaceChild()

O método replaceChild é usado para substituir um nó filho do nó atual por um novo nó.

var substituídoNode = parentNode.replaceChild(newChild, oldChild);

O método replaceChild aceita dois parâmetros: o primeiro parâmetro newChild é o novo nó a ser substituído e o segundo parâmetro oldChild é o nó filho a ser substituído. O valor de retorno é o nó oldChild que foi substituído.

<div id="d1">
  <span id="s1">我是span标签</span>
</div>
<script>
  var span1 = document.getElementById('s1');
  //创建一个新的div标签
  var div1 = document.createElement("div");
  // 向div标签插入内容
  div1.innerHTML = '我是div1标签';
  // 节点替换
  span1.parentNode.replaceChild(div1, span1);
</script>

2.2.5. Outros métodos

cloneNode()

Método retorna uma cópia do nó no qual o método foi chamado.

var dupNode = node.cloneNode(deep);

nó

O nó a ser clonado

dupNode

Clone o nó de réplica gerado

profundo opcional

Se deve ser usada a clonagem profunda. Se for verdadeiro, todos os nós descendentes do nó também serão clonados. Se for falso, apenas o próprio nó será clonado.

var p = document.getElementById("para1"),
var p_prime = p.cloneNode(true);

3.Tipo de documento

Javascript representa documentos usando o tipo Document. No navegador, o objeto document é uma instância de HTMLDocument e representa a página HTML inteira. O objeto document é uma propriedade do objeto window, portanto pode ser chamado diretamente. HTMLDocument herda de Document.

3.1. Propriedades

documentElement

Sempre aponta para o elemento <html> em uma página HTML.

corpo

Aponte diretamente para o elemento <body>

tipo de documento

Acesse <!DOCTYPE>, o suporte do navegador é inconsistente e raramente usado

título

Obtenha o título do documento

URL

Obtenha o URL completo

domínio

Obtenha um nome de domínio e configure-o, que é frequentemente usado no acesso entre domínios.

referenciador

Obtenha a URL da página vinculada à página atual, ou seja, a URL da página de origem.

imagens

Obtenha todos os objetos img e retorne o objeto array da classe HTMLCollection

formulários

Obtenha todos os objetos de formulário e retorne o objeto array da classe HTMLCollection

links

Obtenha todos os elementos <a> com atributos href no documento

3.2.Interface de programação DOM

O HTML DOM pode ser acessado através de JavaScript (e também de outras linguagens de programação).

No DOM, todos os elementos HTML são definidos como objetos .

A interface de programação são as propriedades e métodos de cada objeto.

Propriedades são valores que você pode obter ou definir (como alterar o conteúdo de um elemento HTML).

Métodos são ações que você pode executar (como adicionar ou remover elementos HTML).

Exemplo

O exemplo a seguir altera o conteúdo do elemento <p> com id="demo":

<html>
<body>

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

<script>
    document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>

No exemplo acima, getElementById é o método e innerHTML é a propriedade.

Método getElementById

A maneira mais comum de acessar um elemento HTML é usando o id do elemento.

No exemplo acima, o método getElementById usa id="demo" para encontrar o elemento.

propriedade innerHTML

A maneira mais fácil de obter o conteúdo de um elemento é usar o atributo innerHTML.

A propriedade innerHTML pode ser usada para obter ou substituir o conteúdo de um elemento HTML.

A propriedade innerHTML pode ser usada para obter ou alterar qualquer elemento HTML, incluindo <html> e <body>.

3.3.Encontrar elementos

método	descrever
document.getElementById( id )	Encontre elementos por ID de elemento
document.getElementsByTagName( nome )	Encontre elementos por nome de tag
document.getElementsByClassName( nome )	Encontre elementos por nome de classe
document.querySelector()	Retorna o primeiro elemento do documento que corresponde ao seletor CSS especificado
document.querySelectorAll()	document.querySelectorAll() é um novo método introduzido no HTML5 que retorna uma lista de todos os nós de elementos que correspondem ao seletor CSS no documento

getElementById()

Retorna um elemento que corresponde ao id especificado.

<div id="d1">我是一个div标签</div>
<script>
  // 查找id为d1的标签
  var div = document.getElementById('d1');
  console.log(div);
</script>

getElementsByTagName()

Retorna uma HTMLCollection(pseudomatriz) contendo todos os elementos que correspondem ao nome da tag especificada.

<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<script>
  // 查找所有p标签
  var p = document.getElementsByTagName('p');
  console.log(p);
</script>

getElementsByClassName()

Retorna uma coleção HTML HTMLCollection(pseudoarray) contendo todos os elementos que correspondem ao nome da classe especificada.

<div class="div1">我是div标签</div>
<div class="div1">我是div标签</div>
<div class="div1">我是div标签</div>
<script>
  // 查找class为div1的标签
  var div = document.getElementsByClassName('div1');
  console.log(div);
</script>

document.querySelector()

Retorna o primeiro elemento do documento que corresponde ao seletor CSS especificado

<div id="div1">我是一个div</div>
<div id="div1">我是一个div</div>
<script>
  document.querySelector("#div1").innerHTML = "Hello World!";
</script>

document.querySelectorAll()

document.querySelectorAll() é um novo método introduzido no HTML5 que retorna uma lista de todos os nós de elementos que correspondem ao seletor CSS no documento

<div class="div1">我是一个div</div>
<div class="div1">我是一个div</div>
<script>
  console.log(document.querySelectorAll(".div1"));
  var x = document.querySelectorAll(".div1");
  x[0].innerHTML = '我是新的div';
</script>

3.4. Adicionar elementos

document.createElement ( elemento )

Crie um novo elemento HTML, para ser usado em conjunto com o método appendChild() ou insertBefore(). Entre eles, o método appendChild() adiciona um novo nó filho no final da lista de nós filhos do nó. O método insertBefore() insere um novo nó em qualquer posição na lista de nós filhos do nó.

<script>
  // 创建元素节点p
  var p = document.createElement('p');
  // 向p标签插入内容
  p.innerHTML = '我是一个p标签';
  // 将节点插入到body中
  document.body.appendChild(p);
</script>

3.5.Escrever

documento.write()

Escreva expressões de texto ou HTML ou código JavaScript no documento.

<script>
  document.write("<p>Hello world!</p>");
  document.write("<span>Hello DOM!</span>");
  document.write("Hello Weekend!");
</script>

4. Tipo de elemento

O objeto Element corresponde ao elemento HTML da página web. Cada elemento HTML será convertido em um objeto de nó Element na árvore DOM.

4.1. Propriedades

atributos: Retorna uma coleção de todos os atributos relacionados a este elemento.

classList: Retorna a coleção de atributos de classe contidos neste elemento.

className: obtém ou define o valor do atributo de classe do elemento especificado.

clientHeight: obtém a altura dentro do elemento, incluindo preenchimento, mas excluindo barras de rolagem horizontal, bordas e margens.

clientTop: Retorna a altura do elemento a partir de sua borda superior.

clientLeft: Retorna a largura do elemento a partir de sua borda esquerda.

clientWidth: Retorna a largura interna do elemento, incluindo preenchimento, mas excluindo barras de rolagem verticais, bordas e margens.

innerHTML: Define ou obtém os descendentes do elemento representado pela sintaxe HTML.

tagName: Retorna o nome da tag do elemento atual.

4.2. Métodos comumente usados

método	descrever
element.innerHTML = novo conteúdo HTML	Alterar o innerHTML de um elemento
elemento.atributo = valor	Modificar valor do atributo
elemento.getAttribute()	Retorna o valor do atributo especificado do nó do elemento.
element.setAttribute( atributo , valor )	Definir ou alterar valores de atributos de elementos HTML
element.style.property = novo estilo	Alterar o estilo dos elementos HTML

elemento.innerHTML

A propriedade define ou obtém os descendentes de um elemento representado pela sintaxe HTML.

<div id="div1">我是一个div</div>
<script>
  var d1 = document.getElementById('div1');
  // 获取
  console.log(d1.innerHTML);
  // 设置
  d1.innerHTML = '我是新的内容'
</script>

elemento.atributo = valor

Modifique o valor de uma propriedade existente

<div id="div1">123</div>
<script>
  var d1 = document.getElementById('div1');
  // 直接将已经存在的属性进行修改
  d1.id = 'div2';
</script>

elemento.getAttribute()

Retorna o valor do atributo especificado do nó do elemento.

<div id="div1">我是一个div</div>
<script>
  var div = document.getElementById('div1');
  console.log(div.getAttribute('id')); // div1
</script>

element.setAttribute( atributo , valor )

Define ou altera a propriedade especificada para o valor especificado.

<div id="div1">我是一个div</div>
<script>
  var d1 = document.getElementById('div1');
  // 设置div1的class为divCla
  d1.setAttribute('class', 'divCla');
</script>

elemento.style.property

Define ou retorna o atributo de estilo do elemento.

<div id="div1">我是一个div</div>
<script>
  var d1 = document.getElementById('div1');
  // 获取div1的style样式
  console.log(d1.style);
  // 设置div1的style
  d1.style.backgroundColor = 'red';
</script>

Para obter mais detalhes, consulte Objeto HTML DOM Element

Elemento – Referência da interface da API da Web | MDN

5.Tipo de texto

Os nós de texto são representados pelo tipo Text e contêm texto simples interpretado literalmente, que também pode conter caracteres HTML de escape, mas nenhum código HTML.

5.1. Propriedades e métodos

comprimento

comprimento do texto

anexarDados(texto)

anexar texto

deleteData(beginIndex,contagem)

Excluir texto

inserirDados(beginIndex,texto)

inserir texto

substituirData(beginIndex,contagem,texto)

texto de substituição

splitText(beginIndex)

Divida o nó de texto atual em dois nós de texto a partir da posição BeginIndex

document.createTextNode(texto)

Crie um nó de texto, o parâmetro é o texto a ser inserido no nó

substringData(beginIndex,contagem)

Extraia a substring de contagem a partir de BeginIndex

Caso abrangente

<div id="container"></div>
<script>
  // 创建文本节点
  var textNode = document.createTextNode('Hello World!');
  // 获取container
  var div = document.getElementById('container');
  // 将文本节点插入container
  div.appendChild(textNode);
  // 替换文本
  textNode.replaceData(0,5,'Hi');
  // 插入文本
  textNode.insertData(0, 'Hello')
</script>