getElementsByClassName 兼容性
getElementsByClassName是html5 新增加的一个类名。
该方法可以让我们通过class属性中的类名来访问元素。不过该方法比较新,某些DOM树还没有,因此在使用中要当心。
由于只有较新的浏览器支持,为了弥补这一不足,可以使用已有的DOM方法来实现自己的getElementsByClassName.下边这个函数使用各种新老浏览器。
小提示:
getElementById-------------- id是单选的,是getElement
getElementsByClassName-----\ 是可以复用的,是getElements
getElementsByTagName-------/
DOM树中最常用的三个获取元素的方法,前边的getElement是不同的。记着呦~~
/*node 是dom树的搜索起点 classname 是要搜索的类名*/
function getElementsByClassName(node,classname){
if(node.getElementsByClassName){
return node.getElementsByClassName(classname);
}else{
var results = new Array();
var elems = node.getElementsByTagName("*");
for(var i=0;i<elems.length;i++){
console.log(elems[i].ClassName);
if(elems[i].ClassName.indexOf(classname)!=-1){
results[results.length] = elems[i];
}
}
return results;
}
}
/*用法*/
var shopping = document.getElementById('shop');
var shoplist = getElementsByClassName(shoplist,'list'); /*如果不知道id,id全局dom搜索的话*/
getElementsByClassName(document,'list');
使用方法
html
<ul class="clear home-footer">
<li class="item">
<a href="index.html">
<p class="name" style="font-size: 16px;">租赁流程</p>
</a>
</li>
<li class="item">
<a href="apply.html">
<p class="name">预订须知</p>
</a>
</li>
<li class="item">
<a href="javascript:void(0);">
<p class="name">服务网点</p>
</a>
</li>
<li class="item item-mb">
<a href="rank.html">
<p class="name">用户反馈</p>
</a>
</li>
</ul>
<script>
var re_node = getElementsByClassName(document,'name');
for(var j=0;j<re_node.length;j++){
var rec_style = re_node[j].innerText;
console.log(rec_style);
}
</script>
结果截图如下:

getElementsByClassName 兼容性的更多相关文章
- 步骤五 · 4-9 解决getElementsByClassName()兼容性 未解决
前端零基础入门 2019版 / 步骤五 · 4-9 解决getElementsByClassName()兼容性
- ie8及其以下浏览器的document.getElementsByClassName兼容性问题
使用JavaScript访问DOM的一个重大问题是,此过程需要一种通过元素类名称来选择类的类函数,对DOMContentReady,这种类函数的缺失导致开发人员需要自己编写自定义脚本业执行上述任务,许 ...
- javascript中document.getElementsByClassName兼容性封装方法一
var getElmsByClsName = function(className, results) { results = results || []; // 判断浏览器是否支持 getEleme ...
- DOM——获取页面元素
获取页面元素 为什么要获取页面元素 例如:我们想要操作页面上的某部分(显示/隐藏,动画),需要先获取到该部分对应的元素,才进行后续操作 根据id获取元素 var div = document.getE ...
- JS DOM中getElement系列和querySelector系列获取节点
节点查找方法 document.getElementById() 前面必须是document document.getElementsByName() 前面必须是document ele.getEl ...
- JS DOM操作(创建、遍历、获取、操作、删除节点)
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
- 原生js方法document.getElementsByClassName在ie8及其以下的兼容性问题
document.getElementsByClassName在ie8及其以下浏览器的兼容性问题,在ie8及其以下浏览器中不能使用,针对这个问题,下面给出详细的解决方法,感兴趣的朋友可以参考下 ...
- document.getElementsByClassName在ie8及其以下浏览器的兼容性问题
原生js方法“document.getElementsByClassName”在ie8及其以下浏览器中,不能使用. 修改:加入兼容性判断,在需要用到该方法的位置修改为getClassNames方法. ...
- javascript解决getElementById()的bug以及getElementsByClassName的兼容性写法
<a name="target" href="#">链接</a> <p id="target">文字说明 ...
随机推荐
- Add&Delete WindowService
Part One-Add: Step4: Add the new service to windows service: $commandLine = 'D:\IMS\2.16.0.42-DataSe ...
- sync_object not in ('TBL_Territory')
sync_objec 不包含TBL_Territory这个字段
- JSON--JavaScript Object Notation
概念 一种轻量级的数据交换格式,本质是特定格式的字符串,是客户端和服务器端交互数据的常用选择 规则 []集合 [value1,value2] {}对象 {key1:value1,key2,value2 ...
- Thread and shared lock
在看programing python 4th,第5张parallel system tool 192页开始,书中讲到thread知识,以下做个笔记,以便后期学习 1.主线程执行,开启5个子线程进行计 ...
- WebApi 通过类名获取类并实例化
环境:Web Api 返回值类型为DTO实体,继承基类DTO---BaseResultDto public class BaseResultDto { /// <summary> /// ...
- Uml学习-用例建模简介
用例建模简介 用例建模是UML建模的一部分,它也是UML里最基础的部分.用例建模的最主要功能就是用来表达系统的功能性需求或行为.用例图重点描述用户需求. 它描述需求.用户和主要组件之间的关系. 它不 ...
- Ubuntu14.04安装OpenCV2.4.9
1.安装依赖 sudo apt-get install build-essential libgtk2.0-dev libjpeg-dev libtiff4-dev libjasper-dev lib ...
- 归并排序算法 java 实现
归并排序算法 java 实现 可视化对比十多种排序算法(C#版) [直观学习排序算法] 视觉直观感受若干常用排序算法 算法概念 归并排序是建立在归并操作上的一种有效的排序算法,该算法是采用分治法(Di ...
- Openbox简单支持平铺
使用和gnome shell同样的热键定义 rc.xml中 <keybind key="W-Up"> <action name="Maximize&qu ...
- oracle性能优化之表设计
数据库优化的目标无非是避免磁盘I/O瓶颈.减少CPU利用率和减少资源竞争.为了便于读者阅读和理解,笔者参阅了Sybase.Informix和Oracle等大型数据库系统参考资料,基于多年的工程实践经验 ...