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">文字说明 ...
随机推荐
- sp_helpdb
语法 sp_helpdb [ [ @dbname= ] 'name' ] 参数 [@dbname=] 'name' 是要为其提供信息的数据库名称.name 的数据类型为 sysname,无默认值.如果 ...
- winserver2008 DNS 很详细
from http://www.it165.net/admin/html/201312/2182.html DNS(Domain Name System域名系统)区域化管理 分布式 层次性 域名空间结 ...
- sql中datetime 和 timestamp
datetime 1.允许为空值,可以自定义值,系统不会自动修改其值. 2.不可以设定默认值,所以在不允许为空值的情况下,必须手动指定datetime字段的值才可以成功插入数据. 3.虽然不可以设定默 ...
- Java内部DNS查询实现和参数设置
一.Java内部DNS查询 Java使用域名查询时,用的自己内部的域名实现机制,最后都是交给InetAddress去做DNS解析. 源码分析参考:http://blog.arganzheng.me/p ...
- 对点餐APP现阶段开发的问题
团队的成立,基本是一气呵成.但是,github团队的建立却成为 第一个难题,大家对github都不熟,又刚刚好没课时间的任务,大家 已经各有安排,造成时间上的紧急.没有按时.按要求完成github的 ...
- Linux启用和配置Java
Firefox 在安装 Java 平台时,Java 插件文件将作为该安装的一部分包含在内.要在 Firefox 中使用 Java,您需要从该发行版中的插件文件手动创建符号链接指向 Firefox 预期 ...
- sqlite简单使用
c创建表: create table 表名称(元素名称 类型,,,): 插入数据:insert into 表名称 values(null,,,) 修改数据 : update 表名 set 字段=’ ...
- Coursera台大机器学习课程笔记4 -- Training versus Testing
这节的主题感觉和training,testing关系不是很大,其根本线索在于铺垫并求解一个问题: 为什么算法PLA可以正确的work?因为前面的知识告诉我们,只有当假设的个数有限的时候,我们才 ...
- CURL命令报错:dyld: lazy symbol binding failed: Symbol not found: _SSL_load_error_strings解决办法
Mac OS X 10.11.6, curl 命令报错,错误如下: dyld: lazy symbol binding failed: Symbol not found: _SSL_load_erro ...
- android.widget.Toast
widget 小部件 toast 烤面包 Toast.makeText(当前活动, 信息, 时间长短) 例:Toast.makeText(FirstActivity.this, "You c ...