Query Selector To Array

Question

I am having this html page ( inside the body tag ) ->

<div class="todo-container">
  <ul class="todo-list">
    <div class="todo">
      <li>Iteasm</li>
    </div>
    <div class="todo">
      <li>Iteasm</li>
    </div>
    <div class="todo">
      <li>Iteasm</li>
    </div>
    <div class="todo">
      <li>Item</li>
    </div>
    <div class="todo">
      <li>Item</li>
    </div>
    <div class="todo">
      <li>Item</li>
    </div>
    <div class="todo">
      <li>Item</li>
    </div>
  </ul>
</div>

I am trying to querySelect the .todo-list and want to convert the innerText to array.. I tried the what is told here but is not working->

const nodelist = document.querySelector('.todo-list').innerText;
const nodelistToArray = Array.prototype.slice.call(nodelist);
console.log(nodelistToArray);

But I am getting this in the console ->

["I", "t", "e", "a", "s", "m", "↵", "I", "t", "e", "a", "s", "m", "↵", "I", "t", "e", "a", "s", "m", "↵", "I", "t", "e", "m", "↵", "I", "t", "e", "m", "↵", "I", "t", "e", "m", "↵", "I", "t", "e", "m"]

Actually I want something like this ->

["Iteasm", "Iteasm", "Iteasm"]

Any idea ?? Thanks !!!

You can't place a li element inside a div. A div inside a ul is also forbidden. Please remove all the divs inside your code. — H. Pauwelyn
– H. Pauwelyn, Commented Dec 23, 2020 at 16:39

CertainPerformance · Accepted Answer · 2020-12-22 04:36:46Z

2

Use querySelectorAll instead, and Array.from:

console.log(
  Array.from(
    document.querySelectorAll('.todo > li'),
    li => li.textContent
  )
);

<div class="todo-container">
  <ul class="todo-list">
    <div class="todo">
      <li>Iteasm</li>
    </div>
    <div class="todo">
      <li>Iteasm</li>
    </div>
    <div class="todo">
      <li>Iteasm</li>
    </div>
    <div class="todo">
      <li>Item</li>
    </div>
    <div class="todo">
      <li>Item</li>
    </div>
    <div class="todo">
      <li>Item</li>
    </div>
    <div class="todo">
      <li>Item</li>
    </div>
  </ul>
</div>

answered Dec 22, 2020 at 4:36

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ajit Kumar Over a year ago

Very very thanks CertainPerformance !!! It worked fine !!!

D. Seah · Accepted Answer · 2020-12-22 04:51:04Z

1

you can also do this

const items = [...document.getElementsByClassName("todo")].map(li => li.innerText);
console.log(items);

answered Dec 22, 2020 at 4:51

D. Seah

4,7121 gold badge15 silver badges27 bronze badges

Collectives™ on Stack Overflow

Query Selector To Array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related