DOM扩展中CSS类扩展(总结)

了解一下

  HTML5中增加了一些特性以方便使用CSS类。

下面精简介绍一下有关CSS类的一个方法(getElementsByClassName())和一个属性(classList)

1.getElementsByClassName()方法

(IE9及以上版本(部分)和所有现代游览器实现了classList属性)

1.1 作用(用法)：

  向括号中传入一个或者多个类名字符串，返回一个相应类的元素的HTMLCollection对象 --补充：可以用for-of、item()和中括号方法取到HTMLCollection对象中的某个元素

1.2 示例：

<div class="qq">	
	<a href="" class="qq"></a>
	<a href="" class="qq"></a>
	<a href="" class="qq"></a>
	<a href="" class="qq"></a>
</div>

<script type="text/javascript">
	let qq = document.getElementsByClassName("qq");
	console.log(qq);
</script>

1.2.1 结果图

  如下图：会返回一个HTMLCollection对象

2.classList属性

（IE10及以上版本(部分)和其他主流游览器(完全)实现了classList属性）

注：HTML5已经给所有元素添加了classList属性。cassList属性又是新集合类型DOMTokenList地实例。

2.1 DOMTokenList的方法

classList是DOMTokenList集合下的一个实例，所以classList也可以使用以下表格中介绍的方法

方法	定义(作用)
add(value)	向类名中添加指定字符串
contains(value)	返回布尔值，查看value是否存在
remove(value)	移除类名中地指定字符串
toggle(value)	在类名字符串中，若有value，则删除；若没有，则添加。

2.2 作用(用法)

  更加方便安全地对类class进行修改、删除、添加。

2.3 示例：

2.3.1 add() 方法

<div class="one two three"></div>
		
<script>
    var el = document.querySelector("div");
    console.log(el.classList);
	el.classList.add("four");//向div元素的类中添加字符串 “four”
</script>

2.3.1 的结果图

2.3.2 remove()

<div class="one two three"></div>
	
<script>
	var el = document.querySelector("div");
	console.log(el.classList);
	el.classList.remove("one");
</script>

2.3.2 的结果图

2.3.3 contains() 方法

<div class="one two three"></div>
		
<script>
	var el = document.querySelector("div");
	console.log(el.classList);
	const result = el.classList.contains("one");
	console.log(result);//若div的类中有“one”字符串，就会输出true
</script>

2.3.3 的结果图

2.3.4 toggle() 方法

<div class="one two three"></div>

<script>
	var el = document.querySelector("div");
    console.log(el.classList);
	el.classList.toggle("four");//div元素中的类中没有“four”这个字符串，则会添加
</script>

2.3.4 的结果图