如何动态读取 div 的所有跨度？

在本文中，我们将学习阅读

元素的所有 元素的文本内容。

方法：我们将首先选择要在其中找到 元素的分区。这可以通过使用 getElementById()方法通过其 ID 选择元素来完成。接下来我们将获取包含在此分区中的所有指定类型的元素。这可以通过对我们在上一步中找到的除法使用 getElementsByTagName() 方法来完成。然后我们可以通过遍历所有 span 元素来获取其中的文本内容并将其显示为列表。

句法：

let getInfo = () => {

  // Get the division inside which the
  // spans have to be found
  let container = document.getElementById("container");
  let spans = container.getElementsByTagName("span");

  // Get output element
  let outputP = document.getElementById("output");

  // Iterate over spans
  for (let span of spans) {

    // Create a new list element with the data
    let listElem = document.createElement("li");
    listElem.textContent = span.textContent;

    // Insert text content of span inside output html element
    outputP.appendChild(listElem);
  }
};

下面的例子演示了这种方法。

示例 1：

HTML

  

    
        GeeksforGeeks
  
    
    
         Span 1 
         Span 2 
         Span 3 
         Span 4 
         Span 5 
         Span 6 
    
  
    
        Get Text
    
  
    
        Text of only  elements
        inside division:
    
      
    
  
    
        let getInfo = () => {
            // Get the division inside which the
            // spans have to be found
            let container =
                document.getElementById("container");
            let spans =
                container.getElementsByTagName("span");
  
            // Get output element
            let outputP =
                document.getElementById("output");
  
            // Iterate over spans
            for (let span of spans) {
  
                // Create a new list element
                // with the data
                let listElem =
                    document.createElement("li");
                listElem.textContent =
                    span.textContent;
  
                // Insert text content of span
                // inside output html element
                outputP.appendChild(listElem);
            }
        };
    

  

输出：

示例 2：

HTML

  

    
        GeeksforGeeks
    
  
    
    
         Span 1 
  
         This is another tag 
  
         Span 2 
  
         This is another tag 
  
         Span 6 
    
  
    
        Get Text
    
  
    
        Text of only  elements
        inside division:
    
      
    
  
    
        let getInfo = () => {
            // Get the division inside which the
            // spans have to be found
            let container =
                document.getElementById("container");
            let spans =
                container.getElementsByTagName("span");
  
            // Get output element
            let outputP =
                document.getElementById("output");
  
            // Iterate over spans
            for (let span of spans) {
  
                // Create a new list element
                // with the data
                let listElem =
                    document.createElement("li");
                listElem.textContent =
                    span.textContent;
  
                // Insert text content of span
                // inside output html element
                outputP.appendChild(listElem);
            }
        };
    

  

输出：