创建网页时,一个 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 + "<br>"; }
在上面的语法中,我们通过标签名称获取“span”元素,并一一读取所有span元素。
在下面的示例中,我们创建了包含“myDIv”id 的 div 元素。此外,我们添加了 5 个包含不同内容的 span 元素。
在 JavaScript 中,我们使用 div 元素的 id 来访问它。之后,我们通过标签名称访问所有 span 元素,它们是 div 元素的子元素。接下来,我们使用 for 循环对 span 元素数组进行迭代,并获取每个 span 元素的内部 HTML。
在输出中,我们可以看到span元素的内容。
<html> <body> <h2> Reading <i> all the spans of a div element </i> dynamically using JavaScript </h2> <div id="myDiv"> <span> First </span> <span> Second </span> <span> Third </span> <span> Fourth </span> <span> Fifth </span> </div> <br> <div id = "output"> </div> <script> var 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 + "<br>"; } </script> </html>
在下面的示例中,我们创建了 id 等于“content”的 div 元素。 div 元素包含多个“
”、“”和“”元素作为随机顺序的子元素,但我们仅提取 span 元素。
在 JavaScript 中,我们访问 div 元素和子 span 元素。之后,我们仅读取 span 元素的内容并将其内容附加到列表中。
<html> <body> <h2> Reading <i> all the spans of a div element </i> dynamically using JavaScript </h2> <div id = "content"> <p> This is the first paragraph. </p> <p> This is the second paragraph. </p> <span> This is the first span. </span> <div> This is a div element. </div> <span> This is the second span. </span> <span> This is the third span. </span> <h2> This is a h2 element </h2> <p> This is the third paragraph. </p> <span> This is the fourth span. </span> </div> <br> <ul id = "output"> </ul> <script> 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); } </script> </html>
在此示例中,我们在 span 标签中添加了水果名称,并在 div 标签中添加了其解释。因此,父 div 包含 span 和 div 元素作为子元素。
在 JavaScript 中,我们使用“children”属性来获取 div 元素的所有子元素。之后,我们迭代所有子元素。在 for 循环中,我们使用“tagName”属性检查当前元素是否为“span”元素。如果是,我们读取其内容并将其附加到列表中。否则,我们继续迭代。
<html> <body> <h3> Reading <i> all the spans of a div element </i> dynamically using JavaScript </h3> <div id = "fruits"> <span> Apple </span> <div> Color: red </div> <span> Orange </span> <div> Color: orange </div> <span> Banana </span> <div> Color: yellow </div> <span> Watermelon </span> <div> Color: green </div> </div> <h3> Output: </h3> <ul id = "output"> </ul> <script> 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 += "<li>" + children[i].innerHTML + "</li>"; } } </script> </html>
我们学会了使用 JavaScript 动态读取 div 元素的所有 span 元素。在前两个示例中,我们访问所有 span 元素,然后迭代它们。在第三个示例中,我们迭代 div 元素的所有子元素,并在迭代时识别 span 元素。
以上是如何动态读取div的所有span?的详细内容。更多信息请关注PHP中文网其他相关文章!