Cuando trabajamos con un documento HTML es muy más que necesario manipular cada una de las etiquetas en el archivo, es por ello que en éste post les voy a explicar como acceder a un elemento y econtrar los elementos padres e hijos y crear paginas o web apps interactivas.
Acceder a DIV y sus nodos hijos
En el siguiente código HTML, hemos creado una estructura básica que consiste en un contenedor div con el identificador ( id) demodiv y un párrafo dentro de él. La idea es acceder al contenido dentro del div.
<div id="demodiv">
<p>
This is text.
</p>
</div>
Para acceder a los hijos de un elemento div, en específico el contenedor con id demodiv, utilizamos el siguiente código Javascript
const demodiv = document.getElementById("demodiv");
const parent = demodiv.parentNode;
const children = demodiv.childNodes;
Luego con Javascript , utilizamos diferentes propiedades y métodos para interactuar con el DOM y realizar acciones específicas con los elementos escogidos . Con getElementById, obtenemos una referencia al elemento con id demodiv en el DOM. Luego, con parentNode, accedemos al nodo padre de demodiv, lo que nos permite realizar operaciones adicionales en ese nodo. Además, utilizamos childNodes para obtener una lista de los nodos secundarios de demodiv, en este caso es el párrafo.
Hallar todos los hijos de un elemento con Javascript
let hijos = '';
if (demodiv.hasChildNodes()) {
const children = demodiv.childNodes;
children.forEach(child => {
hijos += `has child ${child.nodeName} `;
});
}
console.log(hijos);
En el ejemplo Javascript anterior estamos pidiendo que nos imprima cada uno de los elementos hijo childNodes del elemento div.
El código verifica si el elemento demodiv tiene nodos hijos utilizando el método hasChildNodes(). Si se cumple la condición, se accede a los nodos hijos mediante childNodes. Luego, se itera sobre cada nodo hijo utilizando forEach(), y se concatena una cadena con el nombre de cada nodo hijo al string hijos.
Algo a tomar en cuenta es que los espacios son tomados en cuenta como caracteres.
Código Completo
<html>
<body>
<div id="demodiv">
<p>Este es un texto de muestra</p>
<ul>
<li>Adsense</li>
<li>Meta</li>
<li>Monetizer</li>
</ul>
</div>
<script>
let hijos = '';
if (demodiv.hasChildNodes()) {
const children = demodiv.childNodes;
children.forEach(child => {
hijos += `has child ${child.nodeName} `;
});
}
console.log(hijos);
</script>
</body>
</html>
Cambiar los colores a los nodos hijos de un div
Tenemos el siguiente documento HTMl y queremos acceder al parent node demodiv y después de eso vamos a cambiar el color del texto de los elementos anidados en el div y no los que está fuera de el.
<html>
<body>
<div id="demodiv">
<p>Este es un texto de muestra</p>
<ul>
<li>Adsense</li>
<li>Meta</li>
<li>Monetizer</li>
</ul>
</div>
<script>
const demodiv = document.getElementById('demodiv');
const elementos = demodiv.querySelectorAll('p, li');
elementos.forEach(elemento => {
elemento.style.fontWeight = 'bold';
elemento.style.fontStyle = 'italic';
});
</script>
</body>
</html>
Hay varias técnicas disponibles para acceder a los elementos del documento HTML con Javascript , conocidos como nodos en el DOM. Actualmente, utilizamos versiones estandarizadas del DOM, como DOM Niveles 2 y 3, para acceder a estos nodos. Sin embargo, en el pasado, se utilizaba una técnica no oficial conocida como DOM Nivel 0, que consistía en acceder a los elementos a través del modelo de objetos del navegador. Esta técnica fue introducida por Netscape, la empresa líder de navegadores en ese momento, y ha sido compatible en la mayoría de los navegadores desde entonces. En el DOM Nivel 0, el objeto principal para acceder a los elementos de la página web es el objeto document.
Espero que los ejemplos de javascript mostrados en este blog te ayuden a acceder a un elemento y encontrar los elementos padres e hijos con Javascript. Puedes apoyar el blog compartiendo en redes sociales.