Resumo dos pontos de conhecimento de JavaScript: DOM

1. Introdução ao DOM

1.1 O que é DOM

Uma implementação JavaScript completa consiste nas seguintes 3 partes diferentes:

• Núcleo (ECMAScript): A parte central da linguagem, que descreve a sintaxe e os objetos básicos da linguagem.

• Document Object Model (DOM): Padrão de operação de documentos de páginas da Web, descrevendo métodos e interfaces para processamento de conteúdo de páginas da Web.

• Modelo de Objeto do Navegador (BOM): A base para as operações do cliente e da janela do navegador, descrevendo os métodos e interfaces para interagir com o navegador.

Document Object Model ( Document Object Model，简称DOM ) é uma编程接口padrão recomendada pela organização W3C para processamento de linguagem de marcação extensível (HTML ou XML).
O W3C definiu uma série de interfaces DOM através das quais o conteúdo, a estrutura e o estilo das páginas web podem ser alterados.

Idioma oficial: Document Object Model (DOM) é uma interface de programação padrão recomendada pela organização W3C para processamento de linguagens de marcação extensíveis. É uma interface de programação de aplicativos (API) independente de plataforma e linguagem que pode acessar dinamicamente programas e scripts e atualizar seu conteúdo, estrutura e estilo de documentos www (documentos HTML e XML são definidos por meio de seções de descrição). O documento pode ser processado posteriormente e os resultados do processamento podem ser adicionados à página atual. DOM é um documento API baseado em árvore que requer que todo o documento seja representado na memória durante o processamento. Outra API simples é o SAX baseado em eventos, que pode ser usado para processar documentos XML muito grandes. Por serem grandes, não são adequados para processar todos na memória.

1.2 Árvore DOM

• Documento: uma página é um documento. O documento é usado no DOM para representar
• elementos: todas as tags na página são elementos, e o elemento é usado no DOM para representar
• nós: todo o conteúdo da página da web são nós (rótulos, atributos, texto, comentários, etc.). Use o nó no DOM para representar

DOM 把以上内容都看做是对象

2. Obtenha elementos

2.1 Como obter elementos da página

.
Como obtemos os elementos na página Você pode obter os elementos na página das seguintes maneiras:

• Obtenha com base no ID
• Obtenha com base no nome da tag
• Obtenha elementos especiais
• por meio de novos métodos em HTML5?
• 
  

2.2 Obtenção com base no ID

Utilize o método getElementById() para obter o objeto elemento com ID.

document.getElementById('id');

Use console.dir() para imprimir o objeto elemento que obtivemos e visualizar melhor as propriedades e métodos no objeto.

2.3 Obter com base no nome da tag

Use o método getElementsByTagName() para retornar uma coleção de objetos com o nome da tag especificado.

document.getElementsByTagName('tag name');

Nota:

1. Como o que obtemos é uma coleção de objetos, precisamos percorrer se quisermos operar os elementos internos.
2. A obtenção do objeto elemento é dinâmica

2.4 Obtenha document.getElementsByClassName('nome da classe') através do novo método do HTML5

// Retorna a coleção do objeto elemento de acordo com o nome da classe document.querySelector('selector'); o seletor especificado O primeiro elemento objeto document.querySelectorAll('selector'); // Retorna de acordo com o seletor especificado

注意：
Os seletores em querySelector e querySelectorAll precisam ser marcados, por exemplo: document.querySelector('#nav');

2.5 Obtenha elementos especiais (body, html)

1. Obtenha o elemento body

doucumnet.body // Retorna o objeto do elemento body

2. Obtenha o elemento html

document.documentElement // Retorna o objeto do elemento html

3. Noções básicas do evento

3.1 Visão geral do evento

O JavaScript permite nos permite criar páginas dinâmicas, e eventos são comportamentos que podem ser detectados por JavaScript.
简单理解： 触发--- 响应机制。
Cada elemento da página da web pode gerar determinados eventos que podem acionar JavaScript. Por exemplo, podemos gerar um evento quando o usuário clica em um botão e, em seguida, realizar determinadas operações.

3.2 Três elementos de eventos:

