只返回 id 名称的 querySelectorAll答案

【问题标题】：querySelectorAll that only returns id names只返回 id 名称的 querySelectorAll
【发布时间】：2019-04-02 22:00:24
【问题描述】：

我尝试查询选择器当天的所有 div 并返回 ID 名称。唯一的问题是每次我都尝试。它将返回以下内容之一 | 它还返回 P |它显示了完整的 HTML 代码。 |它返回一个错误

代码示例：

  <div id=Monday>
   <div id="MA_meeting1_8:30_10:00">
     <p>text<p>
     <p>SomeText<p>
   </div>
   <div id="MA_meeting2_10:30_11:00">
     <p>text<p>
     <p>SomeText<p>
   </div> 
  </div>

document.querySelector(X).id

它只会返回

MA_meeting1_8:30_10:00

我尝试返回它：

MA_meeting1_8:30_10:00
MA_meeting2_10:30_11:00

【问题讨论】：

什么是a？另请注意，document.querySelector 返回 first 元素 - 您正在寻找 document.querySelectorAll

标签： javascript html css-selectors

【解决方案1】：

您可以使用 ID Monday 定位父 div，然后使用 querySelectorAll。这是一个集合，所以使用扩展语法... 来使用数组方法map 并返回ids 的数组

let k = [...document.getElementById('Monday').querySelectorAll('div')].map(item => item.id);
console.log(k)

<div id='Monday'>
  <div id="MA_meeting1_8:30_10:00">
    <p>text</p>
    <p>SomeText
    </p>
  </div>
  <div id="MA_meeting2_10:30_11:00">
    <p>text
    </p>
    <p>SomeText
    </p>
  </div>
</div>

【讨论】：

啊啊啊啊。好的。也就是说 - 您可以使用更好的选择器。 let k = [...document.querySelectorAll('#Monday > div')].map(item => item.id);
不建议这应该是答案的一部分，但令我烦恼的是，这种语言让低效的事情比高效的事情更容易。在这种情况下，[...arrayLike].map(...) 会创建一个临时数组来获取最终结果，这会浪费内存和时间，而Array.prototype.map.call(arrayLike, ...) 则直接作用于类数组对象以获取最终结果。