如何动态读取div的所有span？

创建网页时，一个 HTML 元素可以包含多个嵌套的 HTML 元素。在某些情况下，开发人员可能需要读取一个 HTML 元素的特定 HTML 元素。在我们的例子中，我们需要读取 div 元素的所有 span 元素并提取它们的内容。

在本教程中，我们将学习使用 JavaScript 读取 div 元素所有跨度的内容，并再次以格式化方式将其附加到网页。

语法

用户可以按照以下语法使用 JavaScript 动态读取 div 元素的所有范围。

var spans = div.getElementsByTagName("span"); for (var i = 0; i < spans.length; ++i) { output.innerHTML += spans[i].innerHTML + "
"; }

在上面的语法中，我们通过标签名称获取“span”元素，并一一读取所有span元素。

示例 1

在下面的示例中，我们创建了包含“myDIv”id 的 div 元素。此外，我们添加了 5 个包含不同内容的 span 元素。

在 JavaScript 中，我们使用 div 元素的 id 来访问它。之后，我们通过标签名称访问所有 span 元素，它们是 div 元素的子元素。接下来，我们使用 for 循环对 span 元素数组进行迭代，并获取每个 span 元素的内部 HTML。

在输出中，我们可以看到span元素的内容。

  
 Reading  all the spans of a div element  dynamically using JavaScript 
 
  First   Second   Third   Fourth   Fifth  
 
 
 
  

示例 2

在下面的示例中，我们创建了 id 等于“content”的 div 元素。 div 元素包含多个“

”、“”和“”元素作为随机顺序的子元素，但我们仅提取 span 元素。

在 JavaScript 中，我们访问 div 元素和子 span 元素。之后，我们仅读取 span 元素的内容并将其内容附加到列表中。

  
 Reading  all the spans of a div element  dynamically using JavaScript 
 
 
 This is the first paragraph. 
 
 This is the second paragraph. 
  This is the first span.  
 This is a div element. 
  This is the second span.   This is the third span.  
 This is a h2 element 
 
 This is the third paragraph. 
  This is the fourth span.  
 
 
 
  

示例 3

在此示例中，我们在 span 标签中添加了水果名称，并在 div 标签中添加了其解释。因此，父 div 包含 span 和 div 元素作为子元素。

在 JavaScript 中，我们使用“children”属性来获取 div 元素的所有子元素。之后，我们迭代所有子元素。在 for 循环中，我们使用“tagName”属性检查当前元素是否为“span”元素。如果是，我们读取其内容并将其附加到列表中。否则，我们继续迭代。

  
 Reading  all the spans of a div element  dynamically using JavaScript 
 
  Apple  
 Color: red 
  Orange  
 Color: orange 
  Banana  
 Color: yellow 
  Watermelon  
 Color: green 
 
 
 Output: 
 
 
  

结论

我们学会了使用 JavaScript 动态读取 div 元素的所有 span 元素。在前两个示例中，我们访问所有 span 元素，然后迭代它们。在第三个示例中，我们迭代 div 元素的所有子元素，并在迭代时识别 span 元素。

Atas ialah kandungan terperinci 如何动态读取div的所有span？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!