使用javascript获取div中的span元素答案

【问题标题】：Get span elements within div using javascript使用javascript获取div中的span元素
【发布时间】：2020-03-11 14:26:26
【问题描述】：

我有一个html代码：

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

问题是如何使用 javascript 获得 1,2,3 作为列表？

我试过了：document.getElementById 和 document.getElementsByClassName 但没有一个有效。

【问题讨论】：

标签： javascript html

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

这和op的输出有什么关系？
@EugenSunic 你有什么问题？问题是“我怎样才能得到一个列表”，querySelectorAll 返回一个NodeList。
显然你没有好好阅读问题The question is how can I get 1,2,3 as a list using javascript?，查看投票最多的答案
@EugenSunic 你想说什么？你认为我们应该结束这个问题，因为它与this one 重复？
让我们看看 OP 怎么说，因为如果他想要获得最多票数的答案，那么它就不是重复的

【解决方案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>

【讨论】：

【解决方案5】：

我在这里为你提到这个过程- 首先，从文档中获取 div-const div = document.getElementById("id0");，您可以使用其他方法执行此操作，然后获取 div 的所有子项，您可以通过 const spans = div.children; 执行此操作，现在看 spans 是包含所有跨度的 HTMLCollection（可迭代）。现在您遍历每个跨度并获取您的 textContent 并根据需要使用 regex/others 更改它们并将它们放入列表或其他列表中。

向他人学习的最好方法是在复制代码之前理解代码。

`

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
}

`

【讨论】：