Explicação detalhada das propriedades e métodos do objeto elemento no DOM (js básico)

Em HTML DOM (Modelo de Objetos de Documento), cada parte é um nó.

O nó é a unidade mais básica da estrutura DOM, e cada etiqueta HTML é um nó da estrutura DOM.

O documento é nó de documento.

Todos os elementos HTML são nós de elemento

Todos os atributos HTML são nós de atributo

O texto inserido no elemento HTML é nó de texto

Os comentários são nós de comentário.

O tipo de nó mais básico é o tipo Node, todos os outros tipos herdam de Node, as operações DOM são frequentemente a parte mais onerosa do JavaScript, portanto, os problemas com NodeList são os mais comuns. Atente para: NodeList é ‘dinâmico’, o que significa que cada vez que você acessa o objeto NodeList, uma consulta é executada, embora isso aumente o custo, garante que todos os nós adicionados possam ser acessados no NodeList.

Todos os nós de elemento têm atributos e métodos comuns, vamos vê-los em detalhes:

Vamos olhar primeiramente para os atributos 通用 mais comuns

1　 element.id : define ou retorna o id do elemento

2　 element.innerHTML : define ou retorna o conteúdo do elemento, pode incluir subetiquetas e conteúdo

3　 element.innerText : define ou retorna o conteúdo do elemento, sem incluir subetiquetas e conteúdo

4　 element.className : define ou retorna o nome da classe do elemento

5　 element.nodeName : retorna o nome do nó em letras maiúsculas

6　 element.nodeType : retorna o tipo do nó1representa nó de elemento　 2representa nó de atributo...

7　 element.nodeValue : retorna o valor do nó, para nós de elemento o valor é null

8　 element.childNodes : retorna o objeto nodelist dos nós filhos do elemento, o nodelist é semelhante a um array, possui a propriedade length e pode ser acessado usando colchetes [index] (também pode usar o método item(index)). No entanto, o nodelist não é um array.

9　 element.firstChild/element.lastChild : retorna o primeiro nó/último nó filho (incluso nós de comentário e de texto)

10　 element.parentNode : retorna o nó pai daquele nó

11　 element.previousSibling : retorna o nó anterior同级（incluso nós de comentário e de texto)

12　 element.nextSibling : retorna o próximo nó同级（incluso nós de comentário e de texto)

13　 element.chileElementCount : retorna o número de elementos filhos (não inclui nós de texto e de comentário)

14　 element.firstElementChild /lastElementChild retorna o primeiro/Último filho (sem nós de texto e nós de comentário)

15　 element.previousElementSibling/nextElementSibling　Retorna o anterior/Próximo elemento irmão (sem nós de texto e nós de comentário)

16　 element.clientHeight/clientWidth　Retorna a altura visível do conteúdo/Largura (sem incluir borda, margem ou barra de rolagem)

17　 element.offsetHeight/offsetWidth /offsetLeft/offset/Top retorna a altura do elemento/Largura/Deslocamento em relação ao lado esquerdo do pai/Deslocamento à direita (incluindo borda e preenchimento, sem incluir margem)

18　 element.style　Define ou retorna as propriedades de estilo do elemento,。Exemplo: element.style.backgroundColor　Atenção, diferente do CSS, as propriedades do style devem remover o traço, a segunda palavra　　a primeira letra deve ser maiúscula

19　 element.tagName　Retorna o nome da tag do elemento (em maiúsculas)

!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .form_style{
      color: #5b5b5b;
      font-size: large;
      border: 5px sólido roxo;
      background-color: antiquewhite;
      width: 440px;
      height: 120px;
      position: relative;
      left: 20px;
      top:20px;
      margin:10px;
    }
    p {
      color: #5b5b5b;
      font-size: larger;
      text-indent: 40px;
    }
  </style>
</head>
<body>
  <form id='first_form' class="form_style" name="cangjingge">
    Escolha a arte marcial:<br/>
    <input type="radio" name="gongfa" value="jysg">Gong do Yang do Nove Estrelas<br/>
    <input type="radio" name="gongfa" value="qkdny">Mudança Magnética do Céu e da Terra<br/>
    <input type="radio" name="gongfa" value="khbd">Manual do Jasmim<br/>
    <input type="radio" name="gongfa" value="xxdf">Meditação do Estrela Absorvente<br/>
  </form>
  <p>Por favor, pense duas vezes, jovem mestre!!!</p><!--Anotação de Comentário-->
  <p>Recomendação de Prática<-->Manuscrito do Jasmim</p>
  <script>
    //Adicione o código de demonstração JS aqui
    var a=document.getElementById('first_form'),
      b = document.getElementsByTagName('p')[0];
    console.log(a.id);
    console.log(a.innerHTML);
    console.log(a.className);
    console.log(a.childNodes);
    console.log(a.firstChild);
    console.log(a.lastChild);
    console.log(a.nodeName);
    console.log(a.nodeType);
    console.log(a.nodeValue);
    console.log(a.parentNode);
    console.log(a.clientHeight);
    console.log(a.offsetHeight);
    console.log(b.nextSibling);
    console.log(b.nextElementSibling);
  </script>
