Chegamos a mais um post da minha saga de estudos em JavaScript.
No post anterior, eu falei sobre querySelector e querySelectorAll, para selecionarmos elementos no DOM.
No post de hoje irei falar sobre outras formas de selecionarmos elementos através do DOM, com o intuito de manipularmos eles.
Para as explicações abaixo, levaremos em consideração o seguinte arquivo HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Outras maneiras de fazer queries no DOM</title>
</head>
<body>
<h1 id="title">Outras maneiras de fazer queries no DOM</h1>
<div>
<p>Hello World!</p>
<p>Oi</p>
<p class="error">Essa é uma mensagem de erro</p>
</div>
<div class="error">Outra mensagem de erro</div>
<script src="./app.js"></script>
</body>
</html>
Seleção pelo ID - getElementById
Através do método getElementById é usado para buscarmos a referência de algum elemento pelo ID dele.
Como este método é específico para ID's, não precisamos usar a # na frente do nome do ID no argumento, pois ele já entendi que deverá buscar um elemento com o ID passado por argumento.
const title = document.getElementById('title')
console.log(title) // <h1 id="title">Outras maneiras de fazer queries no DOM</h1>
Seleção pelo nome da classe CSS - getElementByClassName
Como este método é específico para nomes de classes, não precisamos usar o . na frente do nome da classe no argumento, pois ele já entendi que deverá buscar um elemento com a classe passada por argumento.
const errors = document.getElementsByClassName('error')
console.log(errors) // HTMLCollection(2) [p.error, div.error]
Conforme observado acima, tivemos como retorno um HTMLCollection.
HTMLCollection representa uma lista genérica de elementos, é similar ao NodeList, mas não é idêntico. Também é possível acessar cada item através da anotação de colchetes [] ou através do métodos item.
console.log(errors[0]) // <p class="error">
console.log(errors.item(1)) // <div class="error">
Mas não é possível iterar por um HTMLCollection com o forEach, já na NodeList isso é possível.
errors.forEach(error => {
console.log(error) // Uncaught TypeError: errors.forEach is not a function
})
Esse erro acima, acontece justamente pelo fato de um HTMLCollection não ser um array ou uma NodeList.
Seleção pelo nome da tag - getElementByTagName
Para esse tipo de seleção, basta informar por argumento o nome da tag que devemos buscar.
Abaixo irei obter as referências de todas as tags p.
const paragraphs = document.getElementsByTagName('p')
console.log(paragraphs) // HTMLCollection { 0: p, 1: p, 2: p.error, length: 3 }
Chegamos ao fim de mais um post, espero que o conteúdo tenha ajudado.
Vou deixar links do MDN para cada item citado neste post:
getElementById
getElementByClassName
getElementByTagName
Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!
Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:
Top comments (0)