JavaTutorial de script DOM com exemplo

O que é DOM em JavaRoteiro?

JavaUm script pode acessar todos os elementos de uma página da web utilizando o Modelo de Objeto de Documento (DOM). Na verdade, o navegador cria um DOM da página quando ela é carregada. O modelo DOM é criado como uma árvore de objetos, como esta:

Cada elemento HTML em uma página se torna um nó dentro dessa árvore. Os navegadores agrupam os nós DOM em alguns tipos principais: os nós de elemento representam tags como <span>, <img>, <span ... <p> or <div>Os nós de texto contêm as palavras visíveis dentro de uma tag, enquanto os nós de atributo armazenam valores como... id or classe os nós de comentário preservam <!-- --> marcação. O nó superior é sempre o document objeto, e todos os outros elementos são seus descendentes.

Utilizando o DOM, JavaScript Pode executar múltiplas tarefas. Pode criar novos elementos e atributos, alterar elementos e atributos existentes e até mesmo remover elementos e atributos existentes. JavaO script também pode reagir a eventos existentes e criar novos eventos na página. As seções abaixo explicam como selecionar elementos, modificá-los e conectar manipuladores de eventos com exemplos práticos e executáveis.

É importante lembrar que o DOM não é a mesma coisa que o arquivo HTML original. O HTML que um navegador baixa é um texto estático, mas o DOM que ele constrói a partir desse texto é um modelo de objeto dinâmico e em constante atualização. Qualquer alteração JavaO script é criado no DOM e aparece na tela imediatamente, sem que o arquivo HTML original seja sequer alterado.

Como selecionar elementos DOM em JavaScript

Antes JavaUm script pode alterar qualquer elemento em uma página, mas primeiro precisa selecionar o nó de destino. O DOM oferece diversos métodos de seleção, cada um adequado a diferentes situações:

• obterElementoPorId(): Retorna o único elemento que corresponde a um determinado critério. id atributo.
• obterElementosPorNomeDaClasse(): Retorna uma HTMLCollection ativa de todos os elementos que possuem uma determinada classe.
• obterElementosPorNomeDaTag(): Retorna uma HTMLCollection ativa de todos os elementos com um determinado nome de tag, como por exemplo: p or li.
• querySelector(): Retorna o primeiro elemento que corresponde a qualquer seletor CSS.
• querySelectorAll(): Retorna uma NodeList estática de todos os elementos que correspondem a um seletor CSS.

A tabela abaixo compara os quatro métodos de seleção mais comuns para que você possa escolher o mais adequado para a tarefa.

`querySelector` e `querySelectorAll` aceitam qualquer seletor CSS válido, o que os torna a opção mais flexível para código moderno. Experimente o trecho de código abaixo em uma página que contenha um elemento com id="title" e vários elementos com class="item":

const heading = document.getElementById("title");
const itemsByClass = document.getElementsByClassName("item");
const firstItem = document.querySelector(".item");
const allItems = document.querySelectorAll(".item");
console.log(heading.textContent, itemsByClass.length, allItems.length);

Os métodos `getElementById` e `getElementsByClassName` continuam sendo mais rápidos para pesquisas simples, enquanto `querySelector` e `querySelectorAll` são preferíveis sempre que a lógica de seleção precisar do poder da sintaxe CSS completa, como seletores de atributo ou descendentes.

Como modificar, criar e remover elementos DOM

Uma vez que um elemento é selecionado, JavaO script pode ler ou reescrever seu conteúdo, atributos e até mesmo sua existência na árvore. Usando o DOM, JavaO script pode criar novos elementos e atributos, alterar elementos e atributos existentes e remover completamente elementos e atributos existentes.

Alterar conteúdo com getElementById e innerHTML

1. getElementById: Para acessar elementos e atributos cujo id está definido.
2. innerHTML: Para acessar o conteúdo de um elemento.

Experimente você mesmo este exemplo:

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1 id="one">Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p>This is the technology section.</p>
<script type="text/javascript">
var text = document.getElementById("one").innerHTML;
alert("The first heading is " + text);
</script>
</body>
</html>

A caixa de alerta confirma que getElementById localizou o cabeçalho e innerHTML retornou o texto armazenado dentro dele.

Leia todos os parágrafos com getElementsByTagName

getElementsByTagName: Para acessar elementos e atributos usando o nome da tag. Este método retornará um ordem de todos os itens com o mesmo nome de tag.

Experimente você mesmo este exemplo:

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p id="second">This is the technology section.</p>
<script type="text/javascript">
var paragraphs = document.getElementsByTagName("p");
alert("Content in the second paragraph is " + paragraphs[1].innerHTML);
document.getElementById("second").innerHTML = "The orginal message is changed.";
</script>
</body>
</html>

Como getElementsByTagName retorna uma coleção ativa, paragraphs[1] refere-se ao segundo parágrafo do documento e a atualização de innerHTML sobrescreve imediatamente seu texto na tela.

Crie e remova elementos com createElement e removeChild.

Além de alterar o que já está na página, o DOM permite adicionar elementos totalmente novos ou remover elementos existentes:

