用原生JS写getElementsByClassName方法

技术不停止

getElementsByClassName是HTML5新增的DOM API 在IE8以下是不支持的,很多时候需要自己写一个getByClassName()方法

需要两个参数,一个parentObj父元素,一个是className

首先获取parents下所有节点,然后用一个for循环逐个判断其className是否等于我们要get的className如果相等的话就push到result中。

具体代码如下:

function getByClassName(obj,cls){
       var elements = obj.getElementsByTagName("*");
       var result = [];
       for(var i=0;i<elements.length;i++){
           if(elements[i].className==cls){
               result.push(elements[i]);
           }
       }
       return result;
}

其实这个方法还不是很完善,因为有的元素可能有不止一个className这个方法只适用于只含一个className的元素。

此文供个人记录和其他JS初学者学习

我叫掏粪 微博ID:我叫掏粪i

掏粪的独立博客:www.yewu233.com

喜欢的朋友点个赞~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,801评论 1 92
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,451评论 0 44
  • jQuery基础(一)——样式篇 1-2环境搭建 1-3 jQuery HelloWorld体验 $(docume...
    croyance0601阅读 1,106评论 0 8
  • 第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 1,610评论 0 11
  • 老妈是那个年代不多的独生子女,因为姥爷走得早,年幼起就和姥姥俩人相依为命过着苦难的日子。 1. 在她记忆里最刻骨的...
    张祝莉阅读 345评论 0 1