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. The connection to adb is down, and a severe error has occured.(转)

    启动android模拟器时.有时会报The connection to adb is down, and a severe error has occured.的错误.在网友说在任务管理器上把所有ad ...

  2. MWeb 1.5 发布!增加打字机滚动模式、发布到 Evernote、印象笔记、Wordpress.com、Blogger、编辑器内代码块语法高亮

    打字机滚动模式(Typewriter Scrolling) 快捷键:CMD + Option + T,菜单:View - Typewriter Scrolling ,效果如下图: 发布到 Everno ...

  3. c/c++ qsort 函数 结构体简单使用(1)

    #include <stdio.h> #include <string.h> #include <stdlib.h> typedef struct student ...

  4. c/c++ qsort 函数的简单使用(1)

    #include <stdio.h> #include <stdlib.h> //打印数组元素 void print(int arr[], int n){ ; i < n ...

  5. arrayToJson将数组转化为json格式的js代码 ///////////////////////zzzzzzzzzzzzzzzz

    //去除空格 function trim(str) {   return str.replace(/\s|\xA0/g,""); } /** *js数组转json * */ fun ...

  6. 引用iScroll.js实现上拉和下拖刷新

    使用技巧 1.引用iScroll.js, 在初始化时添加两个事件监听:touchMove.DOMContentLoaded. 2.实现iScroll插件的onScrollEnd事件, 也就是在这个事件 ...

  7. 学习js回调函数

    <!DOCTYPE HTML> <html> <head> <meta charset="GBK" /> <title> ...

  8. Nop源码分析三

    程序的初始化工作和Ioc工作已经做完,nop默认引擎已经初始化. 下面在回到global文件的启动方法Application_Start()中, 1,继续分析下面的代码: var dependency ...

  9. DEV皮肤颜色获取

    Skin GridSkin = GridSkins.GetSkin(UserLookAndFeel.Default.ActiveLookAndFeel); evenColor = GridSkin[G ...

  10. Windows下底层数据包发送实战

    1.简介 所谓“底层数据包”指的是在“运行”于数据链路层的数据包,简单的说就是“以太网帧”,而我们常用的Socket只能发送“运行”在传输层的TCP.UDP等包,这些传输层数据包已经能满足绝大部分需求 ...