</body>
</html>

Resultados exibidos pelo navegador:

Além disso, há alguns atributos exclusivos

Atributos exclusivos são aqueles que pertencem exclusivamente a um tipo de etiqueta. Por exemplo, a etiqueta <a> tem os atributos href e target. A etiqueta <img> tem o atributo src; a etiqueta <form> tem os atributos entype e action ...

a_element.href retorna o link apontado pelo nó atual

Vamos ver algumas das métodos comuns usados mais frequentemente:

!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .form_style{
      color: #5b5b5b;
      font-size: large;
    }
    p {
      color: #5b5b5b;
      font-size: larger;
    }
  </style>
</head>
<body>
  <form id='first_form' class="form_style" name="cangjingge">
    Escolha a arte marcial:<br/>
    <input type="radio" name="gongfa" value="jysg">Gong do Yang do Nove Estrelas<br/>
    <input type="radio" name="gongfa" value="qkdny">Mudança Magnética do Céu e da Terra<br/>
    <input type="radio" name="gongfa" value="khbd">Manual do Jasmim<br/>
    <input type="radio" name="gongfa" value="xxdf">Meditação do Estrela Absorvente<br/>
  </form>
  <p>Por favor, pense duas vezes, jovem mestre!!!</p>
  <script>
    //Adicione o código de demonstração JS aqui
  </script>
</body>
</html>

(Todos os códigos de demonstração JS a seguir são experimentados com o código HTML de exemplo deste documento)

1　 element.appendChild(nodeName)　　 Adicionar novos nós filhos ao elemento, tornando-o o último nó filho e retornando o nó filho. Para adicionar novos elementos ao DOM HTML, você primeiro deve criar o elemento e depois adicioná-lo ao elemento existente.

Código de demonstração JS:

var a=document.getElementById('first_form');   
var textnode=document.createTextNode("慎重选择");  
var textnode=document.createTextNode("慎重选择");

2　 a.appendChild(textnode)　　 element.getAttribute(para)

Código de demonstração JS:

var a=document.getElementById('first_form');
Retorna o valor do atributo especificado do nó do elemento.      //console.log(a.getAttribute('name'))

3　 element.getAttributeNode(para)　　 Retorna o nó de atributo especificado.

Código de demonstração JS:

var a=document.getElementById('first_form');
console.log(a.getAttributeNode('name'))      //Saída de console do nó de atributo name

4　 element.getElementsByTagName(para) Retorna a coleção de todos os elementos filhos com o nome de rótulo especificado.

Código de demonstração JS:

var a=document.getElementById('first_form');
console.log(a.getElementsByTagName('input'))      //Saída de console

5　 element.hasAttribute(para)　 Se o elemento tiver o atributo especificado, retorna true, caso contrário, retorna false.

Código de demonstração JS:

var a=document.getElementById('first_form');
console.log(a.hasAttribute('name'))      //Saída de console

6　 element.insertBefore(insertNode,appointedNode)　 Inserir um novo nó antes do nó filho existente especificado.

Código de demonstração JS:

var a=document.getElementById('first_form');
    var inputList=document.getElementsByTagName('input');
    var newNode=document.createElement('input');
    var newNode2=document.createTextNode('天马流星拳');
    var br=document.createElement('br');
    newNode.type='radio';
    newNode.name='gongfa';
    newNode.value='tmlxq';
    a.insertBefore(newNode,inputList[2]);
    a.insertBefore(newNode2,inputList[3]);
    a.insertBefore(br,inputList[3]);

7　 element.removeAttribute(); Remover atributo especificado do elemento.

Código de exemplo js:

var a=document.getElementById('first_form');
a.removeAttribute('name');
console.log(a.hasAttribute('name'))

8　 element.removeChild()　　 Remover o nó filho do elemento. O nó removido, embora não esteja mais na árvore do documento, ainda está na memória e pode ser referenciado a qualquer momento.

Código de exemplo js:

var a=document.getElementById('first_form');
    a.removeChild(a.childNodes[3]);

9　 element.replaceChild(newNode,replaceNode)　 Substituir o nó especificado por um novo nó.

10　 element.setAttribute(attrName,attrValue)　 Definir ou alterar o valor do atributo especificado.

Código de exemplo js:

var a=document.getElementById('first_form');
    a.setAttribute('name','shaolinsi');
    console.log(a.name)

11　 element.setAttributeNode()　　　 Modificar o nó do atributo especificado

Código de exemplo js:

var a=document.getElementById('first_form');
    var attr = document.createAttribute('id');
    attr.value='the_first';
    a.setAttributeNode(attr);
　　　　 console.log(a.id)

12　 nodelist.item() Retorna o nó localizado no índice especificado da NodeList.

Código de exemplo js:

var a=document.getElementsByTagName('input')
console.log(a.item(2))

Isso é tudo que o editor trouxe para você sobre a explicação detalhada das propriedades e métodos dos objetos de elementos no DOM do JavaScript básico. Espero que você apóie e grite o tutorial~

Tutorial básico