Get span elements within div using javascript

user_12073028 0
Viewed 1375

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.

html javascript
5 Answers

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>

user_51468480

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>

user_98191460

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>

user_4023220

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>

user_74141660

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
}

`

user_98570780
Related