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">文字说明 ...
随机推荐
- windows远程控制ubuntu---基于ssh
要实现windows下连接ubuntu需要安装以下软件: 1. windows下安装winSCP 2. Ubuntu下安装OpenSSH Server 可以使用命令行安装openSSH Server: ...
- 向ES6看齐,用更好的JavaScript(一)
众所周知,JavaScript作为弱类型语言,一直是精华与糟粕共存,许多"诡异"的地方我们不得不接受并使用.其实ES6(又称ECMAScript 2015)在2015年6月就已经正 ...
- oracle学习笔记
--Oracle查询当前版本select * from v$version;----------Oracle 查询服务器端编码----------select * from v$nls_paramet ...
- 比较器:Compare接口与Comparator接口区别与理解
一.实现Compare接口与Comparator接口的类,都是为了对象实例数组排序的方便,因为可以直接调用 java.util.Arrays.sort(对象数组名称),可以自定义排序规则. 不同之处: ...
- Python快速建站系列-Part.Six-文章内容浏览
|版权声明:本文为博主原创文章,未经博主允许不得转载. 其实到这里网站的基本功能已经完成一半了,第六节就完成文章内容的阅读功能. 完成blogview.html↓ {% extends "m ...
- python+selenium 浏览器的问题
以前用selenium调用firefox是不需要驱动的,最近安装了python3.52+最新的firefox 发现调不起来了 搜索以后发现Firefox 47+需要搞个firefox的驱动 gecko ...
- UVA 11624 BFS的妙用
题意: 迷宫里起火了,有若干个障碍物,有多个起火点,起火点每经过一个时间间隔就向它的上下左右相邻的格子扩散. 有个倒霉的人好像叫做“Joe”,他要逃出来,他每次可以向上下左右任意移动一格,但是即要避开 ...
- logstash实战
官网上的文档没有更新,估计快商业化了,elasticsearch和kibana 都内嵌了不用再下载,可以参看1.3.3的,除了打个包外没啥区别 http://logstash.net/docs/1.3 ...
- java第六次作业
一个抽奖程序:用ArrayList类和random类 import java.awt.*; import javax.swing.*; import java.awt.event.; import j ...
- python导入opencv解决no module named cv2问题
最近ubuntu用的比较多,在写神经网络代码时也会经常接触到python,但是python的环境配置确实是个头疼的问题. 尤其是接触到opencv时,需要导入opencv的库文件,网上也有很多方法,本 ...