15 métodos JavaScript para manipulação de DOM para desenvolvedores da Web

var ele = document.querySelector (selector);

é selecionado com o querySelector () método e sua cor é alterada para vermelho.

 
parágrafo um
 
parágrafo dois
 
div one
 
parágrafo terceiro
 
div dois
 

 var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'vermelho'; 

Demonstração Interativa

Teste o querySelector () método na demonstração interativa a seguir. Basta digitar um seletor correspondente aos que você pode encontrar dentro das caixas azuis (por exemplo,. #três) e clique no botão Selecionar. Note que se você digitar .quadra, apenas sua primeira instância será selecionado.

2. querySelectorAll ()

Ao contrário querySelector () que retorna apenas a primeira instância de todos os elementos correspondentes, querySelectorAll () retorna todos os elementos que correspondem ao seletor de CSS especificado.

Os elementos correspondentes são retornados como NodeList objeto que será um objeto vazio se nenhum elemento correspondente for encontrado.

Sintaxe

var eles = document.querySelectorAll (seletor);

• eles - UMA NodeList Objeto com todos os elementos correspondentes como valores de propriedade. O objeto está vazio se nenhuma correspondência for encontrada.
• seletor - um ou mais seletores CSS, como "#fooId", ".fooClassName", ".class1.class2", ou ".class1, .class2"

Exemplo de código

O exemplo abaixo usa o mesmo HTML que o anterior. No entanto, neste exemplo, todos os parágrafos são selecionados com querySelectorAll (), e são de cor azul.

 
parágrafo um
 
parágrafo dois
 
div one
 
parágrafo terceiro
 
div dois
 

 var paragraph = document.querySelectorAll ('p'); para (var p de parágrafos) p.style.color = 'blue'; 

3. addEventListener ()

Eventos Consulte o que acontece com um elemento HTML, como clicar, focalizar ou carregar, ao qual podemos reagir com JavaScript. Podemos atribuir funções JS para ouço para esses eventos em elementos e fazer alguma coisa quando o evento ocorreu.

Existem três maneiras que você pode atribuir uma função a um determinado evento.

E se foo () é uma função personalizada, você pode registrá-la como ouvinte de evento de clique (chame quando o elemento do botão for clicado) de três maneiras:

1.  Alerta

2.  var btn = document.querySelector ('button'); btn.onclick = foo;

3.  var btn = document.querySelector ('button'); btn.addEventListener ('clique', foo);

O método addEventListener () (a terceira solução) alguns pros; é o padrão mais recente - permitindo a atribuição de mais de uma função como ouvintes de evento para um evento - e vem com um conjunto útil de opções.

Sintaxe

ele.addEventListener (evt, ouvinte, [opções]);

• ele - O elemento HTML que o ouvinte de evento estará escutando.
• evt - O evento segmentado.
• ouvinte - Normalmente, uma função JavaScript.
• opções - (opcional) Um objeto com um conjunto de propriedades booleanas (listadas abaixo).

Opções	O que acontece quando é definido como verdade?
capturar	Impede que o evento borbulhe, isto é, impede a chamada de qualquer ouvinte de evento para o mesmo tipo de evento nos ancestrais do elemento. Para usar esse recurso, você pode usar duas sintaxes: ele.addEventListener (evt, ouvinte, verdadeiro) ele.addEventListener (evt, listener, capture: true);
uma vez	O ouvinte é chamado apenas na primeira vez que o evento acontece e, em seguida, ele é automaticamente desconectado do evento e não será mais acionado por ele..
passiva	A ação padrão do evento não pode ser interrompida com o método preventDefault ().

Exemplo de código

Neste exemplo, adicionamos um ouvinte de evento de clique chamado foo, ao Tag HTML.

Clique em mim

 var btn = document.querySelector ('button'); btn.addEventListener ('clique', foo); function foo () alert ('olá'); 

Demonstração Interativa

Atribuir o foo () função personalizada como ouvinte de evento para qualquer um dos três eventos a seguir: entrada, clique ou passe o rato por cima & acione o evento escolhido no campo de entrada inferior, passando o cursor do mouse ou clicando nele.

4. removeEventListener ()

o removeEventListener () método separa um ouvinte de evento previamente adicionado com o addEventListener () método do evento que está ouvindo.

Sintaxe

ele.removeEventListener (evt, ouvinte, [opções]);

Usa a mesma sintaxe da acima mencionada addEventListener () método (exceto para o uma vez opção excluída). As opções são usadas para serem muito específicas sobre como identificar o ouvinte a ser desanexado.

Exemplo de código

Seguindo o exemplo de código, usamos em addEventListener (), aqui removemos o ouvinte de evento de clique chamado foo de elemento.

 btn.removeEventListener ('click', foo);

5. createElement ()

o createElement () método cria um novo elemento HTML usando o nome da tag HTML a ser criado, como 'p' ou 'div'.

Mais tarde, você pode adicionar esse elemento à página da Web usando métodos para inserção de DOM, tal como AppendChild () (veja mais adiante neste post).

Sintaxe

document.createElement (tagName);

• tagName - O nome da tag HTML que você deseja criar.

Exemplo de código

Com o exemplo a seguir, você pode criar um novo elemento de parágrafo:

var pEle = document.createElement ('p')

6. appendChild ()

o appendChild () método adiciona um elemento como o último filho para o elemento HTML que invoca esse método.

A criança a ser inserida pode ser um elemento recém-criado, ou um já existente. Neste último caso, ele será movido de sua posição anterior para a posição do último filho.

Sintaxe

ele.appendChild (childEle)

• ele - O elemento HTML ao qual childEle é adicionado como seu último filho.
• childEle - O elemento HTML adicionado como o último filho de ele.

Exemplo de código

Neste exemplo, inserimos um elemento é como o filho de um

elemento usando o appendChild () e o acima mencionado createElement () métodos.

 var div = document.querySelector ('div'); var strong = document.createElement ('forte'); strong.textContent = 'Olá'; div.appendChild (forte);

Demonstração Interativa

Na seguinte demonstração interativa, cartas de #uma para #r são os elementos filhos do # pai-um, # pai-dois, e # parent-three seletores de id.

Confira como o appendChild () método funciona por digitando um pai e um nome de seletor filho nos campos de entrada abaixo. Você pode escolher crianças pertencentes a outro pai também.

7. removeChild ()

o removeChild () método remove um elemento filho especificado do elemento HTML que chama esse método.

Sintaxe

ele.removeChild (childEle)

• ele - O elemento pai de childEle.
• childEle - O elemento filho de ele.

Exemplo de código

Neste exemplo, removemos o elemento que nós adicionamos como uma criança ao

tag no exemplo de código para o anterior appendChild () método.

div.removeChild (forte);

8. replaceChild ()

o replaceChild () método substitui um elemento filho por outro pertencente ao elemento pai que chama esse método.

Sintaxe

ele.replaceChild (newChildEle, oldChileEle)

• ele - Elemento pai de que as crianças devem ser substituídas.
• newChildEle - Elemento filho de ele que irá substituir oldChildEle.
• oldChildEle - Elemento filho de ele, que será substituído por newChildEle.

Exemplo de código

Neste exemplo, o elemento filho pertencente ao

elemento pai é substituído por um recém-criado tag.

 
 Olá 

 var em = document.createElement ('em'); var strong = document.querySelector ('forte'); var div = document.querySelector ('div'); em.textContent = 'oi'; div.replaceChild (em, forte);

9. cloneNode ()

Quando você tem que criar um novo elemento que precisa ser o mesmo que um elemento já existente na página da web, você pode simplesmente criar uma cópia do elemento já existente usando o cloneNode () método.

Sintaxe

var dupeEle = ele.cloneNode ([deep])

• dupeEle - Cópia do ele elemento.
• ele - O elemento HTML a ser copiado.
• profundo - (opcional) Um valor booleano. Se estiver definido para verdade, dupeEle terá todos os elementos filhos ele tem, se está definido para falso será clonado sem seus filhos.

Exemplo de código

Neste exemplo, criamos uma cópia para o elemento com cloneNode (), então nós adicionamos ao

tag como um elemento filho com o acima mencionado appendChild () método.

Como um resultado,

conterá dois elementos, ambos com o Olá string como conteúdo.

 
 Olá 

 var strong = document.querySelector ('forte'); var copy = strong.cloneNode (true); var div = document.querySelector ('div'); div.appendChild (copy); 

10. insertBefore ()

o insertBefore () método adiciona um elemento filho especificado antes de outro elemento filho. O método é chamado pelo elemento pai.

Se o elemento filho referenciado não existir ou você passar explicitamente nulo em seu lugar, o elemento filho a ser inserido é adicionado como o último filho do pai (igual a appendChild ()).

Sintaxe

ele.insertBefore (newEle, refEle);

• ele - Elemento pai.
• newEle - Novo elemento HTML a ser inserido.
• REFERIR - Um elemento filho de ele antes que newEle será inserido.

Exemplo de código

Neste exemplo, criamos um novo elemento com algum texto dentro e adicioná-lo antes a elemento dentro do

elemento pai.

 
 Olá 

 var em = document.createElement ('em'); var strong = document.querySelector ('forte'); var div = document.querySelector ('div'); em.textContent = 'oi'; div.insertBefore (em, forte); 

Demonstração Interativa

Esta demonstração interativa funciona de forma semelhante ao nosso demo anterior pertencente ao appendChild () método. Aqui você só precisa digitar os seletores de id de dois elementos filho (de #uma para #r) nas caixas de entrada, e você pode ver como o insertBefore () método move a primeira criança especificada antes o segundo.

11. createDocumentFragment ()

o createDocumentFragment () método pode não ser tão conhecido como os outros nesta lista, mas é importante, especialmente se você quiser insira vários elementos a granel, como adicionar várias linhas a uma tabela.

isto cria um DocumentFragment objeto, que essencialmente é um nó DOM que não faz parte da árvore DOM. É como um buffer onde podemos adicionar e armazenar outros elementos (por exemplo, várias linhas) primeiro, antes de adicioná-los ao nó desejado na árvore DOM (por exemplo, para uma tabela).

Por que não adicionamos elementos diretamente à árvore DOM? Porque a inserção de DOM provoca alterações de layout, e é um processo caro do navegador já que múltiplas inserções de elementos conseqüentes causam mais alterações de layout.

Por outro lado, adicionar elementos a um DocumentFragment objeto não causa alterações de layout, para que você possa adicionar quantos elementos desejar antes de passá-los para a árvore DOM, causando uma alteração de layout apenas neste ponto.

Sintaxe

document.createDocumentFragment ()

Exemplo de código

Neste exemplo, criamos várias linhas e células da tabela com o createElement () método, em seguida, adicioná-los a um DocumentFragment objeto, finalmente, adicionar esse fragmento de documento para um HTML

usando o appendChild () método.

Como resultado, cinco linhas - cada uma delas contendo uma célula com um número de 1 a 5 como conteúdo - serão inseridas dentro da tabela..

 var table = document.querySelector ("table"); var df = document.createDocumentFragment (); para (var i = 0; i<5; i++)  var td = document.createElement("td"); var tr = document.createElement("tr"); td.textContent = i; tr.appendChild(td) df.appendChild(tr);  table.appendChild(df); 

12. getComputedStyle ()

Às vezes você quer verifique os valores da propriedade CSS de um elemento antes de fazer qualquer alteração. Você pode usar o ele.style propriedade para fazer o mesmo, no entanto, o getComputedStyle () método foi feito apenas para este propósito, retorna os valores calculados somente leitura de todas as propriedades CSS de um elemento HTML especificado.

Sintaxe

var style = getComputedStyle (ele, [pseudoEle])

• estilo - UMA CSSStyleDeclaration objeto retornado pelo método. Ele contém todas as propriedades CSS e seus valores do ele elemento.
• ele - O elemento HTML do qual os valores da propriedade CSS são buscados.
• pseudoEle - (opcional) Uma string que representa um pseudoelemento (por exemplo, ':depois de'). Se isso for mencionado, as propriedades CSS do pseudoelemento especificado associado a ele será retornado.

Exemplo de código

Neste exemplo, obtemos e alertamos o computador largura valor de um

elemento usando o getComputedStyle () método.

 var style = getComputedStyle (document.querySelector ('div')); alerta (style.width); 

13. setAttribute ()

o setAttribute () método ou adiciona um novo atributo para um elemento HTML ou atualiza o valor de um atributo que já existe.

Sintaxe

ele.setAttribute (nome, valor);

• ele - O elemento HTML ao qual um atributo é adicionado ou cujo atributo é atualizado.
• nome - O nome do atributo.
• valor - o valor do atributo.

Exemplo de código

Neste exemplo, adicionamos o contenteditable atribuir a um

fazendo uso do setAttribute () método, que irá transformar o seu conteúdo editável.

Olá

 var div = document.querySelector ('div'); div.setAttribute ('contenteditable', ") 

14. getAttribute ()

o getAttribute () método retorna o valor de um atributo especificado pertencente a um determinado elemento HTML.

Sintaxe

ele.getAttribute (nome);

• ele - O elemento HTML de qual atributo é solicitado.
• nome - O nome do atributo.

Exemplo de código

Neste exemplo, alertamos o valor do contenteditable atributo pertencente ao

elemento com a ajuda do getAttribute () método.

Olá

 var div = document.querySelector ('div'); alert (div.getAttribute ('contenteditable')) 

15. removeAttribute ()

o removeAttribute () método remove um determinado atributo de um elemento HTML específico.

Sintaxe

ele.removeAttribute (nome);

• ele - O elemento HTML de qual atributo deve ser removido.
• nome - O nome do atributo.

Exemplo de código

Neste exemplo, removemos o contenteditable atributo do

elemento. Como resultado,

não será mais editável.

Olá

 var div = document.querySelector ('div'); div.removeAttribute ('contenteditable'); 

15 Lições “A Arte da Guerra” Ensina a Vencer as Batalhas da Vida

15 bibliotecas Lightbox para capacidade de resposta móvel

15 ideias para comprar ou construir sua mesa perfeita

Artigo seguinte

15 jQuery Plugins para fazer elementos pegajosos inteligentes

Artigo anterior

15 vídeos inspiradores de apresentação de startups para empreendedores