DOM操作之自定义属性

1、介绍

我们在学习JavaScript中的DOM时，可以在使用DOM操作元素的时候，给元素添加一些原本没有的属性，来记录一些不重要的数据。

2、作用

在使用自定义属性的时候，我们可以将标签来记录一些不保密的数据，但是又要跟随元素变化而变化的数据。

3、获取属性值

元素对象.属性名
元素对象.getAttribute(属性名)

  <input type="text" id="tBox"><script>window.onload = function() {var tBox = document.querySelector("#tBox");var value = tBox.getAttribute("type");console.log(value);}</script>

3.1 区别

通过(对象名.属性名)获取到的时元素的属性值，并且对css属性以css形式返回。但不能获取自定义属性的值。而通过(对象名.getAttribute(属性名))获取属性值，返回的结果以字符串体现，可以获取到自定义属性的值。

4、设置属性值

元素对象.属性名=属性值；
元素对象.setAttribute(属性名,属性值)；

**注意：**属性名完全按照元素原本的属性名设置，否则将是自定义属性

4.1 区别

通过(元素对象.属性名=属性值)的方式只能设置元素对象原有的一些属性，无法设置自定义属性。而通过(元素对象名.setAttribute(属性名，属性值))的方式可以设置任何属性，包括自定义属性

5、移除属性

//移除格式：元素对象.removerAttribute("属性名");
// 案例：<input type="text" id="tBox"><script>window.onload = function() {var tBox = document.querySelector("#tBox");// 设置自定义属性tBox.setAttribute("data-name", "123456");//移除自定义属性tBox.removerAttribute("data-name");}</script>

6、H5自定义属性

6.1 作用

为了保存一些不重要的数据，这些数据可以保存到页面里，而这些数据不需要保存到服务器数据库中。

6.2 注意

自定义属性获取和创建基本数都是通过与Attribute有关的两个函数实现的
自定义属性有可能会产生很多歧义，并且不是很好区分标签的原有属性和自定义属性
为此，H5新增了自定义属性

6.2 规则

H5里面规定自定义属性必须以"data-"开头作为属性名称并赋值
获取H5自定义属性和设置自定义属性依然使用Attribute函数

在H5里面新增了dataset属性（在IE11里面才能被支持），dataset属性会将这个元素的所有自定义属性全部以键值对的方式保存起来，并且也可以通过该属性获取属性值

//dataset属性获取属性值的格式：
元素名.dataset.属性名;
元素名.data["属性名"]；
//注意：这里的属性名不包含data-
//案例：<input type="text" id="tBox"><script>window.onload = function() {var tBox = document.querySelector("#tBox");// 设置自定义属性tBox.setAttribute("data-name", "123456");// 输出dataset属性值保存的自定义属性和值console.log(tBox.dataset);//通过dataset属性获取自定义属性的值console.log(tBox.dataset["name"]);console.log(tBox.dataset.name);}</script>

DOM操作之自定义属性相关推荐

03-老马jQuery教程-DOM操作(上）
jQuery DOM操作在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...
JavaScript（五）—— Web APIs 简介/JavaScript 必须掌握的 DOM 操作 (丰富案例 + 思维导图）
本篇为 JavaScript 系列笔记第五篇,将陆续更新后续内容.参考:黑马程序员JavaScript核心教程,前端基础教程系列笔记: JavaScript(一)-- 初识JavaScript / ...
JavaScript中DOM操作
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
JS的DOM操作1--获取元素与修改元素(附带动图案例)
1.获取元素与修改元素 https://blog.csdn.net/TroyeSivanlp/article/details/120580055 2.创建自定义属性和节点 https://blog.c ...
JS的DOM操作3--删除事件，注册事件与冒泡⭐⭐⭐(附带动图案例)
1.获取元素与修改元素 https://blog.csdn.net/TroyeSivanlp/article/details/120580055 2.创建自定义属性和节点 https://blog.c ...
前端性能优化总结/懒加载、函数节流、优化dom操作、雪碧图、合并文件
1.减少 HTTP 请求数量在浏览器与服务器进行通信时,主要是通过 HTTP 进行通信.浏览器与服务器需要经过三次握手,每次握手需要花费大量时间.而且不同浏览器对资源文件并发请求数量有限(不同浏览器 ...
DOM操作（创建、增、删、改、查、属性操作、事件操作）
关于dom操作,我们主要针对于元素的操作.主要有创建.增.删.改.查.属性操作.事件操作. 1.创建 1.document.write 2.innerHTML 3.createElement 2.增加 ...
如何使用前端DOM操作制作一个便签：
如何使用前端DOM操作制作一个便签: 当你看到这张要实现功能的图片时,不知道你现在的心情如何?反正我看到这张图片的时候心情就跟着张图片的背景颜色一样灰暗! 只要你在动手敲代码前想好各大功能应该要怎么实 ...
对于DOM操作你了解多少（手风琴+选字游戏）
目录 DOM 简介: DOM结构增: 练习: 删练习: 改练习: 查常用的节点属性获取方式 DOM控制CSS样式 1.通过style属性控制样式 2.通过classList控制样式 1.节点写 ...

DOM操作之自定义属性

DOM操作之自定义属性

目录：

1、介绍

2、作用

3、获取属性值

3.1 区别

4、设置属性值

4.1 区别

5、移除属性

6、H5自定义属性

6.1 作用

6.2 注意

6.2 规则

DOM操作之自定义属性相关推荐

最新文章

热门文章