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.
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>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>
querySelectorAll returns a NodeList.The question is how can I get 1,2,3 as a list using javascript?, check the most voted answerYou 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>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>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
}
`
