📚 Estudando JavaScript
🔍 Pesquisar:
- Elementos que pegam e apontam para o DOM.
🌳 Estrutura do DOM
A tag <html>
é a raiz (root element) do documento HTML. Seus filhos
diretos são <head>
e <body>
, formando a árvore do DOM
(Document Object Model).
🔧 getElementById
getElementById
é uma função fundamental em JavaScript para obter e operar elementos do
DOM. Ela permite que você aponte e obtenha um elemento específico da sua página HTML, indicando
seu atributo id
.
🧠 Características de Uso
-
Finalidade: Capturar um elemento HTML específico no DOM com base no atributo
id
. -
Sintaxe:
document.getElementById('nomeDoID');
Você chama a função a partir do objeto
document
e passa o ID como parâmetro.Passar como parâmetro em JavaScript significa fornecer valores ou referências para que uma função os utilize durante sua execução.
-
Nome do Método: Atenção à capitalização correta:
Element
,By
eID
começam com letras maiúsculas. Além disso,Element
está no singular — diferente degetElementsByTagName
. -
Retorno: Retorna o elemento HTML correspondente ao ID especificado. Se nenhum for encontrado, retorna
null
. -
Associação a Variáveis: O elemento retornado pode ser armazenado em uma variável para facilitar sua manipulação.
🛠️ Manipulação de Elementos Obtidos com
getElementById
Após obter um elemento, você pode realizar diversas operações:
📥 Obter Propriedades
id
: Retorna o próprio ID do elemento.innerHTML
: Retorna o conteúdo HTML interno da tag — útil para<p>
,<div>
,<h1>
, etc.value
: Usado em elementos de formulário como<input>
para acessar ou modificar o texto inserido.
✏️ Modificar Propriedades
innerHTML
: Permite alterar o conteúdo interno da tag.style
: Modifica o estilo visual do elemento. Exemplo:elemento.style.color = 'red';
🧪 Exemplo Prático
<p id="mensagem">Texto original</p>
<script>
let elemento = document.getElementById("mensagem");
elemento.innerHTML = "Texto modificado via JavaScript!";
elemento.style.color = "blue";
</script>
🧭 Contexto e Importância
-
DOM (Document Object Model): Representa a estrutura em árvore do HTML. Cada tag, texto e atributo são "nós" (nodes). O
getElementById
permite acessar esses nós para manipular a página. -
JavaScript no Navegador: Métodos como
getElementById
são essenciais para o JavaScript do lado do cliente (executado no navegador). Não são usados em ambientes como Node.js, que não manipulam o DOM.
🧮 Comparação com Outros Seletores
Método | Retorno | Seleção por |
---|---|---|
getElementById |
Elemento único (HTMLElement ) |
ID |
getElementsByTagName |
Coleção (HTMLCollection ) |
Tag |
querySelectorAll |
Lista (NodeList ) |
CSS selector |
Observação:
getElementsByTagName
equerySelectorAll
retornam listas (coleções), funcionando como arrays ou vetores.
✅ Resumo
getElementById
é um método essencial para interagir com elementos específicos na sua página
HTML. Ele permite tanto a leitura quanto a modificação de propriedades e
conteúdos, sendo uma das ferramentas mais utilizadas para criar interatividade com JavaScript.