如何判断一个元素是否是JavaScript中另一个元素的子元素（没有jQuery）？

Question

如果我有2个HTML元素，我怎么能轻易判断1是否是另一个的孩子？

var parent = document.getElementById('shapes');
var child = document.getElementById('star');

child.getParentElement()等元素上是否有任何类型的函数可以与child.getParentElement() == parent进行比较？

我理解parent.children给了我一系列孩子，所以我想我可以使用for循环并将每个孩子与child进行比较。有没有更简单的单功能方法呢？

没有jQuery或其他库。

Answer 1

检查孩子的.parentNode。

if (child.parentNode === parent) {...

Answer 2

parentNode内有element个属性，因此您可以执行以下操作：

var parent = document.getElementById('shapes');
var child = document.getElementById('star');

var isChild = false;
var current = child;
while(current = current.parentNode)
{
    if(current == parent)
        isChild = true;
}

如果parent元素位于DOM中child元素之上的某个位置，它将返回true - 不仅仅是当它直接作为其父元素时。

Answer 3

如果您只需要来自父元素的直接子元素，请查看以下示例：

<div id="div1">
    Parent
    <div id="div2">
        Child
        <div id="div3-1">
            N-child 1
        </div>
        <div id="div3-2">
            N-child 2
        </div>
    </div>
</div>
<input type="button" id="btn-action" value="Run" />
<div id="result"></div>

JavaScript的：

document.getElementById("btn-action").addEventListener("click",function(e) {
    var div1 = document.getElementById("div1"),
        div2 = document.getElementById("div2"),
        nchild1 = document.getElementById("div3-1"),
        nchild2 = document.getElementById("div3-2");

    document.getElementById("result").innerHTML =
        "<br/>div2 is child of div1? - " + fnIsChild(div1, div2) + 
        "<br/>div3-1 is child of div1? - " + fnIsChild(div1, nchild1) + 
        "<br/>div3-2 is child of div1? - " + fnIsChild(div1, nchild1);
});

function fnIsChild(parentElem, childElem) {
    var childNodes = parentElem.childNodes,
        max = childNodes.length,
        n;
    for(n = 0; n < max; n += 1) {
        if(childNodes[n] === childElem) return true;
    }
    return false;
}

Answer 4

您也可以使用child.parentElement获取父级。

我还想指出您可以在chrome web console

中查看所有此类属性