使用javascript獲取div中的span元素

Question

我有一個 html 代碼：

<div id="id0" class="class0">
    <span> "1" </span>
    <span> "2" </span>
    <span> "3" </span>
</div>

問題是如何使用 javascript 將 1,2,3 作為列表？

我試過： document.getElementById 和 document.getElementsByClassName 但沒有任何作用。

Answer 1

您可以使用map然后刪除quoted marks以僅獲取number list

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Test</title> </head> <body> <div id="id0" class="class0"> <span> "1" </span> <span> "2" </span> <span> "3" </span> </div> <script> console.clear(); const selectors = document.querySelectorAll('#id0 > span'); const list = [...selectors].map(span => parseInt(span.innerText.replace(/"/g,""))); console.log(list) </script> </body> </html>

Answer 2

您可以在容器 div 上的children上使用map()

 const cont = document.getElementById('id0'); const res = [...cont.children].map(x => x.innerHTML); console.log(res)

 <div id="id0" class="class0"> <span> "1" </span> <span> "2" </span> <span> "3" </span> </div>

Answer 3

函數querySelectorAll是您的朋友。

 document.getElementById("id0").querySelectorAll('span').forEach(element => { console.log (element); })

 <div id="id0" class="class0"> <span> "1" </span> <span> "2" </span> <span> "3" </span> </div>

Answer 4

使用document.getElementById和document.getElementsByTagName獲取元素，然后遍歷它們並將它們添加到列表中。 使用textContent和innerText獲取 span 元素的文本。

 var spans = document.getElementById('id0').getElementsByTagName('span'); var obj = []; for (var i = 0, l = spans.length; i < l; i++) { obj.push(parseInt(spans[i].textContent.replace(/"/g,"")) || parseInt(spans[i].innerText.replace(/"/g,""))); } console.log(obj);

 <div id="id0" class="class0"> <span> "1" </span> <span> "2" </span> <span> "3" </span> </div>

Answer 5

我在這里為你提到這個過程——首先，從文檔中獲取const div = document.getElementById("id0"); ，您可以使用其他方法來做到這一點，然后獲取div的所有孩子，您可以通過const spans = div.children; ，現在看spans是包含所有 span 的 HTMLCollection（它是可迭代的）。 現在您遍歷每個跨度並獲取您的 textContent 並根據需要使用正則表達式/其他更改它們並將它們放入列表或其他列表中。

向他人學習的最佳方式是在復制代碼之前先了解代碼。

`

const div = document.getElementById("id0");
const spans = div.children;
for (let i = 0; i < spans.length; i++) {
  // here you get each textContent by spans[i].textContent
}

`

使用javascript獲取div中的span元素

問題描述

5 個解決方案

解決方案1
4 已采納 2020-03-11 14:41:22

解決方案2
2 2020-03-11 14:28:28

解決方案3
2 2020-03-11 14:41:18

解決方案4
1 2020-03-11 14:43:10

解決方案5
1 2020-03-11 14:56:05

使用javascript獲取div中的span元素

問題描述

5 個解決方案

解決方案1 4 已采納 2020-03-11 14:41:22

解決方案2 2 2020-03-11 14:28:28

解決方案3 2 2020-03-11 14:41:18

解決方案4 1 2020-03-11 14:43:10

解決方案5 1 2020-03-11 14:56:05

解決方案1
4 已采納 2020-03-11 14:41:22

解決方案2
2 2020-03-11 14:28:28

解決方案3
2 2020-03-11 14:41:18

解決方案4
1 2020-03-11 14:43:10

解決方案5
1 2020-03-11 14:56:05