我的 HTML 結構是這樣的：
<div container>
<div child_container>
<span 1> 1 </span>
<span 2> 2 </span>
</div child_container>>
<span 3> 3 </span>
<span 4> 4 </span>
</div container>
我想計算容器內的跨度 3和跨度 4。不是child_container內的跨度。
我嘗試了幾件事：
這將計算容器內的所有內容：
var countElementsAfter = columnNamesOverview_comparison_values.getElementsByTagName("span").length;
這行不通：
var countElementsAfter = columnNamesOverview_comparison_values.getElementsByTagName("span").childNodes[0]length;
而這個，結果仍然是 1，雖然我有兩個元素：
var countElementsAfter1 = columnNamesOverview_comparison_values.getElementsByTagName("span");
var k = [];
for (var i=0, len=c.length; i<len; i) {
k[k.length] = c[i];
}
如何在不計算子元素的情況下計算容器中的跨度元素？
uj5u.com熱心網友回復：
您可以使用document.querySelectorAllwhich 可以使用 css 選擇器
const spans = document.querySelectorAll("#container > span")
console.log(spans.length)<div id="container">
<div id="child_container">
<span 1> 1 </span>
<span 2> 2 </span>
</div>
<span 3> 3 </span>
<span 4> 4 </span>
</div>如果您無法為父元素設定選擇器（因此無法專門選擇它的子元素），您可以回圈遍歷它的子元素并過濾
const container = document.querySelector("#container")
const spans = Array.from(container.children)
.filter(child => child.tagName === "SPAN")
console.log(spans.length)<div id="container">
<div id="child_container">
<span 1> 1 </span>
<span 2> 2 </span>
</div>
<span 3> 3 </span>
<span 4> 4 </span>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/378805.html
標籤：javascript
上一篇：保存秒表以訪問資料庫vb.net