Operações abrangentes de nós JavaScript em um artigo

Em nossas páginas web, além de usar os métodos fornecidos pelo DOM para obter nós, também podemos usar o relacionamento hierárquico dos nós para obter nós. Vamos resumi-los hoje!

Visão geral do nó

Todo o conteúdo de uma página da web é um nó (rótulo, atributo, texto, comentário, etc.) e no DOM, os nós são representados por nó.
Todos os nós na árvore HTML DOM são acessíveis 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 (os nós de texto incluem texto, espaços, quebras de linha, etc.)

Em nosso desenvolvimento real, as operações de nó operam principalmente em nós de elemento.

O nível do nó

usa a árvore DOM para dividir os nós em diferentes relacionamentos hierárquicos. O mais comum é o relacionamento hierárquico pai-filho-irmão.

1. Nó pai

node.parentNode

• O atributo parentNode pode retornar o nó pai de um nó. Observe que é o nó pai mais próximo.
• Retorna nulo se o nó especificado não tiver nenhum nó pai.

<p class="pai">
        <p class="filho"></p>
    </p>
    <roteiro>
        var filho = document.querySelector(".filho");
        console.log(filho.parentNode);
    </script>

2. Nó filho

1.node.childNodes (padrão)

node.childNodes retorna uma coleção contendo os nós filhos do nó especificado. Esta coleção é uma coleção atualizada imediatamente.

<ul>
        <li>Eu sou li</li>
        <li>Eu sou li</li>
        <li>Eu sou li</li>
        <li>Eu sou li</li>
    </ul>
    <roteiro>
        var ul = document.querySelector('ul');
        //Nós filhos childNodes Todos os nós filhos, incluindo nós de elementos, nós de texto, etc.
        console.log(ul.childNodes);
    </script>

Por que existem cinco nós de texto aqui? Na verdade, eles correspondem a cinco quebras de linha.

Essas cinco quebras de linha são nós de texto, mais quatro nós de elemento li, um total de 9.

Observação: 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.querySelector('ul');
	for (var i = 0;i<ul.comprimento;i++){
	    if (ul.childNodes[i].nodeType == 1){
	        console.log(ul.childNodes[i]);
	    }
	}

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

node.children é uma propriedade somente leitura que retorna todos os nós de elementos filhos. Ele retorna apenas nós de elementos filhos e outros nós não são retornados (é nisso que nos concentramos).
Embora o kids não seja padrão, ele é compatível com vários navegadores, portanto, podemos usá-lo com confiança.

<ul>
        <li>Eu sou li</li>
        <li>Eu sou li</li>
        <li>Eu sou li</li>
        <li>Eu sou li</li>
    </ul>
    <roteiro>
       var ul = document.querySelector('ul');
       console.log(ul.filhos);
    </script>

3. O primeiro nó filho e o último nó filho

1.node.
2.node.lastChild
firstChild retorna o primeiro nó filho. Se não conseguir encontrá-lo, ele retorna nulo. Da mesma forma, todos os nós estão incluídos.

3.node.firstElementChild
firstElementChild retorna o primeiro nó do elemento filho ou nulo se não for encontrado.
4.node.lastElementChild
lastElementChild retorna o último nó do elemento filho ou nulo se não for encontrado.

Nota: Esses dois métodos apresentam problemas de compatibilidade e são suportados apenas pelo IE9 e superior.

5.node.crianças[0]
5.node.children[node.children.length - 1]
Nota: Não há problema de compatibilidade com o método de escrita de desenvolvimento real.

<ul>
        <li>Eu sou li</li>
        <li>Eu sou li</li>
        <li>Eu sou li</li>
        <li>Eu sou li</li>
    </ul>
    <roteiro>
       var ul = document.querySelector('ul');
       // 1. Se é um nó de texto ou um nó de elemento console.log(ul.firstChild);
       console.log(ul.lastChild);
       // 2. Retorna o nó do elemento próprio correspondente. Somente o IE9 e versões posteriores suportam console.log(ul.firstElementChild);
       console.log(ul.lastElementChild);
       // 3. Não há problema de compatibilidade console.log(ul.children[0]);
       console.log(ul.crianças[ul.crianças.comprimento - 1]);
    </script>

4. Nó irmão

1. próximo irmão.
nextSibling retorna o próximo nó irmão do elemento atual ou nulo se não for encontrado. Da mesma forma, todos os nós estão incluídos.
2.nó.irmão anterior
previousSibling retorna o nó irmão anterior do elemento atual ou nulo se não for encontrado. Da mesma forma, todos os nós estão incluídos.
3.node.nextElementSibling
nextElementSibling retorna o próximo nó do elemento irmão do elemento atual. Se não for encontrado, retorna nulo.
4.node.anteriorElementSibling
previousElementSibling retorna o nó do elemento irmão anterior do elemento atual ou nulo se não for encontrado.
Nota: Esses dois métodos apresentam problemas de compatibilidade e são suportados apenas pelo IE9 e superior.

Então, como encapsular uma função que atenda à compatibilidade e possa encontrar nós de elementos irmãos

function getNextElementSibling(element){

       var el = elemento;
       while(el = el.próximo irmão){
           if(el.nodeType == 1){
               retornar el;
           }
       }
       retornar nulo;
   }

O código encapsulado acima pode ser resolvido, mas você não precisa pensar muito, porque o navegador IE está prestes a parar de servir, então você só precisa se lembrar do nó nextElementSibling e não precisa se preocupar com compatibilidade. problemas.

Criar nó

document.createElement (' tagName ')

O método document.createElenent () cria o elemento H TML especificado por tagName. Como esses elementos não existiam originalmente e foram gerados dinamicamente com base nas minhas necessidades, também somos chamados de nós de elementos de criação dinâmica .

Adicionando nós e adicionando nós

1.node.appendChild(child)

O método node.appendChild() adiciona um nó ao final da lista de nós filhos do nó pai especificado. Semelhante ao pseudoelemento after em CSS.

2.node.insertBefore(filho, elemento especificado)

<ul></ul>
    <roteiro>
        var ul = document.querySelector("ul");
        var li =document.createElement("li");
        var span = document.createElement("span")
        ul.appendChild(li);
        ul.insertBefore(span,ul.filhos[0]);
    </script>

Excluir nó

node.removeChild(child)

O método node.removeChild(child) exclui um nó filho do DOM e retorna o nó excluído.

<ul>
        <li>aniu</li>
        <li>casar</li>
        <li>tom</li>
    </ul>
    <roteiro>
        var ul = document.querySelector("ul");
        ul.removeChild(ul.crianças[2]);
    </script>

Copiar nó (nó clone)

node.cloneNode ()

O método node.cloneNode () retorna uma cópia do nó que chamou este método. Também chamado de nó clone/nó de cópia
1. Se o parâmetro colchete estiver vazio ou falso, é uma cópia superficial, ou seja, apenas o próprio nó é clonado e os nós filhos dentro dele não são clonados.
2. Se o parâmetro colchete for verdadeiro, é uma cópia profunda, que copiará o próprio nó e todos os seus nós filhos.

<ul>
        <li>aniu</li>
        <li>casar</li>
        <li>tom</li>
    </ul>
    <roteiro>
        var ul = document.querySelector("ul");
        var li1 = ul.children[0].cloneNode(); //Cópia superficial var li2 = ul.children[0].cloneNode(true);
        ul.appendChild(li2);
    </script>