1. fonte do evento (quem)
2. tipo de evento (qual evento)
3. manipulador de eventos (o que fazer)

caso:

var btn = document.getElementById('btn');
btn.onclick=função(){
 alerta('Como vai você'); 
};

3.3 Passos para executar eventos:

1. Obter a origem do evento,
2. registrar o evento (evento de ligação)
3. , adicionar manipulador de eventos (na forma de atribuição de função)

3.3 Eventos comuns de mouse

注：以下图片的事件只是常见的并不代表所有

3.4 Analise os três elementos

dos eventos:
1. Fonte do evento (sobre o que você deseja operar)

2. Evento (o que você deseja fazer para alcançar o efeito de interação desejado)

3. Função de processamento (como você deseja que o alvo fique após o evento prosseguir)

4 . Elemento de operação

As operações DOM JavaScript podem alterar o conteúdo, a estrutura e o estilo das páginas da web. Podemos usar elementos de operação DOM para alterar o conteúdo, atributos, etc. Observe que a seguir estão todos os atributos

4.1. Altere o conteúdo do elemento

element.innerText

da posição inicial para a posição final, mas remove a tag html. Ao mesmo tempo, espaços e quebras de linha também removerão

todo o conteúdo do início. position para a posição final de

element.innerHTML

4.2 Operações comuns de atributos de elemento

innerText e innerHTML para alterar o conteúdo do elemento.
src, href
id, alt, title

4.3 Operações de atributos de elementos de formulário

Você pode usar DOM para operar os atributos dos seguintes elementos de formulário:

tipo, valor, verificado, selecionado, desabilitado

4.4 Operações de atributos de estilo

Podemos modificar o tamanho, cor, posição e outros estilos de elementos através de JS.

1. element.style Operação de estilo embutido
2. element.className Operação de estilo de nome de classe

注意：
1.JS 里面的样式采取驼峰命名法比如fontSize、 backgroundColor
2.JS 修改style 样式操作，产生的是行内样式，CSS 权重比较高

os elementos operacionais são o conteúdo central do DOM.

4.5 Pensamento excludente

Se houver o mesmo grupo de elementos e quisermos que um determinado elemento implemente um determinado estilo, precisamos usar o algoritmo exclusivo de loop:

1. limpar os estilos de todos os elementos (matar outras pessoas)
2. e definir o estilo para o elemento atual ( deixando-me sozinho).
3. Observe que a ordem não pode ser Inverta-a, primeiro mate outras pessoas e depois defina-se

4.6 Operação de atributos personalizados

1. Obtenha o valor do atributo

• element.property Obtenha o valor do atributo.
• element.getAttribute('attribute');

Diferença:

• element.attribute obtém o valor do atributo interno (o atributo que vem com o próprio elemento)
• element.getAttribute('attribute'); nossos programadores Propriedade

2. Defina o valor da propriedade

• element.property = 'value' Defina o valor da propriedade integrada.

Attribute

• ', 'Value');

Diferença:

• element.Attribute

• define o valor do atributo integrado
• element.setAttribute('Attribute');

• ');

4.7 Propriedades customizadas H5

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

Atributos personalizados são obtidos por meio de getAttribute('attribute').
No entanto, alguns atributos personalizados podem facilmente causar ambigüidade e é difícil determinar se são atributos integrados ou atributos personalizados do elemento.

H5 adicionou novos atributos personalizados para nós:

1. Definir atributos personalizados H5

H5 estipula que o início dos dados do atributo personalizado deve ser usado como o nome do atributo e atribuído um valor.

Ou use JS para definir

element.setAttribute('data-index', 2)

2. Obtenha atributos personalizados H5 <br/> Compatibilidade Get element.getAttribute('data-index');
H5 adicionou element.dataset.index ou element.dataset['index'], que é suportado apenas no IE 11.

5. As operações de nó

geralmente usam dois métodos para obter elementos:
1. Use os métodos fornecidos pelo DOM para obter elementos

• document.getElementById()
• document.getElementsByTagName()
• document.querySelector, etc.  A lógica não é forte e complicada

• Use

