Parentescos del DOM - Ejemplos

Nodo Padre (Parent Node)

• Elemento 1
• Elemento 2

Code

<div class="example-box">
    <h2>Nodo Padre (Parent Node)</h2>
    <ul id="lista-parent">
        <li>Elemento 1</li>
        <li>Elemento 2</li>
    </ul>
    <button onclick="mostrarPadre()">Mostrar Nodo Padre</button>
</div>

<script>
    // Ejemplo Nodo Padre
    function mostrarPadre() {
        const lista = document.getElementById("lista-parent");
        alert("El nodo padre es: " + lista.parentNode.nodeName);
    }
</script>    

Nodo Hijo (Child Node)

• Elemento A
• Elemento B

Code

<div class="example-box">
    <h2>Nodo Hijo (Child Node)</h2>
    <ul id="lista-hijos">
        <li>Elemento A</li>
        <li>Elemento B</li>
    </ul>
    <button onclick="mostrarPrimerHijo()">Mostrar Primer Hijo</button>
</div>

<script>
    // Ejemplo Nodo Hijo
    function mostrarPrimerHijo() {
        const lista = document.getElementById("lista-hijos");
        alert("El primer hijo es: " + lista.firstElementChild.innerHTML);
    }
</script>            

Nodo Hermano (Sibling Node)

• Hermano 1
• Hermano 2

Code

    <ul id="lista-hermanos">
        <li>Hermano 1</li>
        <li>Hermano 2</li>
    </ul>
    <button onclick="mostrarHermano()">Mostrar Siguiente Hermano</button>
    
    <script>
    // Ejemplo Nodo Hermano
    function mostrarHermano() {
        const primerElemento = document.querySelector("#lista-hermanos li");
        const siguienteHermano = primerElemento.nextElementSibling;
        alert("El siguiente hermano es: " + siguienteHermano.innerHTML);
    }
    </script>               

Ancestros (Ancestors)

Code

 <ul>
   <li id="elemento-ancestro">Elemento con Ancestros</li>
</ul>
    </div>
    <button onclick="mostrarAncestro()">Mostrar Primer Ancestro</button> 
    
<script>
    // Ejemplo Ancestros
    function mostrarAncestro() {
        const elemento = document.getElementById("elemento-ancestro");
        const ancestro = elemento.closest("div");
        alert("El primer ancestro es: " + ancestro.nodeName);
    }
</script>                

Descendientes (Descendants)

Code

    <div id="contenedor-descendientes">
        <ul>
            <li>Descendiente 1</li>
            <li>Descendiente 2</li>
        </ul>
    </div>
    <button onclick="mostrarDescendientes()">Mostrar Descendientes</button>
<script>    
    // Ejemplo Descendientes
    function mostrarDescendientes() {
        const contenedor = document.getElementById("contenedor-descendientes");
        const descendientes = contenedor.querySelectorAll("li");
        let mensaje = "Descendientes encontrados:\n";
        descendientes.forEach(desc => {
            mensaje += "- " + desc.innerHTML + "\n";
        });
        alert(mensaje);
    }
</script>               

Nodo Raíz (Root Node)

Code

<div class="example-box">
    <h2>Nodo Raíz (Root Node)</h2>
    <button onclick="mostrarRaiz()">Mostrar Nodo Raíz</button>
    
<script>    
    // Ejemplo Nodo Raíz
    function mostrarRaiz() {
        const nodoRaiz = document.documentElement;
        alert("El nodo raíz es: " + nodoRaiz.nodeName);
    }
</script>