js抓取list中item的html,JS基础篇

阅读: 评论:0

js抓取list中item的html,JS基础篇

js抓取list中item的html,JS基础篇

页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类。

添加类(add)

元素添加多个类:

移除类(remove)

使用remove方法,你可以删除单个CSS类:

移除多个类:

切换类(toggle)

这个方法的作用就是,当myDiv元素上没有这个CSS类时,它就新增这个CSS类;如果myDiv元素已经有了这个CSS类,它就是删除它。就是反转操作。

le('myCssClass'); //现在是增加

le('myCssClass'); //现在是删除

是否存在类(contains)

检查是否含有某个CSS类:

var x = ElementById("myDIV").ains("mystyle");

结果是true或者false。

length属性

返回类列表中类的数量。

查看

元素有多少个类名:

var x = ElementById("myDIV").classList.length; //3

获取获取

元素的所有类名: I am a DIV element

var x = ElementById("myDIV").classList;

item(index)

返回类名在元素中的索引值。索引值从 0 开始。如果索引值在区间范围外则返回 null

获取

元素的第一个类名(索引为0):

var x = ElementById("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可以参考如下两篇文章:

本文发布于:2024-02-04 10:57:53,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/170705611654960.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:基础   list   js   item   JS
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23