o relacionamento hierárquico do nó para obter elementos.

nó

• filho-irmão para obter elementos
• A lógica é forte, mas um pouco menos compatível.

Ambos os métodos podem obter nós de elemento, que serão usados ​​​​posteriormente, mas as operações do nó são mais simples

. nó (rótulo, atributo, texto, comentário, etc.). No DOM, um nó Use o nó para representar.
Todos os nós na árvore HTML DOM podem ser acessados ​​através de JavaScript, e todos os elementos HTML (nós) podem ser modificados, criados ou excluídos.

Geralmente, os nós possuem pelo menos três atributos básicos: nodeType (tipo de nó), nodeName (nome do nó) e nodeValue (valor do nó).

• O nó de elemento nodeType é 1,
• o nó de atributo nodeType é 2
• e o nó de texto nodeType é 3 (nós de texto incluem texto, espaços, quebras de linha, etc.)

我们在实际开发中，节点操作主要操作的是元素节点

5.3 Node

nível

usa a árvore DOM para dividir os nós. Para diferentes relacionamentos hierárquicos, o mais comum é父子兄层级关系

1.

Nó pai

node.parentNode

parentNode

• pode retornar o nó pai de um determinado nó. Observe que é o nó pai mais recente.
• Se o nó especificado não tiver um nó pai, será retornado nulo.

childNodes (padrão)

parentNode.childNodes incluem uma coleção de nós filhos do nó especificado, que é uma coleção atualizada imediatamente.
Nota: O valor de retorno contém todos os nós filhos, incluindo nós de elemento, nós de texto, etc.
Se você deseja apenas obter os nós dos elementos, você precisa lidar com isso de maneira especial. Portanto, geralmente não defendemos o uso de childNodes

var ul = document. nodeType == 1) {
 // ul.childNodes[i] é o nó do elemento console.log(ul.childNodes[i]);}}

2. parentNode.children (não padrão)

parentNode.children é uma propriedade somente leitura que retorna todos os nós do elemento filho. Ele retorna apenas nós de elementos filhos e outros nós não são retornados (é nisso que nos concentramos).
Embora children não seja padrão, ele é suportado por vários navegadores, portanto, podemos usar

3. parentNode.firstChild

firstChild com segurança para retornar o primeiro nó filho ou nulo se não for encontrado. Da mesma forma, todos os nós estão incluídos.

4. parentNode.lastChild

lastChild retorna o último nó filho ou nulo se não for encontrado. Da mesma forma, ele também contém todos os nós

5. parentNode.firstElementChild

firstElementChild retorna o primeiro nó do elemento filho, se não for encontrado, retorna nulo.

6. parentNode.lastElementChild

lastElementChild retorna o último nó do elemento filho ou nulo se não for encontrado.
注意：这两个方法有兼容性问题，IE9 以上才支持

No desenvolvimento real, firstChild e lastChild contêm outros nós, o que é inconveniente para operar. E firstElementChild e lastElementChild têm problemas de compatibilidade. nó de elemento ou E quanto ao último nó de elemento filho?
Solução:

1. Se desejar o primeiro nó do elemento filho, você pode usar parentNode.chilren[0]
2. Se desejar o último nó do elemento filho, você pode usar

parentNode.chilren[parentNode.chilren.length - 1]

Resumo

Modelo de Objeto de Documento (Documento Object Model (DOM, abreviadamente) é uma interface de programação padrão recomendada pela organização W3C para processamento de linguagem de marcação extensível (HTML ou XML).

O W3C definiu uma série de interfaces DOM através das quais o conteúdo, a estrutura e o estilo das páginas web podem ser alterados.

Para JavaScript, para permitir que o JavaScript opere HTML, o JavaScript possui seu próprio conjunto de interfaces de programação DOM.

Para HTML, o DOM faz com que o HTML forme uma árvore DOM.

O elemento DOM que contém documentos, elementos e nós é um objeto, por isso é chamado de modelo de objeto de documento

. Em relação às operações do DOM, nos concentramos principalmente na operação de elementos. Inclui principalmente criação, adição, exclusão, modificação, consulta, operação de atributos e operação de eventos.