如何判斷一個元素是否是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; 
}