Como verificar no Javascript se um elemento está contido em outro

Como posso verificar se um elemento DOM é filho de outro elemento DOM? Existem métodos integrados para isso? Por exemplo, algo como:

if (element1.hasDescendant(element2)) 

ou

if (element2.hasParent(element1)) 

Se não, então alguma idéia de como fazer isso? Ele também precisa ser entre navegadores. Devo também mencionar que a criança pode estar aninhada muitos níveis abaixo do pai.

Atualização: Agora existe uma maneira nativa de conseguir isso. Node.contains(). Mencionado no comentário e respostas abaixo também.

Resposta antiga:

Usar a parentNodepropriedade deve funcionar. Também é bastante seguro do ponto de vista entre navegadores. Se o relacionamento é conhecido por ter um nível de profundidade, você pode verificá-lo simplesmente:

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

Se o filho puder ser aninhado arbitrariamente no fundo do pai, você poderá usar uma função semelhante à seguinte para testar o relacionamento:

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

Você deveria usar Node.contains , pois agora é padrão e está disponível em todos os navegadores.

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

Eu apenas tive que compartilhar 'meu'.

Embora conceitualmente seja o mesmo que a resposta do Asaph (beneficiando da mesma compatibilidade entre navegadores, até o IE6), é muito menor e é útil quando o tamanho é alto e / ou quando não é necessário com tanta frequência.

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

..ou como one-liner ( apenas 64 caracteres !):

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

e jsfiddle aqui .

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

Explicação:
while avalia enquanto a condição while for avaliadatrue.
O&&operador (AND) retorna esse booleano verdadeiro / falso após avaliar o lado esquerdo e o lado direito, mas apenas se o lado esquerdo for verdadeiro ( left-hand && right-hand) .

O lado esquerdo (de &&) é: (c=c.parentNode).
Isso primeiro atribuirá o parentNodede ae, cem cseguida, o operador AND avaliará o resultado ccomo um booleano.
Como parentNoderetorna nullse não houver nenhum pai sobrando e nullfor convertido para false, o loop while será interrompido corretamente quando não houver mais pais.

O lado direito (de &&) é: c!==p.
O !==operador de comparação é ' não exatamente igual a'. Portanto, se o pai da criança não é o pai (você especificou), ele avalia true, mas se o pai da criança é o pai, ele avalia false.
Portanto, se for c!==p avaliado como falso, o &&operador retornará falsequando a condição while e o loop while forem interrompidos. (Observe que não há necessidade de um corpo while e o ;ponto e vírgula de fechamento é necessário.)

Portanto, quando o loop while termina, cé um nó (não null) quando ele encontra um pai OU null(quando o loop é executado até o final sem encontrar uma correspondência).

Portanto, simplesmente returnesse fato (convertido como valor booleano, em vez de nó) com return !!c;:: the !( NOToperator) inverte um valor booleano ( truetorna false- se e vice-versa).
!cconverte c(nó ou nulo) em um booleano antes de poder inverter esse valor. Portanto, adicionar um segundo !( !!c) converte esse falso de volta em verdadeiro (e é por isso que um duplo !!é frequentemente usado para 'converter qualquer coisa em booleano').

Extra:
O corpo / carga útil da função é tão pequeno que, dependendo do caso (como quando não é usado frequentemente e aparece apenas uma vez no código), pode-se até omitir a função (quebra automática) e usar o loop 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
}

ao invés 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
}

Outra solução que não foi mencionada:

Exemplo Aqui

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

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

Não importa se o elemento é um filho direto, ele funcionará a qualquer profundidade.

Como alternativa, usando o .contains()método :

Exemplo Aqui

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

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

Dê uma olhada no Node # 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;
}

Outros relacionamentos incluem DOCUMENT_POSITION_DISCONNECTED, DOCUMENT_POSITION_PRECEDINGeDOCUMENT_POSITION_FOLLOWING .

Não suportado no IE <= 8.

Você pode usar o método contains

var result = parent.contains(child);

ou você pode tentar usar compareDocumentPosition ()

var result = nodeA.compareDocumentPosition(nodeB);

O último é mais poderoso: retorna uma máscara de bit como resultado.

Me deparei com um maravilhoso pedaço de código para verificar se um elemento é ou não filho de outro elemento. Eu tenho que usar isso porque o IE não suporta o.contains método elemento. Espero que isso ajude outras pessoas também.

Abaixo está a função:

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;
}

tente 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";
}

Recentemente, deparei-me com esta função que pode fazer:

Node.compareDocumentPosition ()