如何检查在Javascript中，如果一个元素包含在另一个

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

if (element1.hasDescendant(element2))

if (element2.hasParent(element1))

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

当前回答

另一个没有提到的解决方案:

例子

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

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

元素是否为直接子元素并不重要，它在任何深度都可以工作。

或者，使用.contains()方法:

例子

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

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

2015-01-19 03:51:36

其他回答

试试这个:

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

2018-09-02 10:10:45

我遇到了一段很棒的代码，用来检查一个元素是否是另一个元素的子元素。我必须使用这个，因为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;
}

2013-06-27 08:01:01

考虑使用nearest ('.selector')

如果元素和它的任何祖先都不匹配选择器，则返回null。或者返回找到的元素

2022-03-31 13:28:51

您可以使用contains方法

Var result = parent.contains(child);

或者你可以尝试使用compareDocumentPosition()

var result = nodeA.compareDocumentPosition(nodeB);

最后一个更强大:它返回一个位掩码作为结果。

2016-12-19 23:46:31

TL;DR:图书馆

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