¿Cómo verificar si un elemento es hijo de un padre usando JavaScript?

Método 1: usar el método Node.contains()
El método Node.contains() se usa para verificar si un Node dado es descendiente de otro Node en cualquier nivel. El descendiente puede ser directamente el padre del niño o más arriba en la string. Devuelve un valor booleano del resultado.

Este método se usa en el elemento principal y el parámetro pasado en el método es el elemento secundario que se verificará. Devuelve verdadero si el hijo es descendiente del padre. Esto significa que el elemento es un hijo del padre.

Sintaxis:

function checkParent(parent, child) {
    if (parent.contains(child))
        return true;
        return false;
}

Ejemplo:

<html>
  
<head>
    <title>
        How to Check if an element is a 
      child of a parent using JavaScript?
    </title>
    <style>
        .parent,
        .child,
        .non-child {
            border: 2px solid;
            padding: 5px;
            margin: 5px;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>
      How to Check if an element is
      a child of a parent using JavaScript?
    </b>
    <div class="parent">This is the parent div.
        <div class="child">This is the child div.
        </div>
    </div>
    <div class="non-child">
        This is outside the parent div.
    </div>
    <p>Click on the button to check if the 
      elements are child of a parent.</p>
    <p>Child has parent:
        <span class="output-child"></span>
    </p>
    <p>Non-Child has parent:
        <span class="output-non-child"></span>
    </p>
  
    <button onclick="checkElements()">
        Check elements
    </button>
    <script>
        function checkParent(parent, child) {
            if (parent.contains(child))
                return true;
            return false;
        }
  
        function checkElements() {
            parent = document.querySelector('.parent');
            child = document.querySelector('.child');
            non_child = document.querySelector('.non-child');
  
            output_child = checkParent(parent, child);
            output_non_child = checkParent(parent, non_child);
  
            document.querySelector('.output-child').textContent =
                output_child;
            document.querySelector('.output-non-child').textContent =
                output_non_child;
        }
    </script>
</body>
  
</html>

Producción:

Antes de hacer clic en el botón:
Después de hacer clic en el botón:

Método 2: Pasar por los padres del
elemento secundario Se puede verificar que el hijo tenga el padre dado mediante un bucle continuo a través de los padres del elemento uno por uno. El padre de cada Node se encuentra accediendo a la propiedad parentNode que devuelve el Node padre, si lo hay.

Se utiliza un ciclo while hasta que se encuentra el padre requerido o no existen más elementos padre. Dentro de este ciclo, el Node principal de cada elemento se encuentra en cada iteración. Si el Node padre coincide con el dado en cualquier iteración, significa que el elemento es hijo del padre.

Sintaxis:

function checkParent(parent, child) {
    let node = child.parentNode;
  
    // keep iterating unless null
    while (node != null) {
        if (node == parent) {
            return true;
        }
     node = node.parentNode;
     }
   return false;
}

Ejemplo:

<html>
  
<head>
    <title>
        How to Check if an element is a 
      child of a parent using JavaScript?
    </title>
    <style>
        .parent,
        .child,
        .non-child {
            border: 2px solid;
            padding: 5px;
            margin: 5px;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>
      How to Check if an element is
      a child of a parent using JavaScript?
    </b>
    <div class="parent">This is the parent div.
        <div class="child">This is the child div.
        </div>
    </div>
    <div class="non-child">
        This is outside the parent div.
    </div>
    <p>Click on the button to check if 
      the elements are child of a parent.</p>
    <p>Child has parent:
        <span class="output-child"></span>
    </p>
    <p>Non-Child has parent:
        <span class="output-non-child"></span>
    </p>
  
    <button onclick="checkElements()">
        Check elements
    </button>
    <script>
        function checkParent(parent, child) {
            let node = child.parentNode;
  
            // keep iterating unless null
            while (node != null) {
                if (node == parent) {
                    return true;
                }
                node = node.parentNode;
            }
            return false;
        }
  
        function checkElements() {
            parent = document.querySelector('.parent');
            child = document.querySelector('.child');
            non_child = document.querySelector('.non-child');
  
            output_child = checkParent(parent, child);
            output_non_child = checkParent(parent, non_child);
  
            document.querySelector('.output-child').textContent =
                output_child;
            document.querySelector('.output-non-child').textContent =
                output_non_child;
        }
    </script>
</body>
  
</html>

Producción:

Antes de hacer clic en el botón:
Después de hacer clic en el botón:

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta