達文西，用JS寫個兼容IE8瀏覽器的類選擇器

Jaden 發布于2019-08-26 13:40 / 1276人閱讀

摘要：基于某些考慮，有時我們項目中會盡量使用原生，這種情況下連最簡單的類選擇器可能都要進行兼容性處理。越是新的特性，瀏覽器的兼容相對就越差。但原生的是支持多個類名選擇的，既然要寫一個兼容的自定義類選擇器代替原生的，那么這個功能說什么也要上啊。

基于某些考慮，有時我們項目中會盡量使用原生js，這種情況下連最簡單的類選擇器可能都要進行兼容性處理。getElementsByClassName是后來引入的，歷史不如getElementById和getElementsByTagName。越是新的特性，瀏覽器的兼容相對就越差。

雖然這3個選擇器都并不是百分百兼容所有瀏覽器，比如getElementById和getElementsByTagName在IE上只支持>=5.5，不過誰還用低于5.5的IE呢？但getElementsByClassName就不同了，它在IE上只支持>=9，所以就存在兼容性的問題。

兼容的方式，就是利用getElementsByTagName來獲取所有的標簽，然后判斷每個標簽有沒有class，以及class里面的值是不是等于我們要找的。《JavaScript DOM編程藝術（第2版）》第42頁有一個簡單實現，但因為作者只是想說明原理，所以沒有完善，用了indexOf去判斷我們要的類名在不在標簽的類名中，這會導致假如我們要找nam的話會把類名叫name的都找出來。所以網上有很多的實現，大致如下，并且下面的實現還考慮了標簽的類名可能有多個類的情況。


    zero
    one
    two
    three

如果在網絡上找類似的實現的話，基本上就是到上面這一步。但上面的實現仍然存在一個缺陷，比如要選擇類名既包括name又包括name-three的標簽就沒法實現。

var nodes = getElementsByClassName(document.getElementById("app"), "name name-three");

但原生的getElementsByClassName是支持多個類名選擇的，既然要寫一個兼容的自定義類選擇器代替原生的，那么這個功能說什么也要上啊。和上面的變化，主要在于我們不僅要處理每個標簽可能有多個類名的情況，也要處理我們傳入的類名參數可能也是多個類名組成的情況，所以用兩層循環可以實現，這里只給出與上面不同的代碼部分。

// 標簽：如果是多個class，那么就分別獲得這幾個class
var cNames = cName.split(" ");
// 我們要找的類名：如果是多個class，那么就分別獲得這幾個class
var classNames = className.split(" ");

// 設置一個標記，默認為true，如果在循環判斷中發現有條件不滿足，設置為false
var flag = true;
// 先循環我們要找的每一個類名
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){
            // 循環到標簽最后一個類名了，還不相等，就說明不匹配
            flag = false;
            break;
        }
    }
}

// 如果符合條件，就加入結果集然后返回
if (flag){
    results[results.length] = ele;
}

至此，就可以用我們自定義的類選擇器查找多個類都匹配的標簽了。如果還要完善的話，至少還需要判斷用戶傳入的類名參數是否為空這種情況。

如果還要加強功能的話，可以考慮實現一個多級選擇器的功能，比如jQuery中如下的語句，甚至還可以優化循環遍歷的寫法等。

// 選擇id為app下的所有class名有name的標簽
$("#app .name")

實現一個功能簡單，做成一個產品很難。不過話說回來，如果要自定義太復雜的功能，我們當初在選擇原生js時就會更加慎重了。

GPU云服務器云服務器達文西 ie8不兼容js哪些 ie8中js不兼容兼容ie8的js有么

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109288.html

達文西，我要的是屬性節點，不是屬性！

摘要：節點的類型有很多，常用的主要是三種元素節點屬性節點和文本節點。結果如下和，前者是獲取某個屬性值，后者才是獲取屬性節點。 js在處理DOM的時候，文檔中的內容都會被當成一個個節點，也就是常說的node。節點的類型有很多，常用的主要是三種：元素節點、屬性節點和文本節點。元素相當于我們說的標簽，屬性就是標簽中定義的屬性，文本就是標簽里面的文字。比如下面我們可以通過getElementByI...

BlackHole1 2019-08-23 16:28 評論0 收藏0
jQuery真的過時了!

摘要：前言前幾天知乎上有一個問題真的過時了嗎我的答案是確實過時了感覺這個話題挺有趣，那咱們展開了聊聊。詳細地說一下為什么過時了。天貓去年已經宣布不再支持。三并沒有被淘汰雖然已經過時了，但是并沒有被淘汰，而且近幾年也不會。前言前幾天知乎上有一個問題：jQuery真的過時了嗎？我的答案是：jQuery確實過時了！感覺這個話題挺有趣，那咱們展開了聊聊。詳細地說一下jQuery為什么過時了。一...

v1 2019-08-21 17:44 評論0 收藏0
前端技術之_CSS詳解第二天

摘要：前端技術之詳解第二天華文中宋基礎選擇器負責結構，負責樣式，負責行為。微軟雅黑瀏覽器的市場占有率瀏覽器打分兒子選擇器測試工具的兒子。表示選擇下一個兄弟微軟雅黑選擇上的是元素后面緊挨著的第一個兄弟。前端技術之_CSS詳解第二天 1、css基礎選擇器 html負責結構，css負責樣式，js負責行為。 css寫在head標簽里面，容器style標簽。先寫選擇器，然后寫大括號，大括號里面是樣式。 ...

番茄西紅柿 2019-04-23 13:46 評論0 收藏0
吐槽專用

摘要：最終選擇了兼容到的，終于使用上框架，雖然它只是個。沒有對比就沒有傷害本來想著技術棧統一，移動端也準備使用。于是，之后對移動端的技術選型上更加慎重了，最終采用了文檔更漂亮的。易用還真不易用，坑還真多。吐槽 avalon.js 歷史背景需求重大調整，所有業務推倒重來（pc端主要任務涉及管理后臺類型的網站）；開發周期很緊，過年前要上線；公司pc端業務要求兼容到ie8； 2015年前...

zxhaaa 2019-08-22 10:36 評論0 收藏0
愛吃螃蟹的前端：登上 Bootstrap 4.0 的大船

摘要：去掉了對的支持，并使用和單位。更新了所有偽元素選擇器的使用規范，首選雙冒號如，而不是?？ㄆF在有不同的輪廓和進一步支持基于類的擴展。代表水平方向，代表全部。 Bootstrap 這個號稱世界第一的 responsive 和 mobile first 前端樣式組件庫去年八月發布了 v4.0 Alpha，去年年底時發布了 v4.0 Alpha 2 版本。可能是 v3 用的過于順手，直到今天...

lidashuang 2019-08-30 13:00 評論0 收藏0