dataset和setAttribute

最新推荐文章于 2024-04-22 10:57:48 发布
最新推荐文章于 2024-04-22 10:57:48 发布
阅读量338 收藏
点赞数 4
分类专栏： 前端开发 文章标签： 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/doiido/article/details/134515879
版权

在项目开发中经常在js中使用setAttribute来设置自定义属性，最近发现dataSet用法跟setAttribute相似，下面来具体学习下他们的区别。

1、dataSet【自定义数据属性】


（1）HTMLElement.dataset 属性允许无论是在读取模式和写入模式下访问在 HTML或 DOM中的元素上设置的所有自定义数据属性(data-)集。
（2）所谓的data-实际上就是data-前缀加上自定义属性名；但是在获取或者添加自定义属性的时候要去掉前缀data-;
 

2、getAttribute和setAttribute

setAttribute() 方法为一个或一组元素添加指定的属性，并且为其赋指定的值。（主要针对自定义属性）

如果这个属性已经存在，仅仅设置或是修改属性值。

getAttribute() 方法返回元素上一个指定的属性值。

如果指定的属性值不存在，就返回 null 或是 ""（空字符串）。

3、getAttribute和setAttribute及dataset的区别？


1、共同点：dataset和setAttribute一样都是可以自定义属性，但dataset是偏向自定义的数据集的,可以类似于地址信息这些，就是说dataset是setAttribute一个子集，是更为确切一部分信息的集合。

2、不同点：命名上不同，dataset内只有带data-前缀的属性；

<head>
    <meta charset
