创建网页时，一个 HTML 元素可以包含多个嵌套的 HTML 元素。在某些情况下，开发人员可能需要读取一个 HTML 元素的特定 HTML 元素。在我们的例子中，我们需要读取 div 元素的所有 span 元素并提取它们的内容。
在本教程中，我们将学习使用 JavaScript 读取 div 元素所有跨度的内容，并再次以格式化方式将其附加到网页。
语法
用户可以按照以下语法使用 JavaScript 动态读取 div 元素的所有范围。
var spans = div.getElementsByTagName("span");for (var i = 0; i ";}
登录后复制
在上面的语法中，我们通过标签名称获取“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 Fifthvar div = document.getElementById("myDiv"); var spans = div.getElementsByTagName("span"); var output = document.getElementById("output"); for (var i = 0; i < spans.length; ++i) { output.innerHTML += spans[i].innerHTML + "
"; }
登录后复制
示例 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.
登录后复制 var div = document.getElementById(“content”); var spans = div.getElementsByTagName(“span”); var output = document.getElementById(“output”); for (var i = 0; i < spans.length; i++) { var li = document.createElement("li"); li.innerHTML = spans[i].innerHTML; output.appendChild(li); }
示例 3
在此示例中，我们在 span 标签中添加了水果名称，并在 div 标签中添加了其解释。因此，父 div 包含 span 和 div 元素作为子元素。
在 JavaScript 中，我们使用“children”属性来获取 div 元素的所有子元素。之后，我们迭代所有子元素。在 for 循环中，我们使用“tagName”属性检查当前元素是否为“span”元素。如果是，我们读取其内容并将其附加到列表中。否则，我们继续迭代。
Reading all the spans of a div element dynamically using JavaScript
AppleColor: redOrangeColor: orangeBananaColor: yellowWatermelonColor: greenOutput:
登录后复制 let fruits = document.getElementById(“fruits”); let children = fruits.children; let output = document.getElementById(“output”); for (let i = 0; i < children.length; i++) { if (children[i].tagName == "SPAN") { output.innerHTML += "
结论
我们学会了使用 JavaScript 动态读取 div 元素的所有 span 元素。在前两个示例中，我们访问所有 span 元素，然后迭代它们。在第三个示例中，我们迭代 div 元素的所有子元素，并在迭代时识别 span 元素。
以上就是如何动态读取div的所有span？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2692148.html
