Folha de dicas de manipulação de JavaScript DOM

Criando elementos DOM

Crie um elemento do zero com createElement()

Esta é uma das operações mais utilizadas, onde um novo elemento DOM é criado durante a interação do usuário. O createElement O método pode ser usado para criar um novo elemento com base no nome da tag.

O atributo passado para o createElement método pode estar em letras minúsculas ou maiúsculas. O método converte o nome da tag para letras minúsculas, antes de criar o novo elemento.

1

// creating div

2

var element = document.createElement('div');

3

4

// creating paragraph element

5

var element = document.createElement('p');

6

7

// creating image element

8

var element = document.createElement('img');

9

10

// creating anchor element

11

var element = document.createElement('a');

Importar um elemento com importNode()

Você pode importar um nó de outro documento. Por esta, importNode método é usado.

1

const importedNode = iframe.contentWindow.document.getElementById("myNode");

2

3

// if all the descendants of the imported node have to be copied

4

// deep = true

5

// if all the descendants of the imported node don't have to be copied

6

// deep = false

7

const deep = true

8

const element = document.importNode(importedNode, deep);

Clonar um elemento com cloneNode()

Da mesma forma, você pode clonar um elemento existente e criar um novo.

Uma desvantagem em usar esse método pode ser a duplicação de IDs de elemento. Certifique-se de que o id do elemento recém-criado é modificado.

1

let p = document.getElementById("paragraph");

2

// if all the descendants of the imported node have to be copied

3

// deep = true

4

// if all the descendants of the imported node don't have to be copied

5

// deep = false

6

const deep = true

7

let duplicateParagraph = p.cloneNode(deep);

Anexar o novo elemento ao documento

Depois que o elemento for criado ou importado, ele não será anexado diretamente ao documento. O elemento recém-criado será armazenado em uma referência e flutuará sem rumo. É por isso que outro método deve ser chamado, também anexar o elemento recém-criado ao documento.

E existem alguns métodos para anexar um elemento ao documento.

1

<div id="parent">

2

  <p>Parent</p>

3

</div>

4

<button onclick="addChild()">Add Child</button>

5

6

<script>

7

  function addChild() {

8

    const parent = document.getElementById("parent"); // selecting parent

9

    const child = document.createElement("p"); // creating child

10

    child.innerHTML = "First Child"; // adding some content

11

12

    const child2 = document.createElement("p"); // creating child

13

    child2.innerHTML = "Second Child"; // adding some content

14

15

    // appending child to parent

16

    parent.append(child);

17

    parent.appendChild(child2);

18

19

    const grandparent = document.createElement("p"); // creating ancestor

20

    grandparent.innerHTML = "Grand Parent"; // adding some content

21

22

    // appending before parent

23

    parent.insertBefore(grandparent);

24

  }

25

</script>

Selecionando Elementos

Antes de modificar os atributos do elemento, você deve garantir que o elemento seja selecionado corretamente. Existem muitas maneiras de selecionar um elemento, com base em suas propriedades. Vamos percorrer alguns métodos úteis e comumente usados ​​para selecionar elementos.

Métodos de consulta

Os métodos de consulta permitem que você use um seletor CSS para localizar elementos em seu documento.

querySelector(selector)

Retorna o primeiro elemento para corresponder a um seletor especificado. Se não houver elementos correspondentes, null é devolvido.

querySelectorAll(selector)

Retorna todos os elementos que atendem ao seletor, null se não houver elementos correspondentes.

1

const element = document.querySelector(selectors)

2

const element = document.querySelectorAll(selectors)

O selectors deve ser uma string de seletor de CSS válida. Os seletores de exemplo são fornecidos abaixo:

• #main: o elemento com o id main
• .login: elementos com o nome da classe login
• form.login input[type="button"]: todas as entradas de botão dentro de um formulário com nome de classe login

Métodos de obtenção

getElementById(id)

Retorna um elemento com o ID fornecido. Para que esse método funcione com eficiência, você deve fornecer IDs de elemento exclusivos. Se não houver elementos correspondentes, o método retorna null.

getElementByClassName(classname)

Retorna todos os elementos com o nome de classe fornecido. Se vários nomes de classe forem mencionados, apenas os elementos com todos os nomes de classe serão retornados. Os elementos retornados farão parte do live HTMLCollection. Se o código modificar um nome de classe, o resultado desse método será afetado. É por isso que é preciso ter cuidado ao usar esse método dentro de uma iteração.

getElementsByTagName(tagname)

Retorna todos os elementos com um determinado nome de tag. Esse método pesquisa em todo o nó raiz. Os elementos retornados por este método fazem parte do live HTMLCollection. Remover e adicionar elementos à árvore DOM modificará automaticamente o resultado desse método.

