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

2021年4月9日16:36:42 发表评论 624 次浏览

给定一个HTML文档, 任务是选择一个特定的元素, 并借助JavaScript获得父元素的所有子元素。

方法1:

  • 选择要选择其子元素的元素。
  • 采用.children属性以访问element的所有子级。
  • 根据索引选择特定的子级。

示例1:本示例实现了上述方法。

<!DOCTYPE HTML> 
<html> 
  
<head> 
     <title> 
         Finding child element of parent with pure JavaScript.
     </title>
      
     <style>
         .parent {
             background: green;
             color: white;
         }
         .child {
             background: blue;
             color: white;
             margin: 10px;
         } 
     </style>
</head> 
  
<body style = "text-align:center;"> 
      
     <h1 style = "color:green;"> 
         lsbin 
     </h1> 
      
     <p id = "GFG_UP" style = 
             "font-size: 15px; font-weight: bold;"> 
     </p>
      
     <div class = "parent" id = "parent">
         Parent
         <div class = "child">
             Child
         </div>
     </div>
      
     <br>
      
     <button onclick = "GFG_Fun()">
         click here
     </button>
  
     <p id = "GFG_DOWN" style = 
         "font-size: 24px; font-weight: bold; color: green;"> 
     </p>
      
     <script> 
         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 + "'";
         } 
     </script> 
</body> 
  
</html>

输出如下:

在单击按钮之前:

如何使用JavaScript获取父级的子级元素?1

单击按钮后:

如何使用JavaScript获取父级的子级元素?2

方法二:

  • 选择要选择其子元素的父元素。
  • 采用.querySelector()方法在父母身上。
  • 使用child的className选择特定的孩子。

示例2:本示例实现了上述方法。

<!DOCTYPE HTML> 
<html> 
  
<head> 
     <title> 
         How to get the child element of
         a parent using JavaScript ?
     </title>
      
     <style>
         .parent {
             background: green;
             color: white;
         }
         .child1 {
             background: blue;
             color: white;
             margin: 10px;
         } 
         .child2 {
             background: red;
             color: white;
             margin: 10px;
         } 
     </style>
</head> 
  
<body style = "text-align:center;"> 
      
     <h1 style = "color:green;"> 
         lsbin 
     </h1> 
      
     <p id = "GFG_UP" style = 
             "font-size: 15px; font-weight: bold;"> 
     </p>
      
     <div class = "parent" id = "parent">
         Parent
         <div class = "child child1">
             Child1
         </div>
          
         <div class = "child child2">
             Child2
         </div>
     </div>
      
     <br>
      
     <button onclick = "GFG_Fun()">
         click here
     </button>
      
     <p id = "GFG_DOWN" style = 
         "font-size: 24px; font-weight: bold; color: green;"> 
     </p>
      
     <script> 
         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 + "'";
         } 
     </script> 
</body> 
  
</html>

输出如下:

在单击按钮之前:

如何使用JavaScript获取父级的子级元素?3

单击按钮后:

如何使用JavaScript获取父级的子级元素?4

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: