如何检查一个DOM元素是否是另一个DOM元素的子元素?有什么内置的方法吗?例如,像这样:

if (element1.hasDescendant(element2)) 

or

if (element2.hasParent(element1)) 

如果没有,有什么想法如何做到这一点?它还需要跨浏览器。我还应该提到,子对象可以嵌套在父对象的许多层之下。


当前回答

您应该使用Node。包含,因为它现在是标准的,在所有浏览器中都可用。

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

其他回答

更新:现在有一个本地的方式来实现这一点。Node.contains()。在评论和下面的回答中也提到了。

旧的回答:

使用parentNode属性应该可以工作。从跨浏览器的角度来看,它也相当安全。如果你知道这段关系有一个层次的深度,你可以简单地检查它:

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

如果子对象可以嵌套在父对象的任意深处,你可以使用类似于下面的函数来测试这种关系:

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

我遇到了一段很棒的代码,用来检查一个元素是否是另一个元素的子元素。我必须使用这个,因为IE不支持.contains element方法。希望这也能帮助到其他人。

函数如下:

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

看一下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;
}

其他关系包括DOCUMENT_POSITION_DISCONNECTED, document_position_precedand document_position_follows。

IE<=8不支持。

TL;DR:图书馆

我建议使用类似dom-helpers的东西,它是由react团队作为常规JS库编写的。

在它们的contains实现中,你会看到一个基于node# contains的实现,并带有一个node# compareDocumentPosition回退。

不支持非常老的浏览器,例如IE <9,我觉得这是可以接受的。

这个答案包含了上面的问题,但是我建议你不要循环。

试试这个:

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