最低0.47元/天 解锁文章
dataset的使用(结合vue使用碰到了坑)
m0_51431448的博客
12-23 5357
在HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放。 <div data-id="test">test</div> 这里的data-前缀就被称为data属性;我们可以通过dataset来获取data属性。下面是两个例子： 例1： <body> <div id="div1" data-index="0" data-a="牛啊牛啊">test1</div> <div id="div2" .
自定义属性dataset
小姑姑的博客
11-02 665
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义数据</title> <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById('d
有关getAttribute()方法和setAttribute()方法的说明
热门推荐
helanye的专栏
07-21 3万+
js getAttribute()方法●一份文档就是一棵节点树。   ●节点分为不同的类型：元素节点、属性节点和文本节点等。   ●getElementById()方法将返回一个对象，该对象对应着文档里的一个特定的元素节点。   ●getElementsByTagName()方法将返回一个对象数组，它们分别对应着文档里的一个特定的元素节点。   ●这些节点中的每个都是一个对象。
Html5 dataset--自定义属性
weixin_34246551的博客
10-24 106
dataset--自定义属性 HTMLElement.dataset data-*属性集 元素上保存数据 <div id="user" data-id="123456" data-account-name="liujl" data-name="刘江龙" data-email="757617012@qq.com" data-m...
设置自定义属性：setAttribute、获取自定义属性两种方法：getAttribute(‘data-index‘),div.dataset[‘index‘] / div.dataset.index
*
01-01 1598
<div getTime="20" data-index="2" data-list-name="andy"></div> <script> var div = document.querySelector('div'); // console.log(div.getTime); console.log(div.getAttribute('getTime')); div.setAttribut...
DOM操作元素属性：setAttribute、getAttribute、removeAttribute、dataset的用法
YY的博客
10-18 903
DOM操作元素属性
dataset的使用
xm2by的博客
09-11 2190
dataset的使用 dataset用来为html普通标签设置自定义属性，方便储存一些数据 1、dataset的设置 setAttribute() datasetAPI设置 2、dataset的获取 getAttribute() datasetAPI获取 参考文献： [1] Html5 DataSet...
C# XML操作 代码大全(读XML,写XML,更新,删除节点,与dataset结合等)第1/2页
10-29
- 可以使用XmlDataDocument类将dataset和XML文档关联起来，这允许对XML数据使用dataset的强类型查询和更新功能。 7. XML与数据库交互 - 在实际应用中，XML数据经常与数据库交互，例如将数据库中的数据导出为XML...
js中的dataset问题
Echo是包子脸的博客
03-29 1万+
昨天刷了IFE的任务，第十六个任务，任务详情是这样的：任务描述 参考以下示例代码，用户输入城市名称和空气质量指数后，点击“确认添加”按钮后，就会将用户的输入在进行验证后，添加到下面的表格中，新增一行进行显示 用户输入的城市名必须为中英文字符，空气质量指数必须为整数 用户输入的城市名字和空气质量指数需要进行前后去空格及空字符处理（trim） 用户输入不合规格时，需要给出提示（允许用alert，
dom h5自定义属性 dataset（获取）
qq_45827064的博客
05-17 623
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
html5自定义属性--------Dataset
最新发布
柑橘乌云_
04-22 995
div class="mm" data-name="无版权">.mm[data-name='无版权']{background:url(mm1.jpg) no-repeat;DOMStringMap对象。
HTML5的自定义属性data-*
从现在go，一切都不迟
12-25 2004
HTML5 增加了一项新功能是 自定义数据属性 ，也就是 data-* 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性，来进行一些数据的存放， // 使用getAttribute获取 data- 属性 var user = document . getElementById ( 'user' ) ; var userName = plant . get
HTML5中的数据集dataset和自定义属性data-*
Wang的专栏
04-24 5072
在html5中可为所有元素添加一种自定义的属性，这种属性的前缀以data-开头，比如：data-name,目的是为元素提供与页面渲染无关，但与dom元素强相关的属性。添加完自定义属性后我们可以通过元素的dataset属性来访问其值。dataset与getAttribute/setAttribute的对比 在此之前的访问属性的方式我们用getAttribute/setAttributehtml 结构：
属性补充操作-dataset操作自定义属性-修改-新增-删除
不懂帕斯的博客
04-21 1454
01-属性补充操作-dataset操作自定义属性-修改-新增-删除 <body> <ul> <!-- li如果自带下标的话：用起来就方便了 --> <li data-index="10" class="item">隔壁老王1</li> <li data-index="1" class="item">隔壁老王2</li> <li data-index
html标签属性中加data,HTML 5 的data-* 自定义属性
weixin_28795975的博客
05-31 341
HTML 5?增加了一项新功能是?自定义数据属性?，也就是??data-*?自定义属性。在HTML5中我们可以使用以?data-?为前缀来设置我们需要的自定义属性，来进行一些数据的存放。当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中非常有用。例如：使用attribute方法存取?data-*?自定义属性的值使用attributes方法存取?data-*?自定义属性的值非常方便：// 使...
前端知识点总结——Vue父子组件执行顺序 / dataset
qq_33290968的博客
09-23 526
Vue 父子组件执行顺序 由外而内，再由内而外 加载顺序： 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted 当父组件执行完beforeMount挂载开始后，会依次执行子组件中的钩子，直到全部子组件mounted挂载到实例上，父组件才会进入mounted钩子 触发顺序： 父beforeUp
HTML5自定义属性对象Dataset简介 前端学习第九节
lichuanpeng的博客
06-30 335
HTML5自定义属性对象Dataset简介 转载文章： http://www.cnblogs.com/leejersey/p/3487269.html
dataset html5,HTML5的dataset属性
weixin_31569663的博客
06-19 272
上个月一直再做前端的东西，接触到了data-*这个东西。其实以前也在Bootstrap的代码里看到过，以为是Bootstrap的标准，没在意。现在才发现这是html5的标准，浏览器得支持html5才能使用，所以IE9以下的都跪了。(其实，同样是老版本，Chrome，firefox什么的都有老版本，但没有人说有问题，因为都能版本更新，但奇葩的IE，IE6，IE8，IE9等等这些都像是不同的产品一样，...
JS-10 元素的特性/分类/操作、dataset、JS动态修改样式class/style、className和classList、元素的创建/插入/移除/克隆、元素/Windows的大小与滚动
qq_54075517的博客
06-06 1637
元素的特性/分类/操作、dataset、JS动态修改样式class/style、className和classList、元素的创建/插入/移除/克隆、元素/Windows的大小与滚动
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值