2.1 Métodos para acceder a los elementos
Navegar por el DOM (Document Object Model) es una tarea importante cuando trabajas con documentos web. JavaScript ofrece muchos métodos para buscar y acceder a los elementos del documento. Estos métodos permiten a los desarrolladores encontrar fácilmente los elementos necesarios y manipularlos.
1. Método getElementById()
El método getElementById() devuelve un elemento que tiene un atributo id con el valor especificado. Es uno de los métodos más simples y frecuentemente utilizados.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id="content">This is the content</div>
<script>
const contentDiv = document.getElementById('content');
console.log(contentDiv.textContent); // Mostrará: This is the content
</script>
</body>
</html>
2. Método getElementsByClassName()
El método getElementsByClassName() devuelve una colección de todos los elementos que tienen la clase especificada. La colección es "viva", lo que significa que se actualiza automáticamente cuando el DOM cambia.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p class="text">Paragraph 1</p>
<p class="text">Paragraph 2</p>
<p class="text">Paragraph 3</p>
<script>
const paragraphs = document.getElementsByClassName('text');
console.log(paragraphs.length); // Mostrará: 3
</script>
</body>
</html>
3. Método getElementsByTagName()
El método getElementsByTagName() devuelve una colección de todos los elementos con el tag especificado. Esta colección también es "viva".
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<script>
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length); // Mostrará: 3
</script>
</body>
</html>
4. Método querySelector()
El método querySelector() devuelve el primer elemento que coincide con el selector CSS especificado. Es un método muy poderoso y flexible para buscar elementos.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div class="container">
<p>Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<script>
const highlightedParagraph = document.querySelector('.highlight');
console.log(highlightedParagraph.textContent); // Mostrará: Paragraph 2
</script>
</body>
</html>
5. Método querySelectorAll()
El método querySelectorAll() devuelve una colección estática (no cambiante) de todos los elementos que coinciden con el selector CSS especificado.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div class="container">
<p>Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<script>
const paragraphs = document.querySelectorAll('.container p');
console.log(paragraphs.length); // Mostrará: 3
</script>
</body>
</html>
2.2 Navegación por los nodos
El DOM también proporciona métodos para navegar por los nodos relativos al elemento actual.
1. Propiedad parentNode
La propiedad parentNode devuelve el nodo padre del nodo actual.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id="container">
<p>Paragraph</p>
</div>
<script>
const paragraph = document.querySelector('p');
const parent = paragraph.parentNode;
console.log(parent.id); // Mostrará: container
</script>
</body>
</html>
2. Propiedad childNodes
La propiedad childNodes devuelve una colección de todos los nodos hijos del nodo actual, incluyendo los nodos de texto.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const children = list.childNodes;
console.log(children.length); // Mostrará el número total de nodos hijos, incluyendo los de texto
</script>
</body>
</html>
Quizás todavía te preguntas por qué el resultado es 7?
Como se mencionó antes, la propiedad childNodes devuelve una colección de todos los nodos hijos del nodo actual, incluyendo los nodos de texto (espacios, caracteres, nuevas líneas, etc.). La estructura de HTML contiene espacios y nuevas líneas entre los elementos <li>, que también se consideran nodos separados.
En el ejemplo anterior, entre la etiqueta <ul> y el primer <li> hay una nueva línea (y posiblemente espacio) — esto se considera un nodo de texto. Lo mismo ocurre entre todos los <li> y al final del último <li>. Por eso, en lugar de tres elementos de lista, childNodes incluye estos nodos de texto, lo que lleva al número total — 7.
Para obtener solo los elementos (ignorando los nodos de texto), se puede usar la propiedad children, que devuelve solo los elementos hijos:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const children = list.children;
console.log(children.length); // 3
</script>
</body>
</html>
3. Propiedades firstChild y lastChild
Las propiedades firstChild y lastChild devuelven el primer y último nodo hijo respectivamente.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const first = list.firstChild;
const last = list.lastChild;
console.log(first.textContent);
console.log(last.textContent);
</script>
</body>
</html>
Quizás te sorprenda que la consola no muestre nada. Sin embargo, esto no es cierto. Se mostraron el último nodo hijo Item 1 y Item 3 (una nueva línea). Si te has quedado atrapado en este punto, deberías revisar nuevamente el punto 2 Propiedad childNodes
4. Propiedades nextSibling y previousSibling
Las propiedades nextSibling y previousSibling devuelven los nodos siguiente y anterior en el mismo nivel de jerarquía.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const secondItem = document.querySelector('li:nth-child(2)');
const next = secondItem.nextSibling;
const prev = secondItem.previousSibling;
console.log(next.textContent); // Mostrará: Item 3
console.log(prev.textContent); // Mostrará: Item 1 (si se omiten los nodos de texto)
</script>
</body>
</html>
2.3 Navegación por los nodos de los elementos
1. Propiedades nextElementSibling y previousElementSibling
Estas propiedades devuelven los nodos de elementos siguiente y anterior (ignorando los de texto y comentarios).
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const secondItem = document.querySelector('li:nth-child(2)');
const next = secondItem.nextElementSibling;
const prev = secondItem.previousElementSibling;
console.log(next.textContent); // Mostrará: Item 3
console.log(prev.textContent); // Mostrará: Item 1
</script>
</body>
</html>
2. Propiedades firstElementChild y lastElementChild
Estas propiedades devuelven los primeros y últimos nodos de elementos hijos (ignorando los de texto y comentarios).
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const first = list.firstElementChild;
const last = list.lastElementChild;
console.log(first.textContent); // Mostrará: Item 1
console.log(last.textContent); // Mostrará: Item 3
</script>
</body>
</html>
GO TO FULL VERSION