className && classList介紹

時間 2019-11-06

標籤 classname classlist 介紹简体版

原文原文鏈接

####classNamejavascript

#####1.簡介html

DOM操做中常常會處理元素的樣式名，幾乎全部的HTML標籤中都包含了class屬性(除了base, head, html, meta, param, script, style 以及 title標籤)，用於規定當前元素的類名，這裏的類名指的是咱們在樣式表中按照規則爲元素指定的類(class)。如:html5

<style>
	.big{
		font-size:20px;
	}
</style>

<p id="page" class="big">內容</p>

也能夠爲單個元素標籤添加多個類，如：java

<style>
	.big{
		font-size:20px;
	}
	.textColor{
		color:#EEEEEE;
	}
</style>

<p id="page" class="big textColor">內容</p>

注:類名不能以"!"開頭。jquery

在javascript中，在獲取dom元素後能夠經過className屬性來爲其獲取或設置樣式(在javascript中class爲保留字，因此使用className代替。)，如：git

var p = document.getElementById("page");

// 獲取元素樣式
console.log(p.className);

// 設置元素樣式(此處至關於一個清除樣式的操做)
p.className = "";

以後，在控制檯中會輸出:github

big textColor

標籤會變爲:web

<p id="page" class="">內容</p>

若是要爲標籤設置多個樣式，能夠以空格爲分隔符將類名拼接成字符串爲className進行賦值，如正則表達式

var clsNames = "big textColor" ;

p.className = clsNames ;

以後標籤會變爲:api

<p id="page" class="big textColor">內容</p>

#####2.實際處理

以上只是對DOM元素的className屬性進行的簡單說明和基本操做，在實際的的處理中，一般會用到的類名操做包括：

添加單個類名
同時添加多個類名
判斷是否包含某一類名
刪除單個類名
同時刪除多個類名
某一類名的toggle轉換

這中間可能同時會穿插DOM元素類型判斷，字符串處理，正則表達式匹配。雖然實現起來並不算複雜，但也須要咱們一點點的去堆代碼。因爲對於className的操做的通用性比較高，此部分的代碼能夠進行封裝，並且多數類庫中都結合自身的設計原則實現了對className的處理。好比，jQuery提供了:

YUI3中提供了:

利用現有框架的API，省去了咱們重複堆碼的時間。

#####classList

#####1.簡介

js框架提供的主要功能之一是封裝那些在web開發中常常要使用到的功能，提供跨瀏覽器的解決方案。有時咱們會抱怨：**對於那些經常使用並且必須的功能爲何不在w3c中進行標準化，以後瀏覽器廠商統一實現。這樣作會減輕了開發者重複編碼的負擔，減小開發過程當中對瀏覽器兼容性的考慮，使得類庫更加輕量級。**正如咱們如今常常會對DOM元素的className進行處理同樣，若是標準有定義，瀏覽器自己已經實現了這部分功能，那麼咱們豈不是會很輕鬆，之後的開發也會下降對庫的依賴。

其實標準也是在需求中一步步完善的，有共性的需求才會有標準的出現。HTML5的出現爲的就是進一步完善標準。這其中也增長了新的DOM屬性，classList屬性即是其中之一。

classList的做用是用來簡化DOM元素的class處理，返回一個DOM元素中className屬性中包含的以空格分割的類名列表。經過

var clsList = element.classList

能夠獲取DOM元素的樣式列表並進行處理。

#####2.classList的對象類型

element.classList對象的類型爲DOMTokenList。DOMTokenList類型表示了一個用空格分割的符號(token)集合。它是一種類數組(ArrayLike)對象(就像javascript中的String對象同樣)，能夠像數組那樣按照數字下標索引元素，固然索引是從0開始。常見的使用該類型的DOM屬性包括：

HTMLElement.classList
HTMLLinkElement.relList
HTMLAnchorElement.relList
HTMLAreaElement.relList

DOMTokenList包含了如下屬性和方法

// Property
length

// Method
item ( idx )//返回集合idx索引指向的token
contains ( token ) //判斷集合中是否包含token
add ( token ) // 向集合中添加token
remove ( token ) // 從集合中刪除token
toggle ( token ) // 若是集合中存在token，則將其刪除，並返回false；若是集合中不存在token，則將token加入其中，並返回true

#####3.classList對象的操做

明白了element.classList對象的類型後，能夠清楚的看到可對className進行的操做。只要把token替換成表明樣式的類名便可。如：

var length = p.classList.length ; // 獲取p元素中類名數量
p.classList.item(1); // 獲取p元素中索引爲1的類名
p.classList.add("big"); // 向p元素中添加big類
p.classList.remove("big"); // 將big類從p元素中移除
p.classList.contains("big"); // 判斷p元素中是否包含名爲big的類
p.classList.toggle("big"); // 若是p元素中存在big類，則將其刪除；若是p元素中不存在big類，則向p中添加big類

經過如下代碼能夠對classList進行特性檢測,來判斷瀏覽器是否支持classList屬性

var support = document.body.classList==undefined ? false : true ;

#####4.classList的缺點

瀏覽器兼容下欠佳，因爲是新的標準，各瀏覽器對classList的支持以及實現方式存在差別，尤爲是IE10後才支持classList。參見其兼容性列表
只能對單個類名進行操做，若是add,remove,contains,toggle方法中的類名參數包含空格，方法調用會報錯，如在Chrome的console下調用
```
document.body.classList.add("cls1 cls2");//cls1,cls2中間包含了一個空格
```
會報如下錯誤提示

InvalidCharacterError: The string contains invalid characters.

#####5.classList的一些跨瀏覽器實現

對於classList的跨瀏覽器實現一些我的或框架自己已經提供了比較好的解決方案和代碼,如：

完，以上！

Reference

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。