如何使用 JavaScript 获取父元素的子元素？

在本文中，我们将学习使用 Javascript 获取父元素的子元素。给定一个 HTML 文档，任务是在 JavaScript 的帮助下选择一个特定元素并获取父元素的所有子元素。为此，有两种获取子元素的方法：

• 通过使用 children 属性
• 通过使用 querySelector 方法

我们将讨论这两种方法并通过示例了解它们的实现。

DOM children属性用于返回指定元素的所有子元素的 HTMLcollection。

方法一：

• 选择将要选择其子元素的元素。
• 使用.children 属性来访问元素的所有子元素。
• 根据索引选择特定的孩子。

示例 1：此示例实现了 . children 属性获取指定元素的所有子元素的 HTMLcollection。

HTML

  

    Finding child element of parent with pure JavaScript.
    
    .parent {
        background: green;
        color: white;
    }
      
    .child {
        background: blue;
        color: white;
        margin: 10px;
    }
    

  

     
        GeeksforGeeks 
    
    
  
     Parent
         Child 
    
    
     click here 
    
    
  
      
    
    var up = document.getElementById('GFG_UP');
    var down = document.getElementById('GFG_DOWN');
    up.innerHTML = "Click on the button select the child node.";
  
    function GFG_Fun() {
        parent = document.getElementById('parent');
        children = parent.children[0];
        down.innerHTML = "Text of child node is - '" 
            + children.innerHTML 
            + "'";
    }
    

  

输出：

类属性

HTML 中的querySelector()方法用于返回与文档中指定的 CSS 选择器匹配的第一个元素。

方法二：

• 选择要选择其子元素的父元素。
• 在父级上使用.querySelector() 方法。
• 使用孩子的 className 来选择那个特定的孩子。

示例 1：此示例实现.querySelector()方法以获取与文档中指定 CSS 选择器匹配的第一个元素。

HTML

  

    How to get the child element of a parent using JavaScript ?
    
    .parent {
        background: green;
        color: white;
    }
      
    .child1 {
        background: blue;
        color: white;
        margin: 10px;
    }
      
    .child2 {
        background: red;
        color: white;
        margin: 10px;
    }
    

  

     
        GeeksforGeeks 
    
     
  
     Parent
         Child1 
         Child2 
    
    
     click here 
    
    
  
    
    var up = document.getElementById('GFG_UP');
    var down = document.getElementById('GFG_DOWN');
    up.innerHTML = "Click on the button select the child node.";
  
    function GFG_Fun() {
        parent = document.getElementById('parent');
        children = parent.querySelectorAll('.child');
        down.innerHTML = "Text of child node is - '" 
            + children[0].innerHTML 
            + "' and '" 
            + children[1].innerHTML 
            + "'";
    }
    

  

输出：

.querySelector() 方法