2.1 Métodos de acesso a elementos
Navegar pelo DOM (Document Object Model) é uma tarefa importante quando se trabalha com documentos web. JavaScript oferece muitos métodos para buscar e acessar elementos do documento. Esses métodos permitem aos desenvolvedores encontrar facilmente os elementos necessários e manipulá-los.
1. Método getElementById()
O método getElementById() retorna um elemento que possui o atributo id com o valor especificado.
Este é um dos métodos mais simples e frequentemente usados.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id="content">This is the content</div>
<script>
const contentDiv = document.getElementById('content');
console.log(contentDiv.textContent); // Vai mostrar: This is the content
</script>
</body>
</html>
2. Método getElementsByClassName()
O método getElementsByClassName() retorna uma coleção de todos os elementos que possuem a classe especificada.
A coleção é "viva", o que significa que ela é automaticamente atualizada ao se modificar o DOM.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p class="text">Paragraph 1</p>
<p class="text">Paragraph 2</p>
<p class="text">Paragraph 3</p>
<script>
const paragraphs = document.getElementsByClassName('text');
console.log(paragraphs.length); // Vai mostrar: 3
</script>
</body>
</html>
3. Método getElementsByTagName()
O método getElementsByTagName() retorna uma coleção de todos os elementos com a tag especificada.
Essa coleção também é "viva".
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<script>
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length); // Vai mostrar: 3
</script>
</body>
</html>
4. Método querySelector()
O método querySelector() retorna o primeiro elemento que corresponde ao seletor CSS especificado.
Este é um método muito poderoso e flexível para buscar elementos.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div class="container">
<p>Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<script>
const highlightedParagraph = document.querySelector('.highlight');
console.log(highlightedParagraph.textContent); // Vai mostrar: Paragraph 2
</script>
</body>
</html>
5. Método querySelectorAll()
O método querySelectorAll() retorna uma coleção estática (não atualizável) de todos os elementos,
que correspondem ao seletor CSS especificado.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div class="container">
<p>Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<script>
const paragraphs = document.querySelectorAll('.container p');
console.log(paragraphs.length); // Vai mostrar: 3
</script>
</body>
</html>
2.2 Navegação por nós
DOM também fornece métodos para navegar pelos nós em relação ao elemento atual.
1. Propriedade parentNode
A propriedade parentNode retorna o nó pai do nó atual.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id="container">
<p>Paragraph</p>
</div>
<script>
const paragraph = document.querySelector('p');
const parent = paragraph.parentNode;
console.log(parent.id); // Vai mostrar: container
</script>
</body>
</html>
2. Propriedade childNodes
A propriedade childNodes retorna uma coleção de todos os nós filhos do nó atual, incluindo os nós de texto.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const children = list.childNodes;
console.log(children.length); // Vai mostrar a quantidade de todos os nós filhos, incluindo os de texto
</script>
</body>
</html>
Talvez ainda esteja se perguntando, por que o resultado é 7?
Como já foi dito acima, a propriedade childNodes retorna uma coleção de todos os nós filhos do nó atual, incluindo
nós de texto (espaços, símbolos, novas linhas, etc.). A marcação HTML contém espaços e novas linhas entre
os elementos <li>, que também são considerados nós separados.
No exemplo acima, entre a tag <ul> e o primeiro <li> há uma nova linha (e possivelmente espaço)
— isso é considerado um nó de texto. A mesma situação entre todos os <li> e após o último <li>.
Portanto, em vez de três elementos de lista, childNodes inclui esses nós de texto, o que leva a um total de 7.
Para obter apenas os elementos (ignorando os nós de texto), você pode usar a propriedade children, que retorna apenas os elementos filhos:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const children = list.children;
console.log(children.length); // 3
</script>
</body>
</html>
3. Propriedades firstChild e lastChild
As propriedades firstChild e lastChild retornam o primeiro e o último nó filho, respectivamente.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const first = list.firstChild;
const last = list.lastChild;
console.log(first.textContent);
console.log(last.textContent);
</script>
</body>
</html>
Você pode se surpreender que nada foi exibido no console. Mas este não é o caso. Os últimos nós filhos mostrados são Item 1 e Item 3 (nova linha). Se você foi pego nesse ponto, deve reler item 2. Propriedade childNodes
4. Propriedades nextSibling e previousSibling
As propriedades nextSibling e previousSibling retornam o próximo e o anterior nós no mesmo nível de hierarquia.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const secondItem = document.querySelector('li:nth-child(2)');
const next = secondItem.nextSibling;
const prev = secondItem.previousSibling;
console.log(next.textContent); // Vai mostrar: Item 3
console.log(prev.textContent); // Vai mostrar: Item 1 (se ignorar os nós de texto)
</script>
</body>
</html>
2.3 Navegação por nós de elemento
5. Propriedades nextElementSibling e previousElementSibling
Essas propriedades retornam os próximos e anteriores nós de elemento (ignorando texto e comentários).
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const secondItem = document.querySelector('li:nth-child(2)');
const next = secondItem.nextElementSibling;
const prev = secondItem.previousElementSibling;
console.log(next.textContent); // Vai mostrar: Item 3
console.log(prev.textContent); // Vai mostrar: Item 1
</script>
</body>
</html>
6. Propriedades firstElementChild e lastElementChild
Essas propriedades retornam os primeiros e últimos nós filhos de elemento (ignorando texto e comentários).
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const first = list.firstElementChild;
const last = list.lastElementChild;
console.log(first.textContent); // Vai mostrar: Item 1
console.log(last.textContent); // Vai mostrar: Item 3
</script>
</body>
</html>
GO TO FULL VERSION