如何使用JavaScript检查一个元素是否是父元素的子元素

方法1：使用Node.contains() 方法

Node.contains() 方法用于检查给定的节点是否是另一个节点的后代节点。后代节点可以直接是子节点的父节点或更高层级的节点。它返回一个布尔值。该方法用于父元素上，方法中传递的参数是要检查的子元素。如果子元素是父元素的后代，则返回true。这意味着该元素是父元素的子元素。

语法：

function checkParent(parent, child) {
    if (parent.contains(child))
        return true;
        return false;
}

示例：

<style> 
    .parent, 
    .child, 
    .non-child { 
        border: 2px solid; 
        padding: 5px; 
        margin: 5px; 
    } 
</style> 
<h1 style="color: green">GeeksforGeeks</h1> 
<b> 
    How to Check if an element is 
    a child of a parent using JavaScript? 
</b> 
<div class="parent">This is the parent div. 
    <div class="child">This is the child div. 
    </div> 
</div> 
<div class="non-child"> 
    This is outside the parent div. 
</div> 
<p>Click on the button to check if the 
    elements are child of a parent.</p> 
<p>Child has parent: 
    <span class="output-child"></span> 
</p> 
<p>Non-Child has parent: 
    <span class="output-non-child"></span> 
</p> 
  
<button onclick="checkElements()"> 
    Check elements 
</button> 
<script> 
    function checkParent(parent, child) { 
        if (parent.contains(child)) 
            return true; 
        return false; 
    } 
      
    function checkElements() { 
        parent = document.querySelector('.parent'); 
        child = document.querySelector('.child'); 
        non_child = document.querySelector('.non-child'); 
      
        output_child = checkParent(parent, child); 
        output_non_child = checkParent(parent, non_child); 
      
        document.querySelector('.output-child').textContent = 
            output_child; 
        document.querySelector('.output-non-child').textContent = 
            output_non_child; 
    } 
</script>

输出：

方法2：遍历给定子元素的父元素

可以通过连续遍历每个元素的父元素来检查子元素是否具有给定的父元素。通过访问 parentNode 属性找到每个节点的父节点（如果有）。使用while循环直到找到所需的父元素或没有更多的父元素存在。在此循环内，每次迭代都会找到每个元素的父节点。如果在任何迭代中父节点与给定的父节点匹配，则意味着该元素是父元素的子元素。

语法：

function checkParent(parent, child) {
    let node = child.parentNode;

    // keep iterating unless null
    while (node != null) {
        if (node == parent) {
            return true;
        }
     node = node.parentNode;
     }
   return false;
}

示例：

<style> 
    .parent, 
    .child, 
    .non-child { 
        border: 2px solid; 
        padding: 5px; 
        margin: 5px; 
    } 
</style> 
  
<h1 style="color: green">GeeksforGeeks</h1> 
<b> 
    How to Check if an element is 
    a child of a parent using JavaScript? 
</b> 
<div class="parent">This is the parent div. 
    <div class="child">This is the child div. 
    </div> 
</div> 
<div class="non-child"> 
    This is outside the parent div. 
</div> 
<p>Click on the button to check if 
    the elements are child of a parent.</p> 
<p>Child has parent: 
    <span class="output-child"></span> 
</p> 
<p>Non-Child has parent: 
    <span class="output-non-child"></span> 
</p> 
  
<button onclick="checkElements()"> 
    Check elements 
</button> 
<script> 
    function checkParent(parent, child) { 
        let node = child.parentNode; 
      
        // keep iterating unless null 
        while (node != null) { 
            if (node == parent) { 
                return true; 
            } 
            node = node.parentNode; 
        } 
        return false; 
    } 
      
    function checkElements() { 
        parent = document.querySelector('.parent'); 
        child = document.querySelector('.child'); 
        non_child = document.querySelector('.non-child'); 
      
        output_child = checkParent(parent, child); 
        output_non_child = checkParent(parent, non_child); 
      
        document.querySelector('.output-child').textContent = 
            output_child; 
        document.querySelector('.output-non-child').textContent = 
            output_non_child; 
    } 
</script>

输出：