时间戳

首页 > 解决方案 > 查询选择器到数组

javascript - 查询选择器到数组

问题描述

我有这个 html 页面（在 body 标签内）->

<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>

我正在尝试查询选择 .todo-list 并希望将 innerText 转换为数组。我尝试了这里告诉的内容， 但没有工作->

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

但是我在控制台中得到了这个->

["I", "t", "e", "a", "s", "m", "↵&quot;, "I", "t", "e", "a", "s", "m", "↵&quot;, "I", "t", "e", "a", "s", "m", "↵&quot;, "I", "t", "e", "m", "↵&quot;, "I", "t", "e", "m", "↵&quot;, "I", "t", "e", "m", "↵&quot;, "I", "t", "e", "m"]

其实我想要这样的东西->

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

任何想法 ？？谢谢 ！！！

标签： javascriptarrays

解决方案

改为使用querySelectorAll，并且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>

推荐阅读