Get span elements within div using javascript

Question

I have a html code:

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

The question is how can I get 1,2,3 as a list using javascript?

I tried: document.getElementById and document.getElementsByClassName But none works.

score 5 · Accepted Answer · answered Mar 11 '20 at 14:41

You can use map and then remove the quoted marks to get only the 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>

score 4 · Answer 2 · answered Mar 11 '20 at 14:41

4

The function querySelectorAll is your friend.

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>

answered Mar 11 '20 at 14:41

ceving

21,900
13
104
178

how does this match the output of the op? – EugenSunic Mar 11 '20 at 14:42
@EugenSunic What is your problem? The question was "how can I get a list" and `querySelectorAll` returns a `NodeList`. – ceving Mar 11 '20 at 14:48
obviously you don't read the questoin well `The question is how can I get 1,2,3 as a list using javascript?`, check the most voted answer – EugenSunic Mar 11 '20 at 14:57
@EugenSunic What do you want to say? You think we should close the question, because it is a duplicate of [this](https://stackoverflow.com/questions/3199588/fastest-way-to-convert-javascript-nodelist-to-array) one? – ceving Mar 11 '20 at 15:01
Let's see what the OP says, because if he wants want the most voted answer provides then it's not a duplicate – EugenSunic Mar 11 '20 at 16:09

score 2 · Answer 3 · answered Mar 11 '20 at 14:28

You can use map() on children on container div

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>

MOnkey · Answer 4 · 2020-03-11T14:48:27.960

Get the elements using document.getElementById and document.getElementsByTagName, then iterate through them and add them to the list. Use textContent and innerText to obtain the text of the span element.

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>

score 1 · Answer 5 · answered Mar 11 '20 at 14:56

I mention the process here for you- First, get the div from the document- const div = document.getElementById("id0");, you can do this using other methods, then get all the children of the div, you may do this by const spans = div.children;, look now spans is HTMLCollection (which is iterable) containing all the spans. Now you iterate over each span and get your textContent and change them using regex/others as you want and put them in a list or others.

The best way to learn from others is to understand the code before copying them.

`

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
}

`

Get span elements within div using javascript

5 Answers5