原生dom的dataset属性

最新推荐文章于 2024-03-05 18:04:30 发布

原创最新推荐文章于 2024-03-05 18:04:30 发布 · 556 阅读

0 ·

CC 4.0 BY-SA版权

原生专栏收录该内容

12 篇文章

订阅专栏

本文探讨了在前端开发中如何使用JavaScript为DOM元素添加事件监听器，并利用dataset属性读取HTML元素上的自定义数据属性，实现数据与事件处理的结合。

<div data-id="id" data-age="age" id="user">display name</div>

document.getElementById("user").addEventListener("click",(e)=>{
						console.log(e.target.dataset)

					})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

于丸

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【JS笔记】JS中的DOM对象以及通过JS获取DOM结点，操作DOM属性、DOM增删改查

✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过优快云记录学习心得和笔记内容。

11-09

2290

DOM，全称是：Document Object Model，文档对象模型，它主要是用于描述HTML文档对象的。一个HTML页面是由许多的标签组成的，例如：html、head、body、div等等标签元素，JS里面将整个的HTML作为一个document文档来进行管理，其中HTML里面的每一个标签都是一个DOM结点。HTML里面所有的DOM结点构成了一颗DOM树，这就有点类似于二叉树了，只不过DOM里面的树是多叉树，因为HTML里面的标签里面可以嵌套许多其他的标签。...

Dom获取&属性操作

AtangHUANG的博客

05-31

589

Dom获取&属性操作

参与评论您还未登录，请先登录后发表或查看评论

javascript总结44: DOM对象的dataset属性方式

anjiye7641的博客

05-08

505

1 DOM设置属性的特殊方式: DOM对象的dataset属性方式获取data-xxx方式定义的属性由于我们经常需要在标签上自定义属性来存储数据或状态,但是如果用传统的方式操作起来比较繁琐,而且不熟悉html规范的人,很容易把自定义的属性和html规范的属性混淆.为了更加方便,高效的实现这个需求,我们可以使用dataset属性 2使用DOM对象的dataset属性,操作自定义属...

DOM对象的dataset属性

热门推荐

小姜哥的技术博客

12-11

1万+

HTML5规定DOM对象中有个dataset属性对象，可以在该对象中存一些与该DOM对象相关的数据。如上写法是在生成dom对象时对dataset的一个初始化的动作，dataset中会存在一个id属性和age属性。这里需要注意data-仅仅是一个约定好的前缀，在生成DOM对象时所有已data-开头的属性会将其去掉前缀data-后存在dataset中。

HTML5

h360583690的博客

08-12

412

前言本文关于HTML5其中一些更新内容的介绍，希望能学到新的知识。 HTML5属于上一代HTML的新迭代语言，设计HTML5最主要的目的是为了在移动设备上支持多媒体！多了一些新的语义标签和表单元素，例如video 标签和 audio 及 canvas 标记。跨平台性非常强大，但pc端浏览器支持不是特别友好，造成用户体验不佳。 1.网页布局结构标签 <header></header> 头部。 <footer>&l...

Dom模型之dataset属性/Html元素标签的data-*属性

wsxujiacheng的博客

07-19

4014

dataset属性有时，需要在HTML元素上附加数据，供JavaScript脚本使用。一种解决方法是自定义属性。 id="mydiv" foo="bar"> 上面代码为div元素自定义了foo属性，然后可以用getAttribute()和setAttribute()读写这个属性。 var n = document.getElementById('mydiv')

DOM的dataset属性 / 元素标签的data-* 属性

qq_39706777的博客

11-24

2217

data-* 可以让我们在所有 HTML 元素上嵌入自定义 data 属性。定义 data-* 属性的规则：属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符属性值可以是任意字符串 <textarea id="address" data-name="yyy" data-role="xxx"></textarea> const dom = document.querySelector("#address") // 获取元素节点的所有 dat.

vue 通过DOM对象属性获取另一个DOM对象实例

最新发布

08-13

方法1：使用原生DOM方法（适用于简单场景） - 步骤： a. 获取A元素（比如通过ref或者document.querySelector） b. 从A元素上获取属性值，如：const targetId = aElement.getAttribute('data-target'); c. 使用...

用原生dom实现发表评论，时间，表情，点赞，回复

06-13

好的，下面是一个使用原生DOM实现发表评论、显示时间、添加表情、点赞和回复功能的示例代码： ```html <!DOCTYPE html> 评论功能示例评论功能示例  发表评论  ...

从DOM节点提取data属性的JavaScript工具

值得注意的是，原生 JavaScript 已经提供了 `dataset` 属性用于访问 data 属性，例如 `element.dataset.loadingLabel` 对应 `data-loading-label`，但存在一些限制：仅支持 `data-` 后接字母开头且使用驼峰命名法的...

DOM兼容-elemen.dataset

bp0002的博客

08-16

390

element.dataset能够获取元素的自定义属性，但是低版本的ie不支持

dataset(方便取自定义属性&更改属性),dom元素可编辑

nicecode

01-21

796

1.dataSet <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="test" data-baidu-qq="qq"> </div> </body> <script type="text/javascr

jquery的data()方法与html5中DOM标签的dataset属性异同

钢铁鸭

08-07

473

<div id="myModal" calss=".modal" data-h-m="youhhhhh" ></div> <script> $(function () { console.info(2,$("#myModal").data("hM"));

JavaScript操作DOM对象

zrd26855的博客

03-05

1061

本文是在B站学习pink老师的视频记的笔记，如果想了解更多的，欢迎去找视频看

原生JS填坑

weixin_51302229的博客

05-24

999

目录循环遍历创建DOM只能插入一个本地存储和会话存储输出语句 document.write 变量命名规则两种数据类型检测的区别循环遍历创建DOM只能插入一个问题：在动态创建列表时，通过页面加载函数获取到后台数据后，循环遍历创建dom节点时，只能插入最后一个的数值的节点然而获取的数据结构为：对应下可以看出执行遍历后，只是传递了最后一个值，之前的值都被覆盖了，问题代码如下： window.onload = function getdata(){ $.ajax

Vue 获取dom元素中的自定义属性值

Stars_in_rain的博客

08-12

3723

方法一：通过绑定函数传参直接获取DOM元素自定义的值 <div id="app"> <button @click="getData($event,'100')"></button> </div> methods : { getData(e,num) { console.log(num); // 100 } } 方法二：通过$ref属性获取 <div id="app"> <button dat

dataset api_element.dataset API

Web 开发&软件开发

07-24

206

element.dataset API 不久前，我向您展示了很棒的classList API ，它允许简单地添加，删除和切换CSS类，而无需解析className。在FireFox Aurora Firefox 6中，在打印和使用Chrome 8 时，另一个可用的简单API是element.dataset API 。这个微小的API允许开发人员获取和设置HTML元素上的数据属性值。 ...

原生js 获取自定义属性

weixin_46352937的博客

06-04

3132

原生js 获取自定义属性的两种方法

实现客户端的DataSet

weixin_30915275的博客

01-19

107

<PUBLIC:COMPONENT lightWeight="true"> <PUBLIC:PROPERTY name="Name" value="DataSet" /> <PUBLIC:PROPERTY name="Namespace" value="http://tempuri.org" /> <PUBLIC:P...