Как определить, является ли элемент дочерним элементом другого элемента JavaScript (без jQuery)?

Question

Если у меня есть два элемента 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 элемент находится где-то над child элемент в DOM - не только тогда, когда это непосредственно его родителя.

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