資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何動態讀取div的所有span標籤？
在建立網頁時，一個HTML元素可以包含多個巢狀的HTML元素。在某些情況下，開發者可能需要讀取一個HTML元素的特定HTML元素。在本例中，我們需要讀取div元素的所有span元素並提取其內容。
在本教程中，我們將學習如何使用JavaScript讀取div元素的所有span元素的內容，並以格式化的方式將其重新新增到網頁中。
語法
使用者可以遵循以下語法，使用JavaScript動態讀取div元素的所有span元素。
var spans = div.getElementsByTagName("span");
for (var i = 0; i < spans.length; ++i) {
output.innerHTML += spans[i].innerHTML + "<br>";
}
在上述語法中，我們透過標籤名稱獲取“span”元素，並逐個讀取所有span元素。
示例1
在下面的示例中，我們建立了包含“myDiv” ID的div元素。我們還添加了5個包含不同內容的span元素。
在JavaScript中，我們使用其ID訪問div元素。之後，我們透過標籤名稱訪問所有span元素，它們是div元素的子元素。接下來，我們使用for迴圈迭代span元素陣列，並獲取每個span元素的innerHTML。
在輸出中，我們可以看到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>
示例2
在下面的示例中，我們建立了一個ID等於“content”的div元素。div元素包含多個“<p>”、“<span>”和“<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>
示例3
在這個例子中，我們在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元素。
862 次瀏覽
