JavaScript é uma linguagem de programação amplamente utilizada no desenvolvimento web. Ela permite adicionar interatividade e dinamismo às páginas da web. A sigla DOM significa "Document Object Model" (Modelo de Objetos do Documento) e refere-se à representação da estrutura de um documento HTML em forma de árvore. O JavaScript interage com a DOM para manipular os elementos da página, como alterar o conteúdo, estilos, adicionar ou remover elementos, manipular eventos, entre outros.
É possível modificar os estilos dos elementos HTML usando JavaScript. Por exemplo, você pode alterar a cor de fundo de um elemento:
const myElement = document.getElementById('myElement');
myElement.style.backgroundColor = 'red';
O JavaScript permite que você responda a eventos, como cliques de mouse ou envios de formulários. Por exemplo, você pode adicionar um ouvinte de evento para um botão:
const myButton = document.getElementById('myButton');
myButton.addEventListener('click', function() {
console.log('Botão clicado!');
});
/* **com Arrow Function */**
myButton.addEventListener('click', () => {
console.log('Botão clicado!');
});
O JavaScript permite adicionar e remover elementos da DOM. Por exemplo, você pode adicionar um novo elemento <li> a uma lista:
const myList = document.getElementById('myList');
const newListItem = document.createElement('li');
newListItem.textContent = 'Novo item';
myList.appendChild(newListItem);
Esses são apenas exemplos básicos de como o JavaScript interage com a DOM. A combinação desses recursos permite criar páginas da web interativas e dinâmicas. Existem muitos outros métodos e recursos disponíveis na API da DOM para manipular elementos HTML de maneiras mais avançadas.
A ferramenta do JavaScript getElementById permite acessar um elemento HTML específico em uma página da web, com base no valor do atributo id desse elemento. Ela retorna uma referência ao elemento encontrado, ou null se nenhum elemento corresponder ao id fornecido.
Exemplo:
<!DOCTYPE html>
<html>
<body>
<h2>Exemplo de Uso do getElementById</h2>
<p id="demo">Este é um parágrafo de exemplo.</p>
<button onclick="alterarTexto()">Clique aqui para alterar o texto</button>
<script>
function alterarTexto() {
// Obtendo uma referência ao elemento com o id "demo"
let elemento = document.getElementById("demo");
// Alterando o conteúdo do parágrafo
elemento.innerHTML = "Texto alterado!";
}
</script>
</body>
</html>
Nesse exemplo, temos um parágrafo com o id "demo" e um botão. Ao clicar no botão, a função alterarTexto é executada. Dentro dessa função, usamos getElementById para obter uma referência ao parágrafo com o id "demo". Em seguida, modificamos o conteúdo desse parágrafo, atribuindo um novo texto à propriedade innerHTML do elemento. Como resultado, o texto do parágrafo será alterado para "Texto alterado!" quando o botão for clicado.