• criarElemento(): Constrói um novo nó de elemento na memória.
• appendChild(): Anexa um nó como o último filho de um elemento pai.
• setAttribute(): adiciona ou atualiza um atributo, como por exemplo class or href, em um elemento.
• removerFilho(): Remove um nó filho específico de seu nó pai.

O exemplo abaixo cria um novo item de lista, atribui um texto e uma classe a ele, o adiciona a uma lista existente e, em seguida, remove o primeiro item dessa mesma lista:

const list = document.getElementById("myList");
const newItem = document.createElement("li");
newItem.textContent = "Freshly added item";
newItem.setAttribute("class", "highlight");
list.appendChild(newItem);
list.removeChild(list.firstElementChild);

O método `createElement()` sozinho não exibe nada, já que o nó ainda existe apenas na memória. Ele só aparece quando `appendChild()`, ou um método similar como `prepend()`, o anexa em algum lugar dentro da árvore visível. Navegadores modernos também suportam um método mais curto, `node.remove()`, que exclui um elemento diretamente sem precisar de uma referência ao seu pai, diferentemente da sintaxe mais antiga `parent.removeChild(node)`.

Como lidar com eventos em JavaScript

Um evento é qualquer ação que o navegador possa detectar, como um clique, uma tecla pressionada ou o carregamento de uma página. Você pode adicionar um manipulador de eventos a um elemento específico de duas maneiras principais.

Anexe um manipulador com onclick ou addEventListener.

A primeira abordagem, mais antiga, atribui uma função diretamente à propriedade `on-event` de um elemento:

document.getElementById(id).onclick=function()
{
lines of code to be executed
}

OU, utilizando o método addEventListener(), mais moderno e flexível:

document.getElementById(id).addEventListener("click", functionname)

Geralmente, prefere-se o método `addEventListener()` porque ele permite associar mais de um manipulador ao mesmo evento no mesmo elemento e aceita um terceiro argumento opcional que controla a captura, assunto abordado posteriormente nesta seção. Ele também funciona em conjunto com o método `removeEventListener()`, que remove um manipulador quando ele não é mais necessário, algo que a propriedade `onclick` não consegue fazer sozinha.

O HTML também suporta um terceiro estilo: um manipulador embutido escrito diretamente na tag, como por exemplo: <button onclick="clicked()">Click Me</button>Os manipuladores embutidos misturam marcação com lógica e rapidamente se tornam difíceis de manter, por isso a maioria JavaOs desenvolvedores de scripts os reservam para demonstrações rápidas e utilizam addEventListener() para aplicações reais.

Experimente: um exemplo completo de evento de clique

Experimente você mesmo este exemplo:

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<input type="button" id="btnClick" value="Click Me!!" />
<script type="text/javascript">
document.getElementById("btnClick").addEventListener("click", clicked);
function clicked()
{
alert("You clicked me!!!");
}
</script>
</body>
</html>

Clicar no botão aciona a função clicked(), que dispara um JavaCaixa de alerta do script confirmando que o manipulador de eventos foi executado com sucesso.

O Objeto de Evento

Cada manipulador de eventos recebe automaticamente um objeto de evento como seu primeiro argumento. Esse objeto contém detalhes úteis sobre o que aconteceu, incluindo `event.target` (o elemento exato onde a ação se originou), `event.type` (o nome do evento, como "clique") e métodos como `event.preventDefault()`, que impede o comportamento padrão do navegador, como seguir um link ou enviar um formulário.

document.getElementById("btnClick").addEventListener("click", function(event) {
console.log("Clicked element: " + event.target.id);
});

Mais duas propriedades completam o objeto de evento: `event.current`Target `event.target` sempre se refere ao elemento ao qual o ouvinte está anexado, mesmo que `event.target` reporte um elemento filho aninhado, e `event.stopPropagation()` interrompe um evento antes que ele continue se propagando ou capturando mais elementos. Juntamente com `preventDefault()`, essas ferramentas dão ao manipulador um controle preciso sobre o que acontece em seguida.

Evento BubblCaptura, Delegação

Quando um evento é disparado em um elemento aninhado, ele não para por aí. No borbulhante Na fase de propagação, o evento viaja de baixo para cima, desde o elemento alvo, passando por cada ancestral, até chegar ao documento. capturando Na fase inicial, que é opcional, o evento viaja do documento para o destino antes do início da propagação. {capture: true} como terceiro argumento de addEventListener() para escutar durante a fase de captura.

Delegação do evento Aproveita o princípio de propagação (bubbleing): em vez de associar um ouvinte separado a cada elemento filho, você associa um único ouvinte a um elemento pai comum e inspeciona o `event.target` para determinar qual filho o disparou. Isso usa menos memória e abrange automaticamente os elementos adicionados à página posteriormente.

const list = document.getElementById("myList");
list.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    alert("You clicked " + event.target.textContent);
  }
});

A delegação, juntamente com o bubbling e a captura, oferece controle preciso sobre como o DOM e os eventos são processados. JavaO script responde à medida que a página se torna mais interativa.

Perguntas Frequentes