js DOM操作自定义属性

自定义属性：在日常开发中，html的内置属性已经无法满足程序员的日常开发，所以需要我们自己定义属性，H5给我们新增了自定义属性，为了防止自定义属性和内置属性引起歧义，所以H5规定自定义属性以data-开头定义。

1. 获取元素的属性值

element.属性名
element.getAttribute(“属性名”)

element.属性名和 element.getAttribute(“属性名”) 的区别：

element.属性名：获取的是内置属性(元素本身自带的属性)，不能获取自定义属性；
element.getAttribute(“属性名”)：主要获取我们自定义属性，当然也可以获取内置属性。

<body><input type="text" value="你好" data-index="0" />
</body><script>const input = document.querySelector("input");console.log(input.value); // "你好"console.log(input.getAttribute("value")); // "你好"console.log(input.getAttribute("data-index")); // "0"
</script>

2. 设置元素的属性值

element.属性名 = “值”
element.setAttribute(“属性名”，“值”)

element.属性名 = “值” 和 element.setAttribute(“属性名”，“值”) 的区别：

element.属性名 = “值”：主要用来设置内置属性；
element.setAttribute(“属性名”，“值”)：主要用来设置/添加自定义属性，也可以设置内置属性；

<body><input type="text" value="你好" data-index="0" />
</body><script>const input = document.querySelector("input");input.value= "hello";console.log(input.value); // "hello"input.setAttribute("value", "hi");console.log(input.getAttribute("value")); // "hi"input.setAttribute("data-index", "1");console.log(input.getAttribute("data-index")); // "1"input.setAttribute("data-name", "shy");console.log(input.getAttribute("data-name")); // "shy"
</script>

3. 移除属性

element.removeAttribute(“属性名”)：可以移除内置属性，也可以移除自定义属性。

<body><input type="text" value="你好" data-index="0" />
</body><script>const input = document.querySelector("input");input.removeAttribute("value");input.removeAttribute("data-index");
</script>

移除前：

移除后：

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

js dom操作实现雪花下落
关于使用dom操作完成雪花下落的实现关于实现雪花下落的实现实现代码段如下 <!DOCTYPE html> <html lang="en"> <he ...
js节点操作自定义属性
JS自定义属性和节点操作 1.节点是什么? 所谓的节点操作指的是:网页中的所有内容都是节点(标签.属性.文本.注释等),在DOM 中,节点使用 node 来表示.所有 HTML 元素(节点)均可被修改 ...
JS DOM 操作实现代码
简单的表格: 复制代码代码如下: <table> <tr> <td id="TEST"> <input type="submi ...
java冒泡函数解释,JS DOM操作函数事件阻止事件冒泡
一函数 1.字符串函数 s.tolowerCase( ): -- 变小写 s.toupperCase( ): -- 变大写 s.substr( 2 , 8 ): -- 截取 ...
js dom 操作实例图解
以下操作的是www.ibm.com: 下面是在js调试控制台中操作: 根据id和name获取元素对象:获取对象后获取值用getAttribute: 遍历一个元素的属性集合,输出属性的名字和值: 遍历一 ...
js DOM操作元素样式
element.style 行内样式操作 element.className 类名样式操作 1. element.style 上下文是获取到的元素: 通过element.style.某个css样式设 ...
前端案例：像素鸟小游戏（js+dom操作，完整代码，附案例素材）
目录一.案例效果二.实现思路三.完整代码+详细注释四.案例素材一.案例效果二.实现思路创建游戏背景板和小鸟,并分别设置相对定位与绝对定位: 初始化背景图的位置: 初始化小鸟的位置: 设置 ...
JS DOM操作基础
1.创建节点 //(1).创建元素节点 var ele1 = document.createElement("div"); //(2).创建文本节点 var text1 = doc ...
MV* 框架与 DOM操作为主 JS库的案例对比
最近分别使用 Zepto 和 Avalon框架写了个 SPA项目,贴出来讨论下 JS DOM操作为主 JS库与 MV* 框架的对比案例(MV* 框架与 DOM操作 JS库实例对比) 购物车页面 ...

js DOM操作自定义属性

1. 获取元素的属性值

element.属性名和 element.getAttribute(“属性名”) 的区别：

2. 设置元素的属性值

element.属性名 = “值” 和 element.setAttribute(“属性名”，“值”) 的区别：

3. 移除属性

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

最新文章

热门文章

js DOM操作自定义属性

1. 获取元素的属性值

element.属性名 和 element.getAttribute(“属性名”) 的区别：

2. 设置元素的属性值

element.属性名 = “值” 和 element.setAttribute(“属性名”，“值”) 的区别：

3. 移除属性

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

最新文章

热门文章

element.属性名和 element.getAttribute(“属性名”) 的区别：