如何在 JavaScript 中获取子节点索引？

任务是获取其他子元素中子元素的索引。以下是讨论的一些技术。
方法一：

• 选择父元素的子元素。
• 通过.parentNode 属性选择父级。
• 使用Array.prototype.indexOf.call(Children_of_parent, current_child)获取索引。

示例 1：此示例使用上述方法。

  

    
        How to get the child node index in 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 get the index of child element.";
  
        function GFG_Fun() {
            var child = document.getElementById('child2');
            var parent = child.parentNode;
            down.innerHTML =
              "The index of element with id = 'child2' is = "
            + Array.prototype.indexOf.call(parent.children, child);
        }
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

方法二：

• 选择父元素的子元素。
• 首先选择父元素，然后选择父元素的所有子元素。
• 创建一个子数组并使用indexOf() 方法获取索引。

示例 2：此示例使用上述方法。

  

    
        How to get the child node index in 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 get the index of child element.";
  
        function GFG_Fun() {
            var child = document.getElementById('child2');
            down.innerHTML = "The index of element with id = 'child2' is = "
            + Array.from(child.parentNode.children).indexOf(child);
        }
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：