除非data-*自定义数据属性的值是固定不变的,否则最好不要把data-*作为查询条件。

例子:

<div data-index="0">hello</div>

var div= document.querySelector("div[data-index=\"0\"]");

console.log(div);//正常

div.dataset.index=1;//更新属性值

var newDiv= document.querySelector("div[data-index=\"1\"]");//使用更新后的属性值来查询元素

console.log(newDiv);//查询不正常,找不到data-index为1的元素,因为自定义数据的值被修改后不会同步到页面标签属性中,此时data-index属性值仍是0,更新的不过是dataset中的值

data-* 自定义数据属性 遇到的坑的更多相关文章

  1. jquery 操作HTML data全局属性缓存的坑

    data-* 全局属性 是一类被称为自定义数据属性的属性,它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力,并可以通过脚本(一般指JavaScript) 与 HTML 之间进行专有数据的交换 ...

  2. html5 自定义数据属性 ,也就是 data-* 自定义属性---笔记。

    html5  自定义数据属性 ,也就是 data-* 自定义属性.  例如 <div data-last-value="43" data-hidden="true& ...

  3. 如何使用HTML5自定义数据属性

    在本文中,我将向你介绍如何使用HTML5自定义数据属性.我还将向你介绍一些开发人员在工作中经常使用的优秀实例. 为什么需要自定义数据属性? 很多时候我们需要存储一些与不同DOM元素相关联的信息.这些信 ...

  4. spring data 自定义查询

    spring data 自定义查询 https://www.cnblogs.com/airycode/p/6535635.html 在方法接口上面使用@Query

  5. 最近项目中使用Spring data jpa 踩过的坑

    最近在做一个有关OA项目中使用spring data JPA 操作数据库,结果遇到了补个不可思议的麻烦.困惑了好久. 首先看一下问题吧,这就是当时测试“设置角色时,需要首先删除该用户已经拥有的角色时” ...

  6. spring data 自定义接口

    1 spring data jpa 虽然说spring data 提供了很多DAO 接口,但是依然可能不能满足我们日常的使用,所以,有时我们需要自定义接口方法.自定义接口方法步骤如下: 1.  创建自 ...

  7. Andorid自定义attr的各种坑

    本文来自网易云社区 作者:孙有军 在开发Andorid应用程序中,经常会自定义View来实现各种各样炫酷的效果,在实现这吊炸天效果的同时,我们往往会定义很多attr属性,这样就可以在XML中配置我们想 ...

  8. C++ sort使用自定义函数的一些坑

    先看代码: 解释:使用自定义比较函数时,如果用了返回值恒为$true$或者恒为$false$的比较函数,就会这样子. 原因: https://stackoverflow.com/questions/4 ...

  9. django 自定义过滤器中的坑.

    今天在创建自定义过滤器的时候,设置已正常.但是在运行后报: 'filter' is not a valid tag library: Template library filter not found ...

随机推荐

  1. UGUI Slider的onValueChanged事件

    在本文,你将学到如何将UGUI Slider的onValueChanged事件进行统一管理. using System; using UnityEngine; using UnityEngine.UI ...

  2. docker安装mongo初体验

    1.docker安装在此不做介绍,请自行百度:个人环境是在windows下运行cmd执行docker命令2.打算在docker下安装使用mongo,顺带熟悉docker,拉开篇章3.docker下安装 ...

  3. JS的正则表达式 - RegExp

    RegExp 对象 RegExp 对象表示正则表达式,它是对字符串执行模式匹配的强大工具. 正则表达式的创建方式 1.文字格式,使用方法如下: /pattern/flags  (即:/模式/标记) 2 ...

  4. ES6内容

    iterator 遍历器iterator makeIterator是个遍历器,生成遍历器对象it var it = makeIterator(['a', 'b']); it.next() // { v ...

  5. npm update常用命令使用

    一.更新 npm-check检查更新 npm install -g npm-check npm-check 2. npm-upgrade更新 npm install -g npm-upgrade np ...

  6. 删除trigger 禁用触发器 启用触发器 查看触发器

    删除trigger drop trigger 触发器名 on 在那个表上 禁用触发器 Alter Table 表名 disable trigger 触发器名 启用触发器 Alter Table 表名 ...

  7. C#导入Excel|读取Excel方法

    OleDbConnection读取 /// <summary>       /// 返回Excel数据源       /// </summary>       /// < ...

  8. 项目开发-->高级功能汇总

    祭奠曾经逝去的青春…… 1.高级功能汇总-->Memcached之ASP.NET实现 2.高级功能汇总-->HubbleDotNet软件安装

  9. WebAPI搭建(二) 让WebAPI 返回JSON格式的数据

    在RestFul风格盛行的年代,对接接口大多数人会选择使用JSON,XML和JSON的对比传送(http://blog.csdn.net/liaomin416100569/article/detail ...

  10. Node.js学习笔记(四) --- fs模块的使用

    目录 . fs.stat 检测是文件还是目录 . fs.mkdir 创建目录 . fs.writeFile 创建写入文件 . fs.appendFile 追加文件 . fs.readFile 读取文件 ...