JS DOM之getElementsByClassName

来源：互联网发布：python 编码转换编辑：程序博客网时间：2024/06/05 03:58

实现代码：

function getElementsByClassName(parent,tagName,className){    var aEls = parent.getElementsByTagName(tagName);    var arr = [];    for(var i=0; i<aEls.length; i++){var aClassName = aEls[i].className.split(' ');for(var j=0; j<aClassName.length; j++){if(aClassName[j] == className){arr.push(aEls[i]);// 避免联级类名重复计算break;}}    }    return arr;}

基本原理：

要查找指定区域中类名为classname的指定类别标签，首先定位到html代码中指定的区域，然后遍历该区域中指定类别的标签，查找其类名，记录下与classname相同的标签。

示例代码：要获取className为box的标签

<script type="text/javascript">window.onload = function() {var oUl1 = document.getElementById('ul1');var oUl2 = document.getElementById('ul2');            }<body><ul id="ul1"><li class="box box">1111</li><li class="box1">2222</li><li class="box">3333</li><li class="box box2">4444</li></ul><ul id="ul2"><li class="box">1111</li><li class="box1">2222</li><li class="box">3333</li><li class="box box2">4444</li></ul><p class="box">777777</p></body>

版本1：获取文档中所有类名为box的标签。

首先获取html代码中所有的标签，然后遍历每个标签的className，记录下与classname相同的标签。

function getElementsByClassName(className){    var aEls = document.getElementsByTagName('*');    var arr = [];    for(var i=0; i<aEls.length; i++){if(aEls[i].className == className){arr.push(aEls[i]);}}    }    return arr;}var aLi = getElementsByClassName('box');

版本2：当类名存在嵌套时，如<li class="box box2">1111</li>，上述无法正常匹配。须先将每个标签的类名按空格分割，对分割后的每一个子类名分别与className比较。

function getElementsByClassName(className){    var aEls = document.getElementsByTagName('*');    var arr = [];    for(var i=0; i<aEls.length; i++){var aClassName = aEls[i].className.split(' ');for(var j=0; j<aClassName.length; j++){if(aClassName[j] == className){arr.push(aEls[i]);}}    }    return arr;} var aLi = getElementsByClassName('box');console.log(aLi.length);

版本3：当类名由于手误存在重复部分时，如<li class="box box">1111</li>，会重复计算，因此对同一个标签，一旦匹配到了就不在继续往后匹配。

function getElementsByClassName(className){    var aEls = document.getElementsByTagName('*');    var arr = [];    for(var i=0; i<aEls.length; i++){var aClassName = aEls[i].className.split(' ');for(var j=0; j<aClassName.length; j++){if(aClassName[j] == className){arr.push(aEls[i]);                        // 避免联级类名重复计算                        break;}}    }    return arr;} var aLi = getElementsByClassName('box');console.log(aLi.length);

版本4：如果只想查找第一个ul标签中的类名为box的li标签，或者只想查找html文档中类名为box的p标签

function getElementsByClassName(parent,tagName,className){    var aEls = parent.getElementsByTagName(tagName);    var arr = [];    for(var i=0; i<aEls.length; i++){var aClassName = aEls[i].className.split(' ');for(var j=0; j<aClassName.length; j++){if(aClassName[j] == className){arr.push(aEls[i]);// 避免联级类名重复计算break;}}    }    return arr;}var aLi = getElementsByClassName(document,'li','box');// var aLi = getElementsByClassName(oUl1,'li','box');var aLi = getElementsByClassName(document,'p','box');

1 0