I would like to target all the <p> and convert it into an array. I have tried spread operator, Array.from or by using methods like .split() or .splice(). But it seems that the problem is to find the right target and understand how to operate with Element object-text which I have not yet...
const targetDates = document.querySelector('.data');
console.log(targetDates.childNodes.entries) <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="dates" class="data">
1429
1368
1661
1687
1593
1495
1565
1500
1635
</p>
<script src="app.js"></script>
</body>
</html>That element has a single child node, which is a text node.
const p = document.querySelector('#dates');
console.log(p.childNodes.length); <p id="dates" class="data">
1429
1368
1661
1687
1593
1495
1565
1500
1635
</p>In such a case, it's usually easiest to use .textContent to retrieve only the text inside the element, and then you can manipulate the text to process the numbers as you like - such as splitting by newlines, or by matching numbers in the string with a regular expression:
const p = document.querySelector('#dates');
const nums = p.textContent.match(/\d+/g);
for (const num of nums) {
console.log(num);
}<p id="dates" class="data">
1429
1368
1661
1687
1593
1495
1565
1500
1635
</p> const targetDates = document.querySelector('.data');
const textData=targetDates.childNodes[0].textContent;
const finalTextData=textData.trim().split('\n');//using trim() because the of the first blank space
const newValue=finalTextData.map(item=>item.trim())
So with the .textcontent you can access to the content of <p> then you have to remove the blank space at first via trim() and split them base of '\n' which is Enter.Although you can find some RegExp to solve the problem ,you can also solve this issue with this steps