兼容IE8以下,获取className节点的元素(document.getElementsByClassName()兼容写法)。

因为ie8一下不兼容

document.getElementsByClassName()

功能:通过class的名字获取符合条件的元素

node.getElementsByClassName()

指定node节点下,符合条件的元素。

所以我们自己封装一个兼容IE8以下,获取className节点的函数。

//兼容IE8以下,获取className节点的元素。

function elementsByClassName(node, className){

var res = [];//定义一个数组用来存class相同的节点

//1、查找node所有的子节点

var nodes = node.getElementsByTagName("*");

/*node.getElementsByTagName("*") 的意思是通过标签名查找所以node节点下所有的节点*为通配符*/

for(var i = 0; i < nodes.length; i++){//遍历每一个节点

if(nodes[i].className == className){//判断每一个节点的class属性名是否等于 传入的class名

res.push(nodes[i]);

}

}

然后进行调用即可

window.onload = function(){

var oUl = document.getElementById(‘ul1‘)

var node = elementByClassName(oUl, ‘box‘);

alert(node.length);//2

}

html结构如下:

<body>

<ul id = ‘ul1‘>

<li class = ‘box‘>11111111</li>

<li>11111111</li>

<li>11111111</li>

<li class = ‘box‘>11111111</li>

</ul>

<ol>

<li>22222222</li>

<li class = ‘box‘>22222222</li>

<li>22222222</li>

</ol>

</body>

原文地址:https://www.cnblogs.com/jxldjsn/p/11084513.html

时间: 2024-08-02 10:51:02

兼容IE8以下,获取className节点的元素(document.getElementsByClassName()兼容写法)。的相关文章

JavaScript获取DOM节点HTML元素CSS样式

JavaScript获取DOM节点HTML元素CSS样式技术 maybe yes 发表于2015-01-10 18:07 原文链接 : http://blog.lmlphp.com/archives/59  来自 : LMLPHP后院 如何使用 JavaScript 获取某个 DOM 节点下 HTML 元素的 CSS 样式值?使用过 JQuery 的童鞋一定都非常的熟悉,Jquery 提供了非常强大的 CSS 方法,可以很方便的设置和获取元素的 style 属性. 某些情况下,我们不能使用 JQ

兼容ie5-ie11及其他主流浏览器的js document.getElementsByClassName 方法

var getElementsByClassName = function(searchClass,node,tag) { if(document.getElementsByClassName){ return document.getElementsByClassName(searchClass) }else{ node = node || document; tag = tag || '*'; var returnElements = [] var els = (tag === "*&quo

快慢指针,怎样快速获取链表的中间元素

有一个链表,怎样快速获取中间节点的元素. 方法1 遍历一下链表,确认长度,获取中间的节点元素,时间复杂度O(N) 方法2 设置两个指针,一个遍历p->nexr  一个 p->next->next,快慢指针的思想  时间复杂度为O(n/2) 代码: 1 //腾讯面试题,获取一个单链表的中间位置 2 Status GetMidNode(LinkList L,ElemType *e) 3 { 4 LinklList search,mid; 5 mid =search=L; 6 while (s

【转】让Bootstrap 3兼容IE8浏览器

FROM : http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单.按钮组.按钮下拉菜单.导航.导航条.面包屑.分页.排版.缩略图.警告对话框.进度条.媒体对象等.Bootstrap他们预先定义好,等要进行正式制作网页的时候,

让Bootstrap 3兼容IE8浏览器

http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 看到这篇文章有越来越多的人看,我决定给大家节省时间,废话少说.有几个点大家要注意. 1.本地调试需要Web Server(如IIS.Apache,Nginx),单纯地本地打开文件不能看到兼容效果. 2.如果你发现已经引用了respond.js和Bootstrap,仍无效果,请查看你的Bootstrap是否使用了CDN文件.(详情看第4点) 3.本文主要针对Boots

Bootstrap 3兼容IE8浏览器(转)

Bootstrap是一个响应式的布局,你可以在宽屏电脑.普通电脑,平板电脑,手机上都得到非常优秀的布局体验.这种响应式的布局正是通过CSS3的媒体查询(Media Query)功能实现的,根据不同的分辨率来匹配不同的样式.IE8浏览器并不支持这一优秀的Css3特性,Bootstrap在开发文档中写了如何使用进行兼容IE8.但是笔者多次尝试没有成功,IE8的布局是乱的.直到今天忍无可忍,决定再尝试一下,最终获得成功.有些细节没有注意到,导致IE8没法响应式布局. 下面讲解下如何让Bootstrap

Bootstrap 3 兼容 IE8 浏览器

公司新旧的项目,前端用的Bootstrap3的框架,但它已经放弃对IE9下的支持了.可IE8还是有着许多用户,不能不照顾到他们,IE7以下的,我只想说,现在什么年代了,要解放思想,与时俱进啊,就不能动动手升下级吗. 于是着手解决,在http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html发现了解决方法,亲测可行.在此声名对此作者的感谢. 进入主题. Bootstrap是一个响应式的布局,你可以在宽屏电脑.普通电脑,平板电脑

使用document.getElementsByClassName 老版本IE9以前的版本兼容

/** * 根据类名查找元素,解决浏览器兼容问题 * @param className <String> 待查找的类名 * @return 返回查找到的元素集合 */function byClass(className) { if (document.getElementsByClassName) // 支持使用 return document.getElementsByClassName(className); /* 不支持使用 getElementsByClassName() 方法,解决兼

关于IE8及其以下的IE版本不支持getElementsByClassName

之前做一下项目的时候知道IE8以及其以下的版本不支持getElementsByClassName,于是乎自己写了一个函数重新定义getElementsByClassName,函数代码如下: function getElementsByClassName(classname){ if(document.getElementsByClassName){ return document.getElementsByClassName(classname); }else{ var aa = documen