1

  <body>

2

    <p id="para" class="test_class">Some text here</p>

3

    .

4

    .

5

  </body>

6

7

  const elem = document.getElementById("para");

8

  const element_by_classname = document.getElementsByClassName("test_class");

9

  const element_by_tagname = document.getElementsByTagName("p"); 

Travessia da árvore DOM

Também podemos percorrer uma árvore DOM, usando os elementos filho e irmão de um nó.

1

<div id='parent'>

2

    <p id='first_child'>First Child</p>

3

    <p id='middle_child'>Middle Child</p>

4

    <p id='last_child'>Last Child</p>

5

</div>

6

7

const middle_child = document.getElementById('middle_child')

8

9

const parent = middle_child.parentNode() //parent

10

parent.lastChild() //last_child

11

parent.firstChild() //first_child

12

middle_child.previousSibling() //first_child

13

middle_child.nextSibling() //last_child

14

parent.children() // ['first_child', 'middle_child', 'last_child']

Eventos DOM

A interatividade do JavaScript vem dos ouvintes de eventos DOM. Os ouvintes de evento são chamados sempre que há um movimento do mouse ou pressionamento de tecla. Os ouvintes devem estar conectados a um nó ou elemento. É por isso que o método é chamado de ‘ouvinte de evento’. O método escuta se um evento ocorreu ou não.

As informações sobre o evento são mantidas dentro de um objeto, chamado objeto de evento. Quando um ouvinte de evento é chamado, o objeto de evento rastreia o destino, o tipo de evento e todas as propriedades associadas.

Existem vários tipos de eventos:

• Eventos de teclado: eles capturam a interação do usuário com o teclado. Os detalhes da tecla pressionada são armazenados no key propriedade. Os eventos de teclado são disparados em etapas: keyDown, keyUp e keyPress. keyPress é disparado apenas quando há um personagem envolvido, e não um modificador. (Modificadores são teclas como tab e caps lock).
• Eventos JavaScript: estes podem ser usados ​​para manipular o DOM. O objetivo desses eventos é tornar a página o mais dinâmica possível. Sempre que o usuário rolar, clicar em um botão ou executar uma ação – esses eventos serão acionados. Funções registradas para eventos como onScroll, onClick, onFocus e onLoad são chamados de manipuladores de eventos.
• Eventos do Rato: eles podem ser usados ​​para capturar a interação de um usuário com o mouse. Os eventos são disparados em click, mouseUp, mouseDown, mouseOver e mouseOut.

.addEventListener(eventType, handlerFunction)

O método addEventListener é a solução recomendada para registrar eventos DOM.

• Ele permite que os usuários adicionem vários manipuladores de eventos para um único evento.
• Ele ajuda os usuários a controlar quando um evento pode ser ativado ou removido.
• Ele funciona em todos os tipos de destino de evento, desde elementos SVG até conteúdo HTML tradicional.

1

document.addEventListener("click", (event) => console.log(event))

.removeEventListener(eventType, handlerFunction)

Conforme mencionado acima, temos a liberdade de ativar e desativar ouvintes de eventos de qualquer lugar do código. O removeEventListener O método é usado para impedir que o documento escute eventos. Assim como o addEventListener função, precisamos passar dois argumentos para a função removeEventListener método.

1

eventTarget.addEventListener("event", eventHandlerFunction);

2

3

eventTarget.removeEventListener("event", eventHandlerFunction);

Remover elementos DOM

Remover Elementos Filhos Com removeChild()

Assim como a criação, os elementos também podem precisar ser removidos do documento. Para isso, o removeChild método pode ser usado. O removeChild O método retorna a referência do nó excluído. O removeChild método deve ser chamado de seu pai ou então, um erro será lançado.

1

// selecting parent and child

2

const parent = document.getElementById("parent");

3

const child = document.getElementById("child");

4

5

// removing child from parent

6

parent.removeChild(child);

Substituindo elementos por replaceChild()

Outro método para remover elementos DOM é substituí-los por elementos filhos mais recentes.

1

// selecting parent

2

const parent = document.getElementById("parent");

3

// selecting oldElement

4

const oldElement = document.getElementById("child");

5

// creating newElement which is newChild

6

const newElement = document.createElement("newChild");

7

8

function replace() {

9

  newElement.innerHTML = "This is a new child"

10

  parent.replaceChild(newElement, oldElement);

11

}

Conclusão

Chegamos ao fim de nossa planilha de manipulação de JavaScript DOM. Esses são métodos essenciais quando você deseja fazer alterações dinâmicas no DOM.