Cómo verificar en Javascript si un elemento está contenido dentro de otro

¿Cómo puedo verificar si un elemento DOM es hijo de otro elemento DOM? ¿Hay algún método incorporado para esto? Por ejemplo, algo como:

if (element1.hasDescendant(element2)) 

o

if (element2.hasParent(element1)) 

Si no, ¿alguna idea de cómo hacer esto? También debe ser un navegador cruzado. También debo mencionar que el niño podría estar anidado muchos niveles por debajo del padre.

Actualización: ahora hay una forma nativa de lograr esto. Node.contains(). Mencionado en comentarios y respuestas a continuación también.

Vieja respuesta:

Usar la parentNodepropiedad debería funcionar. También es bastante seguro desde el punto de vista del navegador cruzado. Si se sabe que la relación tiene un nivel de profundidad, puede verificarla simplemente:

if (element2.parentNode == element1) { ... }

Si el hijo puede anidarse arbitrariamente en el interior del padre, puede usar una función similar a la siguiente para probar la relación:

function isDescendant(parent, child) {
     var node = child.parentNode;
     while (node != null) {
         if (node == parent) {
             return true;
         }
         node = node.parentNode;
     }
     return false;
}

Debe usarlo Node.contains, ya que ahora es estándar y está disponible en todos los navegadores.

https://developer.mozilla.org/en-US/docs/Web/API/Node.contains

Solo tenía que compartir 'el mío'.

Aunque conceptualmente es lo mismo que la respuesta de Asaph (que se beneficia de la misma compatibilidad entre navegadores, incluso IE6), es mucho más pequeño y resulta útil cuando el tamaño es muy alto y / o cuando no se necesita con tanta frecuencia.

function childOf(/*child node*/c, /*parent node*/p){ //returns boolean
  while((c=c.parentNode)&&c!==p); 
  return !!c; 
}

..o como una línea (¡ solo 64 caracteres !):

function childOf(c,p){while((c=c.parentNode)&&c!==p);return !!c}

y jsfiddle aquí .

Uso:
childOf(child, parent) devuelve booleanotrue| false.

Explicación: se
while evalúa siempre que la condición while se evalúe comotrue.
El&&operador (AND) devuelve este booleano verdadero / falso después de evaluar el lado izquierdo y el lado derecho, pero solo si el lado izquierdo era verdadero ( left-hand && right-hand) .

El lado izquierdo (de &&) es: (c=c.parentNode).
Esto asignará primero el parentNodede ca cy luego el operador AND evaluará el resultado ccomo un booleano.
Como parentNoderegresa nullsi no queda ningún padre y nullse convierte a false, el ciclo while se detendrá correctamente cuando no haya más padres.

El lado derecho (de &&) es: c!==p.
El !==operador de comparación ' no es exactamente igual a'. Entonces, si el padre del niño no es el padre (usted especificó) se evalúa true, pero si el padre del niño es el padre, entonces se evalúa false.
Entonces, si se c!==p evalúa como falso, el &&operador regresa falsecomo la condición while y el ciclo while se detiene. (Tenga en cuenta que no es necesario un cuerpo de tiempo y ;se requiere el punto y coma de cierre )

Entonces, cuando finaliza el ciclo while, ces un nodo (no null) cuando encuentra un padre O lo es null(cuando el ciclo se ejecuta hasta el final sin encontrar una coincidencia).

Por lo tanto, simplemente returnese hecho (convertido como valor booleano, en lugar del nodo) con return !!c;:: el !( NOToperador) invierte un valor booleano (se trueconvierte falsey viceversa).
!cconvierte c(nodo o nulo) a un valor booleano antes de que pueda invertir ese valor. Entonces, agregar un segundo !( !!c) convierte este falso de nuevo en verdadero (razón por la cual un doble!! menudo se usa para 'convertir cualquier cosa a booleano').

Extra:
El cuerpo / carga útil de la función es tan pequeña que, dependiendo del caso (como cuando no se usa con frecuencia y aparece solo una vez en el código), uno podría incluso se omitir la función (ajuste) y solo usar el ciclo while:

var a=document.getElementById('child'),
    b=document.getElementById('parent'),
    c;

c=a; while((c=c.parentNode)&&c!==b); //c=!!c;

if(!!c){ //`if(c)` if `c=!!c;` was used after while-loop above
    //do stuff
}

en vez de:

var a=document.getElementById('child'),
    b=document.getElementById('parent'),
    c;

function childOf(c,p){while((c=c.parentNode)&&c!==p);return !!c}

c=childOf(a, b);    

if(c){ 
    //do stuff
}

Otra solución que no se mencionó:

Ejemplo aquí

var parent = document.querySelector('.parent');

if (parent.querySelector('.child') !== null) {
    // .. it's a child
}

No importa si el elemento es un hijo directo, funcionará a cualquier profundidad.

Alternativamente, usando el .contains()método :

Ejemplo aquí

var parent = document.querySelector('.parent'),
    child = document.querySelector('.child');

if (parent.contains(child)) {
    // .. it's a child
}

Eche un vistazo al Nodo # compareDocumentPosition .

function isDescendant(ancestor,descendant){
    return ancestor.compareDocumentPosition(descendant) & 
        Node.DOCUMENT_POSITION_CONTAINS;
}

function isAncestor(descendant,ancestor){
    return descendant.compareDocumentPosition(ancestor) & 
        Node.DOCUMENT_POSITION_CONTAINED_BY;
}

Otras relaciones incluyen DOCUMENT_POSITION_DISCONNECTED, DOCUMENT_POSITION_PRECEDINGy DOCUMENT_POSITION_FOLLOWING.

No es compatible con IE <= 8.

Puedes usar el método contiene

var result = parent.contains(child);

o puedes intentar usar compareDocumentPosition ()

var result = nodeA.compareDocumentPosition(nodeB);

El último es más poderoso: devuelve una máscara de bits como resultado.

Me encontré con un maravilloso código para verificar si un elemento es hijo de otro elemento. Tengo que usar esto porque IE no admite el .containsmétodo del elemento. Espero que esto ayude a otros también.

A continuación se muestra la función:

function isChildOf(childObject, containerObject) {
  var returnValue = false;
  var currentObject;

  if (typeof containerObject === 'string') {
    containerObject = document.getElementById(containerObject);
  }
  if (typeof childObject === 'string') {
    childObject = document.getElementById(childObject);
  }

  currentObject = childObject.parentNode;

  while (currentObject !== undefined) {
    if (currentObject === document.body) {
      break;
    }

    if (currentObject.id == containerObject.id) {
      returnValue = true;
      break;
    }

    // Move up the hierarchy
    currentObject = currentObject.parentNode;
  }

  return returnValue;
}

prueba este:

x = document.getElementById("td35");
if (x.childElementCount > 0) {
    x = document.getElementById("LastRow");
    x.style.display = "block";
}
else {
    x = document.getElementById("LastRow");
    x.style.display = "none";
}

Recientemente me encontré con esta función que podría hacer:

Node.compareDocumentPosition ()