526互联

第四篇 html5 - 新特性【 Dom操作类 + 自定义标签属性 】

发布时间 2023-03-28 14:41:56作者: caix-1987

html5 新增 Dom 操作类

1、classList 当前元素的所有样式列表

2、add() 添加类

3、remove() 删除类

4、toggle() 有就移出，没有就添加

5、contains() 是否包含某个类，包含返回 true，没有包含返回 false

6、item(n) 查看此项的第 n 个类名，没有此项则值为 null
操作类 代码 示例
<ul>
  <li>我是第一个li</li>
  <li class="remove">我是第二个li</li>
  <li class="toggle">我是第三个li</li>
  <li class="toggle contains">我是第四个li</li>
</ul>

var aLi = document.querySelectorAll("li");

aLi[0].onclick = function () {
	this.classList.add("add")
}

aLi[1].onclick = function () {
	this.classList.remove("remove")
}

aLi[2].onclick = function () {
	this.classList.toggle("toggle")
}

aLi[3].onclick = function () {
	this.classList.contains("contains")
}

console.log(aLi[3].classList.item(1))	// contains

html5 新增 自定义标签属性

定义规范

  1、data-开头，如："data-name-xiaoyang"
  
  2、data- 后必须至少有一个字符串，多个单词使用 - 连接
  
  3、名称应该都是用小写，不要包含任何大写字符
  
  4、名称中不要有任何的特殊符号

  5、名称不要使用纯数字
  
  
  dataset 获取自定义属性的值
  
  必须将 data- 后面的连接词使用 驼峰命名
  
  否则无法正确获取到改属性值。
自定义标签属性 代码 示例
<div data-name-xiaoyang="小阳"></div>

var oDiv = document.querySelector("div")
var dValue = oDiv.dataset["nameXiaoyang"]	//小阳