資訊專欄INFORMATION COLUMN
摘要：基于某些考慮，有時我們項目中會盡量使用原生，這種情況下連最簡單的類選擇器可能都要進行兼容性處理。越是新的特性，瀏覽器的兼容相對就越差。但原生的是支持多個類名選擇的，既然要寫一個兼容的自定義類選擇器代替原生的，那么這個功能說什么也要上啊。
基于某些考慮，有時我們項目中會盡量使用原生js，這種情況下連最簡單的類選擇器可能都要進行兼容性處理。getElementsByClassName是后來引入的，歷史不如getElementById和getElementsByTagName。越是新的特性，瀏覽器的兼容相對就越差。
雖然這3個選擇器都并不是百分百兼容所有瀏覽器，比如getElementById和getElementsByTagName在IE上只支持>=5.5，不過誰還用低于5.5的IE呢？但getElementsByClassName就不同了，它在IE上只支持>=9，所以就存在兼容性的問題。
兼容的方式，就是利用getElementsByTagName來獲取所有的標簽，然后判斷每個標簽有沒有class，以及class里面的值是不是等于我們要找的。《JavaScript DOM編程藝術(shù)（第2版）》第42頁有一個簡單實現(xiàn)，但因為作者只是想說明原理，所以沒有完善，用了indexOf去判斷我們要的類名在不在標簽的類名中，這會導(dǎo)致假如我們要找nam的話會把類名叫name的都找出來。所以網(wǎng)上有很多的實現(xiàn)，大致如下，并且下面的實現(xiàn)還考慮了標簽的類名可能有多個類的情況。
zero
one
two
three
如果在網(wǎng)絡(luò)上找類似的實現(xiàn)的話，基本上就是到上面這一步。但上面的實現(xiàn)仍然存在一個缺陷，比如要選擇類名既包括name又包括name-three的標簽就沒法實現(xiàn)。
var nodes = getElementsByClassName(document.getElementById("app"), "name name-three");
但原生的getElementsByClassName是支持多個類名選擇的，既然要寫一個兼容的自定義類選擇器代替原生的，那么這個功能說什么也要上啊。和上面的變化，主要在于我們不僅要處理每個標簽可能有多個類名的情況，也要處理我們傳入的類名參數(shù)可能也是多個類名組成的情況，所以用兩層循環(huán)可以實現(xiàn)，這里只給出與上面不同的代碼部分。
// 標簽：如果是多個class，那么就分別獲得這幾個class
var cNames = cName.split(" ");
// 我們要找的類名：如果是多個class，那么就分別獲得這幾個class
var classNames = className.split(" ");
// 設(shè)置一個標記，默認為true，如果在循環(huán)判斷中發(fā)現(xiàn)有條件不滿足，設(shè)置為false
var flag = true;
// 先循環(huán)我們要找的每一個類名
for (var j = 0; j < classNames.length && flag; j++){
// 看看我們的這個類名在不在這個標簽的所有類名中
for (var k = 0; k < cNames.length; k++){
if (classNames[j] === cNames[k]){
break;
}else if(classNames[j] !== cName[k] && k === cNames.length - 1){
// 循環(huán)到標簽最后一個類名了，還不相等，就說明不匹配
flag = false;
break;
}
}
}
// 如果符合條件，就加入結(jié)果集然后返回
if (flag){
results[results.length] = ele;
}
至此，就可以用我們自定義的類選擇器查找多個類都匹配的標簽了。如果還要完善的話，至少還需要判斷用戶傳入的類名參數(shù)是否為空這種情況。
如果還要加強功能的話，可以考慮實現(xiàn)一個多級選擇器的功能，比如jQuery中如下的語句，甚至還可以優(yōu)化循環(huán)遍歷的寫法等。
// 選擇id為app下的所有class名有name的標簽
$("#app .name")
實現(xiàn)一個功能簡單，做成一個產(chǎn)品很難。不過話說回來，如果要自定義太復(fù)雜的功能，我們當初在選擇原生js時就會更加慎重了。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109288.html
摘要：節(jié)點的類型有很多，常用的主要是三種元素節(jié)點屬性節(jié)點和文本節(jié)點。結(jié)果如下和，前者是獲取某個屬性值，后者才是獲取屬性節(jié)點。 js在處理DOM的時候，文檔中的內(nèi)容都會被當成一個個節(jié)點，也就是常說的node。節(jié)點的類型有很多，常用的主要是三種：元素節(jié)點、屬性節(jié)點和文本節(jié)點。 元素相當于我們說的標簽，屬性就是標簽中定義的屬性，文本就是標簽里面的文字。比如下面我們可以通過getElementByI...
摘要：前言前幾天知乎上有一個問題真的過時了嗎我的答案是確實過時了感覺這個話題挺有趣，那咱們展開了聊聊。詳細地說一下為什么過時了。天貓去年已經(jīng)宣布不再支持。三并沒有被淘汰雖然已經(jīng)過時了，但是并沒有被淘汰，而且近幾年也不會。 前言 前幾天知乎上有一個問題：jQuery真的過時了嗎？我的答案是：jQuery確實過時了！感覺這個話題挺有趣，那咱們展開了聊聊。詳細地說一下jQuery為什么過時了。 一...
摘要：前端技術(shù)之詳解第二天華文中宋基礎(chǔ)選擇器負責結(jié)構(gòu)，負責樣式，負責行為。微軟雅黑瀏覽器的市場占有率瀏覽器打分兒子選擇器測試工具的兒子。表示選擇下一個兄弟微軟雅黑選擇上的是元素后面緊挨著的第一個兄弟。前端技術(shù)之_CSS詳解第二天 1、css基礎(chǔ)選擇器 html負責結(jié)構(gòu)，css負責樣式，js負責行為。 css寫在head標簽里面，容器style標簽。 先寫選擇器，然后寫大括號，大括號里面是樣式。 ...
摘要：去掉了對的支持，并使用和單位。更新了所有偽元素選擇器的使用規(guī)范，首選雙冒號如，而不是。卡片現(xiàn)在有不同的輪廓和進一步支持基于類的擴展。代表水平方向，代表全部。 Bootstrap 這個號稱世界第一的 responsive 和 mobile first 前端樣式組件庫去年八月發(fā)布了 v4.0 Alpha，去年年底時發(fā)布了 v4.0 Alpha 2 版本?？赡苁?v3 用的過于順手，直到今天...
閱讀 1137·2023-04-26 00:12
閱讀 3283·2021-11-17 09:33
閱讀 1072·2021-09-04 16:45
閱讀 1203·2021-09-02 15:40
閱讀 2189·2019-08-30 15:56
閱讀 2976·2019-08-30 15:53
閱讀 3560·2019-08-30 11:23
閱讀 1941·2019-08-29 13:54
