El Modelo de Objetos del Documento (DOM) es una interfaz de programación para los documentos HTML y XML creada 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 a los programas manipular el contenido, la estructura y los estilos del documento.
En este tutorial, aprenderemos a utilizar JavaScript para acceder a diferentes nodos (elementos HTML) en el DOM. Comencemos con el primer método: obtener elementos por ID.
Obtener elemento por ID
El método document de getElementById() toma el ID del elemento como entrada y devuelve un objeto Element que representa el elemento del DOM. Este es un ejemplo:
<div>🦄</div>Ahora bien, así es como podemos obtener el elemento anterior <div> utilizando su ID:
const unicorn = document.getElementById('unicorn');El ID distingue entre mayúsculas y minúsculas y es único en todo el documento HTML. Así que este método siempre devuelve un único elemento. Si no se encuentra ningún elemento coincidente, devuelve null.
Nota: No pongas el signo
#antes de la cadena de ID mientras llamas al métodogetElementById(). Obtendrásnullen lugar del elemento, y entonces podrías preguntarte durante horas qué ha ido mal.
Obtener elementos por nombre de etiqueta
El método getElementsByTagName() se utiliza para acceder a múltiples elementos. Toma el nombre de la etiqueta como entrada y devuelve todos los elementos del 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 elementos <p>:
const animals = document.getElementsByTagName('p');Este método busca sólo un nombre de etiqueta a la vez. Pero si pasas * como nombre de etiqueta, obtendrás todos los elementos del DOM:
const allNodes = document.getElementsByTagName('*');Obtener elementos por nombre
El método getElementsByName() se utiliza para obtener una colección de elementos por su atributo name, 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');Nota: A diferencia del atributo
id, que debe ser único, varios elementos HTML pueden tener el mismo atributoname. Por esogetElementsByName()devuelve una colección de nodos.
Obtener elementos por nombre de clase
¿Quieres usar el atributo class para obtener una lista de elementos coincidentes? Puedes usar el método getElementsByClassName(), sólo tienes que pasarle un nombre de clase (sin .) y te devolverá un HTMLCollection de todos los elementos del DOM que tengan el nombre de clase dado:
<div class="bird owl">🦉</div><div class="bird">🐦</div><div class="bird eagle">🦅</div><div class="animal cat">🐱</div>Obtengamos todos los bird:
const birds = document.getElementsByClassName('bird');Este método también acepta múltiples nombres de clase separados por espacios. Obtengamos todos los elementos que tengan las dos clases bird y eagle:
const eagle = document.getElementsByClassName('bird eagle');Selector de consulta
El método querySelector() es uno de los dos métodos modernos de JavaScript que permiten obtener elementos del DOM, basados en selectores CSS. Sólo tienes que pasar el selector CSS y obtendrás el primer elemento que coincida con el selector especificado. Si no existen coincidencias, devuelve null. Este es un ejemplo:
const email = document.querySelector('#signup input');Consultar Selector Todo
¿Quieres seleccionar una lista de elementos que coincidan con los selectores especificados? Utilice el método querySelectorAll() en su lugar. Este método toma varios selectores CSS como entrada y devuelve un NodeList – una lista de elementos del 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); // 4Encadenamiento de funciones
También puedes encadenar varias funciones para buscar elementos dentro de otro elemento. Primero tienes que seleccionar un solo elemento usando getElementById() o querySelector(), y luego encadenar otra función para buscar dentro:
<form> <input type="text" name="email"> <input type="tel" name="phone"> <input type="date" name="date-of-birth"></form>Obtener todos los elementos input, dentro de un elemento que tenga el ID signup:
const inputs = document.getElementById('signup').getElementsByTagName('input');// ORconst inputs = document.querySelector('#signup').querySelectorAll('input');Recorrer HTMLCollection y NodeList
La mayoría de los métodos que hemos comentado anteriormente (excepto getElementById() y querySelector()) devuelven múltiples elementos como un HTMLCollection o un NodeList.
El HTMLCollection no es un array sino una colección genérica de elementos. Así que no es posible iterar sobre él con forEach() o map(). Sin embargo, podemos convertirlo en un array real y luego iterar utilizando el método Array.from():
const inputs = document.getElementById('signup').getElementsByTagName('input');// iterate over HTMLCollectionArray.from(inputs).forEach(element => { console.log(element);});Aunque NodeList tampoco es un array, pero sí proporciona el método forEach() para iterar sobre los elementos:
const inputs = document.querySelector('#signup').querySelectorAll('input');//iterate over NodeListinputs.forEach(element => { console.log(element);});Conclusión
Eso es todo para obtener elementos del DOM usando JavaScript. Hemos aprendido muchos métodos diferentes para acceder a los elementos del DOM: usando el atributo id, el nombre de la etiqueta HTML, el atributo name, el atributo class y los selectores CSS. También hablamos de las formas de iterar sobre la colección genérica de elementos devueltos por estos métodos.
¿Te gusta este artículo? Sigue a @attacomsian en Twitter. También puedes seguirme en LinkedIn y en DEV. Suscríbete al feed RSS.
👋 Si te gusta leer mis artículos y quieres apoyarme para seguir creando tutoriales gratuitos, ☕ Cómprame un café (cuesta 5$) .