如何判断一个元素是否是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

有内elementparentNode属性，所以你可以做以下操作：

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

您还可以使用child.parentElement获取父母。

我也想指出，你可以在chrome web console

Answer 4

查看所有这些属性如果你只需要从父元素的直接孩子，看看下面的例子：

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