Fale sobre redesenhar e reorganizar

Fale sobre redesenhar e reorganizar

1. Reorganização e redesenho são uma das principais razões para o consumo de energia na programação DOM.
2. Reorganizações (refluxo): quando render treeuma parte ou todos os elementos devido ao tamanho, o layout, são ocultados e, portanto, são alterados devido à re-renderização da página, um processo conhecido como rearranjo.
3. Redesenhar: Quando os render treeatributos atualizados na (árvore de renderização) afetam apenas a aparência e o estilo do elemento, mas não o layout do elemento, o navegador precisa redesenhar o estilo do elemento atual, o que é chamado de redesenho.
4. O redesenho não causará um rearranjo, mas o rearranjo certamente causará um redesenho. O rearranjo de um elemento geralmente provoca uma série de reações e até mesmo aciona o rearranjo e o redesenho de todo o documento. O custo de desempenho é alto.

Descreva, respectivamente, innerHTML innerText textContent

• innerHTML: Ao obter, o rótulo é obtido como uma string.

  • Quando definido, as tags na string são analisadas diretamente.

• innerText: ao obter, obtém apenas o conteúdo do nó de texto no elemento.

  • Quando definido, as tags na string não serão analisadas.

• textContent: ao obter, obtém apenas o conteúdo do nó de texto no elemento.

  • Quando definido, as tags na string não serão analisadas.

O método antigo é definido para obter e excluir o método de atributo

• Atributos próprios

  1. Diretamente 元素对象.属性名para obter.
  2. Se algum de seus próprios atributos conflitar com as palavras-chave de js, então o método de obtenção dos próprios atributos atuais será modificado, por
     exemplo, quando o atributo class é obtido, ele pode ser classNameobtido.

• Atributos personalizados

  • Obtivermos:
    1. Não é possível acessar diretamente 元素对象.属性名, porque ele não encontrou a propriedade em sua própria propriedade do elemento atual, o elemento atual será o objeto como um objeto js para ganhar sua propriedade.
    2. O atributo definido pelo usuário deve ser getAttributepesquisado antes que o autoatributo atual possa ser encontrado no atributo do elemento.
  • Configurações:setAttribute(key,value)
  • excluir:removeAttribute(key)

atributos personalizados h5

1. h5 estipula:

   • Se for um atributo personalizado, adicione um data-*prefixo.
   • h5 fornece um datasetatributo para cada elemento , que é um objeto, que salva todos os atributos personalizados do elemento atual.
   • Enquanto datasetvocê manipula propriedades neste objeto, você está manipulando propriedades personalizadas para o elemento atual.

2. Definir atributos personalizados h5 para
   usarele.dataset.key = value

3. Obtenha o
   uso de atributos personalizadosele.dataset.key

4. Excluir
   uso de atributos personalizadosdelete ele.dataset.key

Criar elemento nó inserir elemento nó copiar nó excluir nó substituir operação de nó

1. Criar um nó de elemento:
   document.createElement("元素名");
   Especial: new Image()criar uma tag img.

2. Nó de inserção:

   1. A.appendChild(B);
      Insira um nó B no final do interior do elemento A.
   2. A.insertBefore(new,old);
      Insira um novo diretamente na frente do elemento antigo. Novo e velho são irmãos.
      A é o nó do elemento pai do antigo e do novo.

3. A.cloneNode();

   • Copie o nó A.
   • O parâmetro é booleano e o padrão é falso.
     • false significa cópia superficial apenas copia o elemento atual.
     • true é copiar profundamente o elemento atual e todos os elementos dentro dele.

4. Excluir elemento:
   A.removeChild(B)
   exclua o elemento filho B no elemento A.

5. Substituir elemento:
   A.replaceChild(new,old)
   substituir antigo por novo
   A é o elemento pai de novo e antigo.