V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
zhuzhuaini
V2EX  ›  JavaScript

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

  •  
  •   zhuzhuaini · 2021-08-03 11:44:48 +08:00 · 1961 次点击
    这是一个创建于 1202 天前的主题,其中的信息可能已经有所发展或是发生改变。

    例子_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 ) 可能表述不是很清楚,百度搜索了一阵也没有我想要的答案,希望大佬解答 谢谢~

    12 条回复    2021-08-04 13:58:27 +08:00
    gogolang
        1
    gogolang  
       2021-08-03 11:54:23 +08:00   ❤️ 1
    jquery each 方法遍历
    crazybinggan
        2
    crazybinggan  
       2021-08-03 11:54:56 +08:00   ❤️ 1
    摸🐟

    ```javascript
    [...document.querySelectorAll('.ui-selected')].map(item => item.id)
    ```
    cheese
        3
    cheese  
       2021-08-03 11:55:02 +08:00   ❤️ 1
    取到的是一个 NodeList, 你可以用 for of 对这个 list 做循环,然后再取出 id 。或者用 Array.form 转化为数组,用数组的方法循环
    gogolang
        4
    gogolang  
       2021-08-03 11:56:31 +08:00   ❤️ 1
    ```javascript
    $.each($('.ui-selected'), function (k, v) {
    console.log($(v).attr('id'))
    })
    ```
    violetlai
        5
    violetlai  
       2021-08-03 12:19:58 +08:00   ❤️ 1
    感觉你这整个需求想法思路都是不对的

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

    而是通过 node list 的下标来查询操作
    zhuzhuaini
        6
    zhuzhuaini  
    OP
       2021-08-03 13:34:51 +08:00
    @violetlai 是这样的,我是想获取一个表格当中的已经勾选的数据 ID,当我勾选一行时,td 标签中 class 就具有 ui-selected,然后 td 标签中还含有 ID,我就是需要这个 ID 继续进行 post,所以我要获取的就是这个变化的 ID
    sgiyy
        7
    sgiyy  
       2021-08-03 14:03:18 +08:00
    @zhuzhuaini 直接在 行选中 /取消选中 的时候把 id 记录下来维护到一个变量里不更方便么。
    zhuzhuaini
        8
    zhuzhuaini  
    OP
       2021-08-03 14:53:26 +08:00
    @crazybinggan 我快疯了 一直在研究你这个代码 我一直以为 document 前面的...的意思是省略号,意思是我前面的代码,,,,,,,所以我一直在琢磨这个代码到底啥意思 测来测去测了好几个小时,就是折腾不出 id 来,直到刚刚偶然间,,,我把前面的...复制过去忘了删掉,,然后跑了下发现直接出 ID 了。。。。。我人都傻了!!!!!
    asdjgfr
        9
    asdjgfr  
       2021-08-03 16:52:40 +08:00
    @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
        10
    crazybinggan  
       2021-08-03 18:02:15 +08:00
    @zhuzhuaini #9 楼补充了,怪我没说清楚 XD,不过这课上得印象深刻 :doge
    libook
        11
    libook  
       2021-08-04 10:38:22 +08:00   ❤️ 2
    上面应该已经解决题主的问题了。

    建议题主去 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
        12
    zhuzhuaini  
    OP
       2021-08-04 13:58:27 +08:00
    @libook 十分感谢,我确实没有看过文档,基本上就是我有一个需求,我就按照传统的思维去把他实现,遇到网上查不到的不好描述的就只能来发帖问了,这样确实不好,您的建议我觉得很好,有空时确实应该多看看相关文档,这样就可以做到像您说的最起码能想到有类似功能可以实现。 再次感谢!
    @crazybinggan 确实映像深刻!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2716 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 11:03 · PVG 19:03 · LAX 03:03 · JFK 06:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.