又来提问-querySelectorAll 获取到元素后怎么获得 ID？

[zhuzhuaini]

例子_HTML 代码如下：

<id='001' clas='even-row ui-selected'>

<id='002' clas='even-row ui-selected'>

<id='003' clas='even-row'>

<id='004' clas='even-row ui-selected'>

以上例子中 ID 是不同的，相同点是 CLASS 有相同之处 我的目的是寻找 class 中带有 ui-selected 的 ID 值 也就是我需要获取到 001 002 004 当我使用 querySelectorAll(ui-selected)是 的确能查找到到 3 个元素 分别为 1 2 4 但是他会将整个元素都输出出来，那我怎么样才能将这三个元素中的 ID 取出来（我只需要 ID ） 可能表述不是很清楚，百度搜索了一阵也没有我想要的答案，希望大佬解答 谢谢~

[gogolang]

jquery each 方法遍历

[crazybinggan]

摸🐟

```javascript
[...document.querySelectorAll('.ui-selected')].map(item => item.id)
```

[cheese]

取到的是一个 NodeList, 你可以用 for of 对这个 list 做循环，然后再取出 id 。或者用 Array.form 转化为数组，用数组的方法循环

[gogolang]

```javascript
$.each($('.ui-selected'), function (k, v) {
console.log($(v).attr('id'))
})
```

[violetlai]

感觉你这整个需求想法思路都是不对的

id 是唯一标识，目的就是为了方便引用，不应该这样查询吧

而是通过 node list 的下标来查询操作

[zhuzhuaini]

@violetlai 是这样的，我是想获取一个表格当中的已经勾选的数据 ID，当我勾选一行时，td 标签中 class 就具有 ui-selected，然后 td 标签中还含有 ID，我就是需要这个 ID 继续进行 post，所以我要获取的就是这个变化的 ID

[sgiyy]

@zhuzhuaini 直接在 行选中 /取消选中 的时候把 id 记录下来维护到一个变量里不更方便么。

[zhuzhuaini]

@crazybinggan 我快疯了 一直在研究你这个代码 我一直以为 document 前面的...的意思是省略号，意思是我前面的代码，，，，，，，所以我一直在琢磨这个代码到底啥意思 测来测去测了好几个小时，就是折腾不出 id 来，直到刚刚偶然间，，，我把前面的...复制过去忘了删掉，，然后跑了下发现直接出 ID 了。。。。。我人都傻了！！！！！

[asdjgfr]

@zhuzhuaini 扩展运算符还有很多其他贼好用的用法，不过盲猜你的项目没有 babel，注意某些新特性的兼容性。https://es6.ruanyifeng.com/?search=spread&x=0&y=0#docs/array#%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6

[crazybinggan]

@zhuzhuaini #9 楼补充了，怪我没说清楚 XD，不过这课上得印象深刻 :doge

[libook]

上面应该已经解决题主的问题了。

建议题主去 MDN 上看一看 JavaScript 和 DOM 的相关文档，至少了解一下都有哪些功能，等写程序的时候就能想到有那么一个功能可以满足自己的需求，然后再查 MDN 文档仔细看一看就可以了。

我举个例子：

我知道 document.querySelectorAll 是个可以选取元素的方法，但我不确定它返回的是什么，就可以去 MDN 上查这个方法的文档： https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelectorAll

看到返回值那里写的是 NodeList，但我不知道 NodeList 是什么，于是可以点击跳转到 NodeList 的文档： https://developer.mozilla.org/zh-CN/docs/Web/API/NodeList

文档里讲了 NodeList 是节点的集合，并且详细讲了如何遍历这个集合，也正好用了 querySelectorAll 来作为例子，那么我就可以遍历取出每个节点了。
此时我不清楚 Node 是啥，于是就搜 Node 的文档： https://developer.mozilla.org/zh-CN/docs/Web/API/Node

知道了 Node 是个基本类型，各种 DOM API 都是继承自 Node，父类有的属性通常子类也会有，那么可以先看看 Node 有没有 id 属性，看来没有；
那么可能 id 是 DOM API 的属性，DOM API 有很多种，文档中列举了一些 DOM API，如 Element 就是一种 DOM API，在看过了几种 DOM API 的文档之后，了解到 Document 下的对象都是 Element，那么就可以去看 Element API 的文档： https://developer.mozilla.org/zh-CN/docs/Web/API/Element

MDN 里的 API 文档主体包括三个部分，属性、方法、事件，那么咱们找的是 id 属性，所以往下拉，果然找到了 id 属性。

[zhuzhuaini]

@libook 十分感谢，我确实没有看过文档，基本上就是我有一个需求，我就按照传统的思维去把他实现，遇到网上查不到的不好描述的就只能来发帖问了，这样确实不好，您的建议我觉得很好，有空时确实应该多看看相关文档，这样就可以做到像您说的最起码能想到有类似功能可以实现。 再次感谢！
@crazybinggan 确实映像深刻！