Html5学习笔记 ——— H5新增方法classList/dataSet

本文链接：https://blog.youkuaiyun.com/weixin_43340295/article/details/109909507

本文详细介绍了HTML5中的classList属性，包括添加、删除、判断和切换DOM元素类的方法，并探讨了dataSet接口，展示了如何设置、访问和删除自定义属性，以及与getAttribute和setAttribute的区别。此外，还提到了通过dataSet设置CSS样式的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

classList

前言

classList方法可以获取到这个dom元素的类的对象，但是目前classList属性只有FireFox3.6+和Chrome支持。

add(value) —— 添加一个类
contains(value) —— 判断有没有某个类
remove(value) —— 删除一个类
toggle(value) —— 切换一个类
replace() —— 替换一个类

Style

<style type="text/css">
	#box {
		border: 1px red solid;
		width: 400px;
		height: 400px;
	}
	#box.add_color{
		background-color: #33CCFF;
	}
	#box.add_border{
		border: 2px deeppink solid;
	}
	.aa{
		background-color: #666ccc;
	}
</style>

Html

<body>
	<div id="box"></div><br><br>
	<input type="button" value="增加">
	<input type="button" value="删除">
	<input type="button" value="获取">
	<input type="button" value="判断">
	<input type="button" value="切换">
	<input type="button" value="替换">
</body>

<script type="text/javascript">
	// 获取节点 
	var box =document.getElementById('box');
	var skill=document.querySelectorAll('input');
</script>

增加一个类

// 如果值已经存在，就不添加了。
box.classList.add('add_color','add_border','test')

删除一个类

box.classList.remove('add_border','add_color')

获取类

//获取类的数量
console.log(box.classList.length)

判断类

// 判读有没有包含这个类，如果有返回true，否则返回false
console.log(box.classList.contains('add_border')

切换一个类

// 无则添加，有则删除
box.classList.toggle('add_border')

替换一个类

box.classList.replace('add_color','aa')

dataSet

前言

HTML5规定可以为元素添加非标准的属性，但要添加前缀 data- ，目的是为元素提供与渲染无关的信息，或者提供语义信息。

这些属性可以任意添加、随便命名，只要以 data- 开头即添加了自定义属性之后，可以通过元素的 dataset 属性来访问自定义属性的值。
第一种设置自定义的方式，直接在元素便签上书写
```
<div id="divName" data-uname="xiaoxiao">点击我</div>
```
第二种通过dataSet设置自定义属性
```
<script type="text/javascript">
	var el =document.getElementById('divName');
	console.log(el.dataset)		//DOMStringMap
</script>
```
补充：DOMStringMap 接口在 HTMLElement.dataset 属性中被用到，被用于容纳和展示元素的自定义属性。
```
// 添加一个自定义属性
el.dataset.sex='女'
```
添加后，自定义属性在dom对象中的表现形式为：
```
<div id="divName" data-sex="女">点击我</div>
```
即，自动添加data- 前缀。

同时，添加自定义属性时，不需要带上data- 前缀，否则会报错。
```
//错误添加
 el.dataset.data-usex="cs"
```
通过dataSet获取自定义属性
```
//获取
console.log(el.dataset.uname)
//错误获取
console.log(el.dataset.data-uname)
```
注意：在添加或者获取自定义属性时，都需要去掉data-前缀

语法规则


<div id="divName" data-zhuiMeng="追梦" data-je-ffrey="jeffrey">点击我</div>


//不区分大小写，只识别小写
console.log('data-zhuiMeng:',el.dataset.zhuimeng) 	//data-zhuiMeng:追梦

//连着的字符需要转化为驼峰命名
console.log('data-je-ffrey:',el.dataset.jeFfrey)

注意一：在获取自定义属性时，不区分大小写，只是别小写。
注意二：如果属性名连着字符，获取自定义属性时，需要转化为驼峰命名。

通过dataset设置css样式

style

<style type="text/css">
	[data-set-css]{
		background-color: #33CCFF;
		width: 200px;
		height: 200px;
	}
</style>

如何通过dataSet获取到data-set-css样式？

[data-set-css]为属性选择器，即为有data-set-css属性的元素添加该样式。

利用dataSet为el元素添加data-set-css属性名，因为有字符连接，所以使用驼峰命名。即：

el.dataset.setCss='设置css样式'
console.log('setCss:',el.dataset['data-set-css'])	//undefined
console.log('setCss:',el.dataset['set-css'])		//undefined

console.log('setCss:',el.dataset['setCss'])			//设置样式
console.log('setCss:',el.dataset.setCss)			//设置样式

删除数据

delete el.dataset.uname
delete el.dataset['setCss']

getAttribute和setAttribute及dataset的区别？
1. 共同点：两者都将属性设置在attribute上，也就是说getAttribute和setAttribute获取dataset中的内容，dataset的内容之事attribute的子级。
2. 不同点：命名上不同，dataset内只有带data-前缀的属性。
3. 问：那么为甚还要使用data-*呢？
  
  答：我们可以把所有自定义的属性在dataset对象中统一管理，遍历什么的都是很方便，而setAttribute设置的值需要一个个进行获取。