本文主要是介绍js抓取list中item的html,JS基础篇--HTML DOM classList 属性，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList，程序员还可以用它来判断某个节点是否被赋予了某个CSS类。
添加类(add)
document.getElementById("myDIV").classList.add("mystyle");
为
document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
移除类(remove)
使用remove方法，你可以删除单个CSS类：
document.getElementById("myDIV").classList.remove("mystyle");
移除多个类：
document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");
切换类(toggle)
这个方法的作用就是，当myDiv元素上没有这个CSS类时，它就新增这个CSS类；如果myDiv元素已经有了这个CSS类，它就是删除它。就是反转操作。
document.getElementById("myDIV").classList.toggle("newClassName");
myDiv.classList.toggle('myCssClass'); //现在是增加
myDiv.classList.toggle('myCssClass'); //现在是删除
是否存在类(contains)
检查是否含有某个CSS类:
var x = document.getElementById("myDIV").classList.contains("mystyle");
结果是true或者false。
length属性
返回类列表中类的数量。
查看
var x = document.getElementById("myDIV").classList.length; //3
获取获取
var x = document.getElementById("myDIV").classList;
item(index)
返回类名在元素中的索引值。索引值从 0 开始。如果索引值在区间范围外则返回 null
获取
var x = document.getElementById("myDIV").classList.item(0); //mystyle
浏览器支持
但是IE9和IE9以前的版本不支持该属性，下面这个代码可以弥补这个遗憾：(来自网友代码)
if (!("classList" in document.documentElement)) {
Object.defineProperty(HTMLElement.prototype, 'classList', {
get: function() {
var self = this;
function update(fn) {
return function(value) {
var classes = self.className.split(/\s+/g),
index = classes.indexOf(value);
fn(classes, index, value);
self.className = classes.join(" ");
}
}
return {
add: update(function(classes, index, value) {
if (!~index) classes.push(value);
}),
remove: update(function(classes, index) {
if (~index) classes.splice(index, 1);
}),
toggle: update(function(classes, index, value) {
if (~index)
classes.splice(index, 1);
else
classes.push(value);
}),
contains: function(value) {
return !!~self.className.split(/\s+/g).indexOf(value);
},
item: function(i) {
return self.className.split(/\s+/g)[i] || null;
}
};
}
});
}
这儿提示一下，其他类型值转换成布尔值的对应关系，对应关系表如下所示：
其他类型值
转换成的布尔值
undefined
false
null
false
布尔值
不用转换
数字
0，NaN转化成false，其他数字类型转换成true
字符串
只有空字符串''转换成false，其他都转换成true
对象
全部转换为true
想要了解Object.defineProperty可以参考如下两篇文章：
这篇关于js抓取list中item的html,JS基础篇--HTML DOM classList 属性的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
