Cómo seleccionar elementos DOM usando JavaScript

El modelo de objeto de documento (DOM) es una interfaz de programación para documentos HTML y XML creados por el navegador una vez que se carga el documento. Una página web es esencialmente un documento representado por el DOM como nodos y objetos. Permite que los programas manipulen el contenido, la estructura y los estilos del documento.

En este tutorial, aprenderemos a usar JavaScript para acceder a diferentes nodos (elementos HTML) en el DOM. Comencemos con el primer método:obtener el elemento por ID.

Obtener elemento por ID

El document getElementById() de El método toma el ID del elemento como entrada y devuelve un Element objeto que representa el elemento DOM. Aquí hay un ejemplo:

<div id="unicorn">🦄</div>

Ahora, así es como podemos obtener el <div> anterior elemento usando su ID:

const unicorn = document.getElementById('unicorn');

El ID distingue entre mayúsculas y minúsculas y único en todo el documento HTML. Entonces este método siempre devuelve un solo elemento. Si no se encuentra ningún elemento coincidente, devuelve null .

Obtener elementos por nombre de etiqueta

El getElementsByTagName() El método se utiliza para acceder a múltiples elementos. Toma el nombre de la etiqueta como entrada y devuelve todos los elementos DOM que coinciden con el nombre de la etiqueta como HTMLCollection :

<p>🐱</p>
<p>🐰</p>
<p>🐯</p>
<p>🐧</p>

Código JavaScript para acceder a todos los <p> elementos:

const animals = document.getElementsByTagName('p');

Este método busca solo un nombre de etiqueta a la vez. Pero si pasas * como nombre de la etiqueta, obtendrá todos los elementos en el DOM:

const allNodes = document.getElementsByTagName('*');

Obtener elementos por nombre

El getElementsByName() El método se usa para obtener una colección de elementos por su name atributo y devuelve un objeto NodeList:

<input type="text" name="email">
<input type="tel" name="phone">
<input type="date" name="dob">

Obtengamos todos los elementos con el nombre email :

const emails = document.getElementsByName('email');

Obtener elementos por nombre de clase

Quiere usar class atributo para obtener una lista de elementos coincidentes? Puedes usar getElementsByClassName() método, simplemente pásele un nombre de clase (sin . ) y devolverá un HTMLCollection de todos los elementos DOM que tienen el nombre de clase dado:

<div class="bird owl">🦉</div>
<div class="bird">🐦</div>
<div class="bird eagle">🦅</div>
<div class="animal cat">🐱</div>

Consigamos todos los bird 's:

const birds = document.getElementsByClassName('bird');

Este método también acepta varios nombres de clase separados por espacios. Obtengamos todos los elementos que tienen tanto el bird y eagle clases:

const eagle = document.getElementsByClassName('bird eagle');

Selector de consultas

El querySelector() El método es uno de los dos métodos modernos de JavaScript que le permiten obtener elementos de DOM, en función de los selectores de CSS. Simplemente pase el selector CSS y obtendrá el primer elemento que coincida con el selector especificado. Si no existen coincidencias, devuelve null . Aquí hay un ejemplo:

const email = document.querySelector('#signup input[name="email"]');

Selector de consulta Todo

¿Quiere seleccionar una lista de elementos que coincidan con los selectores especificados? Utilice querySelectorAll() método en su lugar. Este método toma múltiples selectores CSS como entrada y devuelve una NodeList, una lista de elementos DOM que coinciden con los selectores dados. Seleccionemos todos los elementos con una clase de bird o animal del marcado HTML anterior:

const elems = document.querySelectorAll('.bird, .animal');
console.log(elems.length); // 4

Encadenamiento de funciones

También puede encadenar varias funciones para buscar elementos dentro de otro elemento. Primero debe seleccionar un solo elemento usando getElementById() o querySelector() y luego encadene otra función para buscar dentro:

<form id="signup">
    <input type="text" name="email">
    <input type="tel" name="phone">
    <input type="date" name="date-of-birth">
</form>

Consigue todos los input elementos, dentro de un elemento que tiene el ID signup :

const inputs = document.getElementById('signup').getElementsByTagName('input');
// OR
const inputs = document.querySelector('#signup').querySelectorAll('input');

Recorriendo HTMLCollection y NodeList

La mayoría de los métodos que discutimos anteriormente (excepto getElementById() y querySelector() ) devuelve varios elementos como HTMLCollection o un NodeList .

El HTMLCollection no es una matriz sino una colección genérica de elementos. Por lo tanto, no es posible iterar sobre él con forEach() o map() . Sin embargo, podemos convertirlo en una matriz real y luego iterar usando Array.from() método:

const inputs = document.getElementById('signup').getElementsByTagName('input');
// iterate over HTMLCollection
Array.from(inputs).forEach(element => {
    console.log(element);
});

Aunque NodeList tampoco es una matriz, pero proporciona forEach() método para iterar sobre los elementos:

const inputs = document.querySelector('#signup').querySelectorAll('input');
//iterate over NodeList
inputs.forEach(element => {
    console.log(element);
});

Conclusión

Eso es todo para obtener elementos DOM usando JavaScript. Hemos aprendido tantos métodos diferentes para acceder a los elementos DOM:usando id atributo, nombre de etiqueta HTML, name atributo, class selectores de atributo y CSS. También discutimos formas de iterar sobre la colección genérica de elementos devueltos por estos métodos.