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 兼容性的更多相关文章

  1. 步骤五 · 4-9 解决getElementsByClassName()兼容性 未解决

    前端零基础入门 2019版 / 步骤五 · 4-9 解决getElementsByClassName()兼容性

  2. ie8及其以下浏览器的document.getElementsByClassName兼容性问题

    使用JavaScript访问DOM的一个重大问题是,此过程需要一种通过元素类名称来选择类的类函数,对DOMContentReady,这种类函数的缺失导致开发人员需要自己编写自定义脚本业执行上述任务,许 ...

  3. javascript中document.getElementsByClassName兼容性封装方法一

    var getElmsByClsName = function(className, results) { results = results || []; // 判断浏览器是否支持 getEleme ...

  4. DOM——获取页面元素

    获取页面元素 为什么要获取页面元素 例如:我们想要操作页面上的某部分(显示/隐藏,动画),需要先获取到该部分对应的元素,才进行后续操作 根据id获取元素 var div = document.getE ...

  5. JS DOM中getElement系列和querySelector系列获取节点

    节点查找方法 document.getElementById() 前面必须是document document.getElementsByName()  前面必须是document ele.getEl ...

  6. JS DOM操作(创建、遍历、获取、操作、删除节点)

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  7. 原生js方法document.getElementsByClassName在ie8及其以下的兼容性问题

    document.getElementsByClassName在ie8及其以下浏览器的兼容性问题,在ie8及其以下浏览器中不能使用,针对这个问题,下面给出详细的解决方法,感兴趣的朋友可以参考下     ...

  8. document.getElementsByClassName在ie8及其以下浏览器的兼容性问题

    原生js方法“document.getElementsByClassName”在ie8及其以下浏览器中,不能使用. 修改:加入兼容性判断,在需要用到该方法的位置修改为getClassNames方法. ...

  9. javascript解决getElementById()的bug以及getElementsByClassName的兼容性写法

    <a name="target" href="#">链接</a> <p id="target">文字说明 ...

随机推荐

  1. Macaca开源--阿里的移动自动化测试框架

    https://github.com/macacajs/macaca-cli 项目在此 https://macacajs.github.io/macaca/cli-usage.html 文档在此 项目 ...

  2. H5音频和视频

    使用媒体标签最大的缺点在于缺少编解码器的支持一.浏览器支持性检测检测浏览器是否支持audio元素或video元素最简单的方式就是用脚本动态创建它,然后检测特定函数是否存在 var hasVideo=! ...

  3. 【MongoDB for Java】Java操作MongoDB

    上一篇文章: http://www.cnblogs.com/hoojo/archive/2011/06/01/2066426.html介绍到了在MongoDB的控制台完成MongoDB的数据操作,通过 ...

  4. 利用selector设置ImageButton不同状态下的背景图片

    1.自定义MyButton类 public class MyButton extends Button { //This constructormust be public MyButton(Cont ...

  5. 自定义 JSON 对象

    针对 IE9 以下不支持 JSON 对象的处理方式,网上大部分自定义的方式无形之中都会将中文转码为 Unicode 编码格式的字符换,但是在浏览器中我们有无法察觉到(浏览器自己解析成 UTF8 了), ...

  6. Java高效编程之四【C语言结构的替代】

    本章节可以跳过,但是[二十一]是非常有价值的 十九.用类代替结构 坚持以包含私有域和公有访问方法(accessor method)的类.Java平台中有几个类违反了“公有类不应该直接暴露数据域”的告诫 ...

  7. Spring Batch学习笔记二

    此系列博客皆为学习Spring Batch时的一些笔记: Spring Batch的架构 一个Batch Job是指一系列有序的Step的集合,它们作为预定义流程的一部分而被执行: Step代表一个自 ...

  8. squid-nginx 基本配置

    #本地绑定的IP端口 http_port 192.168.1.253:801 vhost visible_hostname test-squid cache_dir ufs c:/squid/cach ...

  9. [摘]在ASP.NET MVC中使用DropDownList

    在ASP.NET MVC中,尽管我们可以直接在页面中编写HTML控件,并绑定控件的属性,但更方便的办法还是使用HtmlHelper中的辅助方法.在View中,包含一个类型为HtmlHelper的属性H ...

  10. Linq to SQL 的增删改查操作

    Linq,全称Language Integrated Query,是C#语言的一个扩展,可以将数据查询直接集成到编程语言本身中. Linq分为查询语法和方法语法,说白了查询语法就是 from wher ...