O Modelo de Objecto de Documento (DOM) é uma interface de programação para documentos HTML e XML criados pelo navegador uma vez carregado o documento. Uma página web é essencialmente um documento representado pelo DOM como nós e objectos. Permite aos programas manipular o conteúdo, estrutura e estilos do documento.
Neste tutorial, aprenderemos a usar o JavaScript para aceder a diferentes nós (elementos HTML) no DOM. Comecemos pelo primeiro método: obter elemento por ID.
Obter Elemento por ID
O document‘s getElementById() método toma o elemento ID como entrada e devolve um Element objecto representando o elemento DOM. Aqui está um exemplo:
<div>🦄</div> Agora aqui está como podemos obter o elemento acima <div> usando o seu ID:
const unicorn = document.getElementById('unicorn'); O ID é sensível a maiúsculas e minúsculas e único em todo o documento HTML. Portanto, este método devolve sempre um único elemento. Se nenhum elemento correspondente for encontrado, retorna null.
Note: Não colocar o sinal
#antes da cadeia de identificação enquanto chama o métodogetElementById(). Obteránullem vez do elemento, e depois poderá perguntar durante horas o que correu mal.
Get Elements By Tag Name
O método getElementsByTagName() é utilizado para aceder a múltiplos elementos. Toma o nome da etiqueta como entrada e devolve todos os elementos DOM que correspondem ao nome da etiqueta como HTMLCollection:
<p>🐱</p><p>🐰</p><p>🐯</p><p>🐧</p>JavaScript code to access all <p> elements:
const animals = document.getElementsByTagName('p'); Este método procura apenas um nome da etiqueta de cada vez. Mas se passar em * como o nome da etiqueta, obterá todos os elementos no DOM:
const allNodes = document.getElementsByTagName('*');Encontrar elementos pelo nome
O método getElementsByName() é utilizado para obter uma colecção de elementos pelo seu atributo name, e devolve um objecto NodeList:
<input type="text" name="email"><input type="tel" name="phone"><input type="date" name="dob"> Deixe-nos obter todos os elementos com o nome email:
const emails = document.getElementsByName('email');Nota: Ao contrário do atributo
id, que deve ser único, múltiplos elementos HTML podem ter o mesmo atributoname. É por isso quegetElementsByName()devolve uma colecção de nós.
Get Elements By Class Name
Want to use class attribute to get a list of matching elements? Pode usar getElementsByClassName() método, basta passar-lhe um nome de classe (sem .) e devolverá um HTMLCollection de todos os elementos DOM que têm o nome de classe dado:
<div class="bird owl">🦉</div><div class="bird">🐦</div><div class="bird eagle">🦅</div><div class="animal cat">🐱</div> Deixe-nos obter todos os bird‘s:
const birds = document.getElementsByClassName('bird'); Este método também aceita múltiplos nomes de classe separados por espaços. Vamos obter todos os elementos que têm as classes bird e eagle:
const eagle = document.getElementsByClassName('bird eagle');Query Selector
O método querySelector() é um dos dois métodos modernos de JavaScript que lhe permitem obter elementos do DOM, com base em selectores CSS. Basta passar no selector de CSS e obterá o primeiro elemento que corresponde ao selector especificado. Se não houver correspondência, retorna null. Aqui está um exemplo:
const email = document.querySelector('#signup input');Query Selector All
Quer seleccionar uma lista de elementos que correspondam aos selectores especificados? Utilize antes o método querySelectorAll(). Este método toma múltiplos selectores CSS como entrada e devolve uma NodeList – uma lista de elementos DOM que coincidem com os selectores especificados. Vamos seleccionar todos os elementos com uma classe de bird ou animal a partir da marcação HTML acima referida:
const elems = document.querySelectorAll('.bird, .animal');console.log(elems.length); // 4Função de encadeamento
Também é possível encadear múltiplas funções para procurar elementos dentro de outro elemento. Primeiro é necessário seleccionar um único elemento usando ou getElementById() ou querySelector(), e depois encadear outra função para pesquisar dentro:
<form> <input type="text" name="email"> <input type="tel" name="phone"> <input type="date" name="date-of-birth"></form> obter todos input elementos, dentro de um elemento que tenha o ID signup:
const inputs = document.getElementById('signup').getElementsByTagName('input');// ORconst inputs = document.querySelector('#signup').querySelectorAll('input');Traversing HTMLCollection and NodeList
Maior dos métodos que discutimos acima (excepto getElementById() e querySelector()) devolve múltiplos elementos como um HTMLCollection ou um NodeList.
O HTMLCollection não é uma matriz mas uma colecção genérica de elementos. Portanto, não é possível iterar sobre ela com forEach() ou map(). Contudo, podemos convertê-lo para um array real e depois iterar usando Array.from() método:
const inputs = document.getElementById('signup').getElementsByTagName('input');// iterate over HTMLCollectionArray.from(inputs).forEach(element => { console.log(element);}); embora NodeList também não seja um array, mas fornece forEach() método para iterar sobre os elementos:
const inputs = document.querySelector('#signup').querySelectorAll('input');//iterate over NodeListinputs.forEach(element => { console.log(element);});Conclusion
É tudo para obter elementos DOM usando JavaScript. Aprendemos tantos métodos diferentes para aceder aos elementos DOM: usando id attribute, HTML tag name, name attribute, class attribute and CSS selectors. Também discutimos formas de iterar sobre a colecção genérica de elementos devolvidos por estes métodos.
✌️ Como este artigo? Siga @attacomsian no Twitter. Pode também seguir-me no LinkedIn e DEV. Subscreva o RSS Feed.
👋 Se gosta de ler os meus artigos e quer ajudar-me a continuar a criar tutoriais gratuitos, ☕ Compre-me um café (custa $5) .