Na aula 4 tem um "Para saber mais: acessando dados com propriedades no DOM" que é colocado varias propriedades, e exemplos. No entanto, no nextSibling o exemplo mostrado não funciona. Segue o exemplo: HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
JS
const item1 = document.querySelector('li:first-child');
const item2 = item1.nextSibling;
console.log(item2.textContent); // Saída: "Item 2"
Nos meus arquivos HTML e JS de estudo, fiz dessa forma a princípio:
<!DOCTYPE html>
<html lang="br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aula 04 - Atividade 05</title>
</head>
<body>
<section id="secao">
<div id="container">
<h1>Esté é um título</h1>
<h2>Este pode ser considerado um subtítulo</h2>
<p>Este é um parágrafo</p>
</div>
</section>
<ul>
<li id="item1">Item 01</li>
<li id="item2">Item 02</li>
<li id="item3">Item 03</li>
</ul>
<script src="script.js"></script>
</body>
</html>
const item1 = document.querySelector('#item1');
const item2 = item1.nextSibling;
console.log(item2.textContent);
Ai quando coloco o nextElementSibling:
const item1 = document.querySelector('#item1');
const item2 = item1.nextElementSibling;
console.log(item2.textContent);
Ai aparece o resultado "Item 02" no console do navegador. E do jeito mostrado no "Para saber mais" utilizando somente nextSibling não retorna nada, alguém poderia me explicar o porque, ou onde posso estar errando?
