如何检查一个DOM元素是否是另一个DOM元素的子元素?有什么内置的方法吗?例如，像这样:
if (element1.hasDescendant(element2))
or
if (element2.hasParent(element1))
如果没有，有什么想法如何做到这一点?它还需要跨浏览器。我还应该提到，子对象可以嵌套在父对象的许多层之下。
当前回答
我遇到了一段很棒的代码，用来检查一个元素是否是另一个元素的子元素。我必须使用这个，因为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;
}
其他回答
考虑使用nearest ('.selector')
如果元素和它的任何祖先都不匹配选择器，则返回null。或者返回找到的元素
更新:现在有一个本地的方式来实现这一点。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不支持。
另一个没有提到的解决方案:
例子
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
}
