当前位置:清晨 » 站长笔记 » javascript笔记 » js原生getElementsByClassName兼容IE7以上

js原生getElementsByClassName兼容IE7以上

发布日期:2017年3月9日 03:03:10 点击量: 329

宝塔服务器面板,一键全能部署及管理,送你¥3188礼包,点我领取,简单好用的 Linux/Windows 面板

客户的需求:

列表前两行后添加最新标签,兼容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>

 


关键词:

本文网址:https://www.menglei.info/2342/,转载请以链接形式注明出处,谢谢合作!


老薛主机专属优惠码: PT ,有需要购买的同学可以使用.可享受30%的优惠.

联系站长: shadoweb@qq.com QQ: 925474725


发表评论

电子邮件地址不会被公开。 必填项已用*标注