JS基础篇--HTML DOM classList 属性

snowell 发布于2019-08-01 16:17 / 2252人阅读

摘要：使用，程序员还可以用它来判断某个节点是否被赋予了某个类。现在是增加现在是删除是否存在类检查是否含有某个类结果是或者。属性返回类列表中类的数量。查看元素有多少个类名获取获取元素的所有类名返回类名在元素中的索引值。

页面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

获取获取

元素的所有类名:

I am a DIV element
    
var x = document.getElementById("myDIV").classList;

item(index)

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

元素的第一个类名（索引为0）:

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基础篇--JS apply的巧妙用法以及扩展到Object.defineProperty的使用》

《JS基础篇--JS中的可枚举属性与不可枚举属性以及扩展》

GPU云服务器云服务器属性篇基础篇之基础篇 DOM元素属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50424.html

JS基础篇--如何用JavaScript判断dom是否有存在某class的值？

摘要：例如判断节点的是否有。的实现方式源码的实现方式源码里面用到了，是的属性，属性返回以数字值返回指定节点的节点类型。如果节点是属性节点，则属性将返回。代码需要了解属性，点击属性文章问题地址例如：判断html节点的class是否有no-js。 1.jquery的实现方式 $(html).hasClass(no-js); jquery源码的实现方式： var rclass = ...

马忠志 2019-08-20 14:17 评论0 收藏0
JSLite 的目标：缩小体积，做到 jQuery-free

摘要：转载大牛的分析，这将是的方向。域名分析据统计，目前全世界的网站使用它。的市场份额不断下降，以为基础的标准语法，正得到越来越广泛的支持。下面就探讨如何用标准语法，取代的一些主要功能，做到。转载大牛的分析，这将是JSLite的方向。前人栽树后人乘凉，jQuery为我们制定了一套接口标准，我们继续为此努力。域名：JSLite.io jQuery 分析据统计，目前全世界57.3%...

Scott 2019-08-22 10:55 评论0 收藏0
JavaScript DOM编程基础（DOM属性&事件[叮：事件代理]，Ajax，BOM，f

摘要：推荐事件事件流事件流就是事件处理执行的过程。事件注册事件类型事件处理函数是否在捕获阶段触发。这个就是事件对象第二行的就是事件对象。除了阻止事件传递到父节点，还阻止了当前节点的后续事件。缺陷流量代价，安全性问题，大小限制。文档树 DOM：Document Object Model 即：用对象的形式表示HTML、CSS。 DOM包含： DOM Core DOM HTML DOM Sty...

peixn 2019-08-20 16:13 评论0 收藏0
JavaScript DOM扩展——“HTML5”的注意要点

摘要：如他返回的对象是。方法，这个方法用于确定文档是否获得了焦点。另外，需要注意的是，该属性插入元素并不会执行其中的脚本。在中，方法接收一个字符串，返回一个经过无害处理后的版本。属性同样的，在读模式下返回调用它的元素及所有子节点的标签。与类相关的扩充 getElementsByClassName()方法接收一个参数，即一个或多个类名的字符串。如： console.log(documen...

cppowboy 2019-08-19 17:14 评论0 收藏0