2017-03-09  点击量: 899

js原生getElementsByClassName兼容IE7以上

客户的需求:

列表前两行后添加最新标签,兼容IE7以上及主流浏览器。

 

js部分
<script>
function getElementsByClassName(className, root, tagName) { //root:父节点,tagName:该节点的标签名。 这两个参数均可有可无
if (root) {
root = typeof root == "string" ? document.getElementById(root) : root;
} else {
root = document.body;
}
tagName = tagName || "*";
if (document.getElementsByClassName) { //如果浏览器支持getElementsByClassName,就直接的用
return root.getElementsByClassName(className);
} else {
var tag = root.getElementsByTagName(tagName); //获取指定元素
var tagAll = []; //用于存储符合条件的元素
for (var i = 0; i < tag.length; i++) { //遍历获得的元素
for (var j = 0, n = tag[i].className.split(' ') ; j < n.length; j++) { //遍历此元素中所有class的值,如果包含指定的类名,就赋值给tagnameAll
if (n[j] == className) {
tagAll.push(tag[i]);
break;
}
}
}
return tagAll;
}
}

function setSN(e){

var ul = document.getElementById(e);
var lis= getElementsByClassName('biaoti',ul,'div');
var lia= ul.getElementsByTagName('a');
for(var i=0,l=lia.length;i<2;i++){
lia[i].className = 'nbt';
}
for(var i=0,l=lis.length;i<2;i++){
var tHTML = lis[i].innerHTML
lis[i].innerHTML = tHTML + '<font>new</font>';

}
}
setSN('tzgg');
setSN('byfw');
</script>

 

代码块

 

<ul id="tzgg">

<li>
<div class="biaoti"><a href="notice/?type=detail&amp;id=7" target="_blank" class="nbt">关于推荐2016年第四季度标兵候选人的通知</a><font>new</font></div>
<div class="riqi">[02-21]</div>
</li><li>
<div class="biaoti"><a href="notice/?type=detail&amp;id=6" target="_blank" class="nbt">紧急通知</a><font>new</font></div>
<div class="riqi">[02-21]</div>
</li><li>
<div class="biaoti"><a href="notice/?type=detail&amp;id=5" target="_blank">关于召开党组扩大会通知</a></div>
<div class="riqi">[02-21]</div>
</li>

</ul>

 

评论已关闭!