logo标签列表

使用JavaScript获取div内的span元素

javascripthtml
5

我有一段HTML代码：

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

问题是如何使用javascript将1、2、3作为列表获取？

我尝试过：document.getElementById和document.getElementsByClassName，但都不起作用。

5个回答
5
你可以使用 map 方法，然后去掉 引号 来获取仅包含 数字列表。 

<!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>

4

函数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>

这如何与操作的输出相匹配？ - EugenSunic
@EugenSunic 你的问题是什么？问题是“如何获取列表”，而 querySelectorAll 返回一个 NodeList。 - ceving
显然你没有仔细阅读问题，“问题是如何使用JavaScript获取1,2,3作为列表？”，请查看得票最高的答案。 - EugenSunic
@EugenSunic 你想说什么？你认为我们应该关闭这个问题，因为它是这个的重复吗？ - ceving
让我们看看原帖作者的意见，因为如果他想要最受欢迎的答案，那么这并不是一个重复的问题。 - EugenSunic
2
你可以在容器div上使用map()来处理children。 

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>

1
我为您提供翻译：

我在这里为您介绍这个过程 - 首先，从文档中获取div- const div = document.getElementById("id0");，您可以使用其他方法来完成此操作， 然后获取div的所有子元素，您可以通过const spans = div.children;来实现，现在spans是包含所有span的可迭代HTMLCollection。现在，您可以遍历每个span，并使用正则表达式/其他方式获取其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
}

`

1
使用 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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接