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 兼容性的更多相关文章
-
步骤五 &#183; 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">文字说明 ...
随机推荐
-
xml类型使用注意事项
xml 的数据类型在平常的开发也是很常用的,燃鹅.也是有一些地方需要留意.今天我就分享几个测试的例子. 使用 xquery.exist (有但不仅仅限于)的注意事项.通常使用来判断节点是否存在,值是否 ...
-
[Json.net]忽略不需要的字段
摘要 在序列化对象,总会遇到一些敏感的信息,这些信息,并不想对调用接口的用户暴露出来,又或者移动端调用接口的时候,为了不返回没用的信息占用流量,这个时候也需要把一些信息给过滤掉. 系列文章 [Json ...
-
解决asp.net Core Mvc网页汉字乱码问题
跟着www.asp.net网页的教程做电影网站的例子时,将一些英文标签和按钮改成了汉字的,结果出现了乱码. 在网上搜索这方面的信息也不太多,看到大家众说纷纭,最后有解决问题的,也没有说清楚具体的办法, ...
-
SPOJ 416 Divisibility by 15 细节题
一个结论:一个数,如果它的所有数字之和能被3整除,那么这个数也能被3整除. 最后一位肯定是0或者5,如果没有就impossible. 剩下的就是,如何删除尽量少的数,使所有数字之和为3的倍数. 情况比 ...
-
WinFrom界面框架之WeifenLuo.WinFormsUI.Docking + OutLookBar
本文转载:http://www.cnblogs.com/luomingui/p/3329763.html WeifenLuo.WinFormsUI.Docking + OutLookBar结合使用的效 ...
-
构造AJAX参数, 表单元素JSON相互转换
ajax提交服务器数据, 整理一下转换方法. HTML: <form id="fm" name="fm" action=""> ...
-
分享动态拼接Expression表达式组件及原理
前言 LINQ大家都知道,用起来也还不错,但有一个问题,当你用Linq进行搜索的时候,你是这样写的 var query = from user in db.Set<User>() ...
-
Hibernate中cascade属性的区别
xml对于集合的级联操作属性cascade的取值可以是: none: 不级联操作,默认为none save-update:针对的是当对当前对象进行save或update操作时,要对想关联的对象进行sa ...
-
Python函数篇(5)-装饰器及实例讲解
1.装饰器的概念 装饰器本质上就是一个函数,主要是为其他的函数添加附加的功能,装饰器的原则有以下两个: 装饰器不能修改被修饰函数的源代码 装饰器不能修改被修改函数的调用方式 装饰器可以简单的理 ...
- Angular4 组件间通讯