Coleta de pontos de conhecimento JavaScript: obtenção de elementos e nós

[Recomendações relacionadas: tutorial em vídeo javascript, front-end da web]

Obtenha o elemento

• por meio do ID ( getElementById )
• por meio do atributo de nome ( getElementsByName )
• por meio do nome da tag ( getElementsByTagName )
• por meio do nome da classe ( getElementsByClassName )
• Obtenha um elemento por meio do seletor ( querySelector )
• através do seletor Um grupo de elementos ( querySelectorAll )
• método de obtenção de html ( document.documentElement )
• método de obtenção de corpo ( document.body )

1. Obter por ID (getElementById)

// 1 Obter nó de elemento // por id (find elementos por id, diferenciando maiúsculas de minúsculas, se houver vários ids, apenas o primeiro será encontrado)
    document.getElementById('p1');

• O contexto deve ser um documento.
• Os parâmetros devem ser passados. Os parâmetros são do tipo string e são usados ​​para obter o id do elemento.
• O valor de retorno obtém apenas um elemento e retorna nulo se não for encontrado.

2. Encontre elementos por nome de classe (getElementsByClassName)

// Pesquise elementos por nome de classe. Separe vários nomes de classes com espaços para obter um HTMLCollection (uma coleção de elementos com um atributo de comprimento, e você pode acessar um elemento interno por meio do número de índice )
    var cls = document.getElementsByClassName('a b');
    console.log(cls);

• O parâmetro é o nome da classe do elemento.
• O valor de retorno é um array semelhante a um array. Se não for encontrado, um array vazio será retornado

3. Através do atributo name (getElementsByName)

// Pesquise o atributo name e retorne um NodeList (uma coleção de nós com um atributo de comprimento que pode). ser acessado através do número de índice)
   var nm = document.getElementsByName('c');
    console.log(nm);

4. Por nome da tag (getElementsByTagName)

// Encontre elementos pelo nome da tag e retorne um HTMLCollection
    document.getElementsByTagName('p');

• O parâmetro é para obter o atributo de nome da tag do elemento, que não diferencia maiúsculas de minúsculas.
• O valor de retorno é um array de classe. Se não for encontrado, um array vazio é retornado.

5. Obtenha um elemento através do seletor (querySelector)

O parâmetro document.querySelector('.animated')

• é o seletor, como: "p. nomedaclasse".
• Retorne um único nó, se houver vários elementos correspondentes, retorne os primeiros

6. Obtenha um conjunto de elementos por meio do seletor (querySelectorAll)

document.querySelector('.animated')

• O valor de retorno é uma matriz de classe

para obter o nó

no Document Object Model (DOM) ), cada nó é um objeto. Os nós DOM têm três atributos importantes

: 1. nodeName: o nome do nó

2. nodeValue: o valor do nó

3. nodeType: o tipo do nó

1. atributo nodeName: o nome do nó, que é somente leitura .

• O nodeName do elemento node é igual ao nome
• do rótulo
• . O nodeName do nó do documento é sempre
• #document

.

Atributo

nodeValue: O valor do nó

• O nodeValue do elemento node é indefinido ou nulo
• O nó de texto O nodeValue é o
• atributo de texto do nó.

do nó, que é somente leitura. Os seguintes tipos de nós comumente usados:

• Tipo de elemento Tipo de nó
• Elemento 1
• Atributo 2
• Texto 3 O espaço também retorna 3
• Comentário 8
• Documento 9

Crie um nó:

1. Crie um nó: createElement('')

// Crie um elemento Ele acabou de ser criado e não adicionado ao html. Ele precisa ser usado em conjunto com appendChild. p');
    elem.id = 'teste';
    elem.style = 'cor: vermelho';
    elem.innerHTML = 'Sou um nó recém-criado';
    document.body.appendChild(elem);

2. Inserir nó: appendChild ()

• o uso é: parent.appendChild(child)
• adicionará o nó filho ao final do pai.
• Se o nó filho existir originalmente, o nó original será. removido. Adicione o novo nó ao final, mas o evento permanecerá

var oNewp=document.createElement("p");
      var oText=document.createTextNode("Olá Mundo");
      oNewp.appendChild(oText);

2-1. Inserir nó:

• o uso de insertBefore() é parent.insertBefore(newNode,refNode)

;
      document.body.insertBefore(oNewp,oOldp);

Excluir nó

1. Excluir nó:

• o uso de removeChild é: parent.removeChild(child)
• Se você excluir um nó filho que não seja um elemento pai, um erro será relatado

var op=document .body.getElementsByTagName("p ")[0];
         op.parentNode.removeChild(op);

Clone node

1. Clone node: parent.cloneNode() false ou true

• Clone node (precisa aceitar um parâmetro para indicar se deseja copiar o elemento)

// Clone node (precisa aceitar um parâmetro para indicar se deve copiar o elemento) elemento)
    var formulário = document.getElementById('teste');
    var clone = form.cloneNode(true);
    clone.id = 'teste2';
    document.body.appendChild(clone);

Substituir nó

1. Substituir método de nó node.replace(new,old)

var oOldp=document.body.getElementsByTagName("p")[0];
       oOldp.parentNode.replaceChild(oNewp,oOldp);

da caixa de fragmentos do documento

• : Ao adicionar um grande número de nós a um documento, será muito lento se forem adicionados um por um.

só

• vez
• Sintaxe
• : document.createDocumentFragment();

    {
        var início = Date.now();
        var str = '', li;
        var ul = document.getElementById('ul');
        var fragmento = document.createDocumentFragment();
        para(var i=0; i<10000; i++)
        {
            li = document.createElement('li');
            li.textContent = ''+i+'ésimo nó filho';
            fragmento.appendChild(li);
        }
        ul.appendChild(fragmento);
        console.log('Consumidor de tempo:'+(Date.now()-start)+'milliseconds'); // 63 milissegundos})(

)

;

Pontos de conhecimento de JavaScript Organize os detalhes de obtenção de elementos e nós Para obter mais informações, preste atenção a outros artigos relacionados na rede de código-fonte!