解決IE9以下獲取指定類名DOM節(jié)點的方法

在眾多主流瀏覽器之間,老版本的IE依舊是個“神話”,前端開發(fā)者們無不為之撕心裂肺,高歌吶喊。老版本IE的兼容性問題,一直是開發(fā)者們較為頭疼的問題。

比如通過類名來獲取DOM節(jié)點,通常情況下,原生JS的寫法是
var elements = document.getElementByClassName("className");

但是這種寫法在IE9一下不支持,所以我們可以(必須)通過某種方式來解決這個問題

廢話不多說,直接上代碼
  if (!document.getElementsByClassName) {                          //判斷瀏覽器如果不支持getElementByClassName,就調(diào)用以下方法                              
  document.getElementsByClassName = function (className) {                  
  var elements = [];                                               //創(chuàng)建一個數(shù)組用于保存最終的獲取結(jié)果
  var tags = document.body.getElementsByTagName('*');              //獲取body下所有的標簽                                                            
      for (var i = 0; i < children.length; i++) {                  //通過for循環(huán)檢測每個標簽的類名屬性className
          var tagNames = tags[i].className;                                                 
          var classNames = tagNames.split(' ');                    //classNames數(shù)組中保存的是tags[i]這個標簽的類名組成部分                  
          for (var j = 0; j < classNames.length; j++) {            //接著遍歷classNames數(shù)組
              if (classNames[j] == className) {                    //檢測classNames中是否有需要的類名部分
                  elements[elements.length] = tags[i];             //將獲取classNames[j]這個部分類名所需要的標簽存儲到elements數(shù)組
                  break;                                           //如果找到了需要的類名,后續(xù)的其他部分就不需要查看了
              }
          }
      }
      return elements;                                             //返回新的數(shù)組                  
  };
};


var elements = document.getElementByClassName("className");         //現(xiàn)在在主流瀏覽器中,getElementByClassName獲取DOM元素都可以正常使用

如果瀏覽器不支持getElementByClassName的話,我們可以通過創(chuàng)建一個新的數(shù)組,篩選我們需要的className,步驟在代碼中有詳細的解釋,把結(jié)果保存到新創(chuàng)建的數(shù)組中,供我們調(diào)用。算是間接的實現(xiàn)通過類名獲取DOM元素。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 14,093評論 1 92
  • 一、JS前言 (1)認識JS 也許你已經(jīng)了解HTML標記(也稱為結(jié)構(gòu)),知道了CSS樣式(也稱為表示),會使用HT...
    凜0_0閱讀 2,900評論 0 8
  • 前端開發(fā)面試知識點大綱: HTML&CSS: 對Web標準的理解、瀏覽器內(nèi)核差異、兼容性、hack、CSS基本功:...
    秀才JaneBook閱讀 2,759評論 0 25
  • 數(shù)不清隧道有幾盞燈 數(shù)不清轉(zhuǎn)了多少個彎 我已在離杭路上 五年光陰 喜怒哀樂甚是難忘 看未來 人生苦短悲喜無常 多希...
    刀客葉閱讀 220評論 0 0

友情鏈接更多精彩內(nèi)容