最近在工作中,由于有一个插件必须使用jquery-pack.js,而这个包又是非常古老的jquery,所以又的函数是无法使用的,例如$()选择器以及parent()都取不到标签的内容。

所以没办法,只能用原生的JavaScript了,为了实现这个功能,我得通过HTML标签的Class来获得标签的DOM结构。

在JavaScript 内建的核心中,document对象及element对象总共可以通过三个方式来获取其下的元素,分别是:getElementById(‘id’) 、getElementsByName(‘name’) 、getElementsByTagName(‘tag’)  。

可是在设计网页时,最常常需要使用到的class却没有相对应的方法可以去获取className相同的元素。

不过我们可以自己写一个,代码以很简单:

function getElementsByClassName(tagName,className) {
var tag = document.getElementsByTagName(tagName);
var tagAll = [];
for(var i = 0 ; i<tag.length ; i++){
if(tag[i].className.indexOf(className) != -1){
tagAll[tagAll.length] = tag[i];
}
} return tagAll; }

原理就是通过获取指定的标签,使用getElementsByTagName来获取标签的内容,然后根据标签的className跟传进来的参数进行对比,如果相等就放入数组中最后返回。

使用原生JavaScript模拟getElementByClassName .的更多相关文章

  1. 用原生javascript模拟经典FC游戏公路争霸

    #用原生javascript模拟经典FC游戏公路争霸 前几天看了园子里面的随笔 [原生javascript开发仿微信打飞机小游戏](http://www.cnblogs.com/Mr-Nobody/p ...

  2. 原生JavaScript 模拟alert对话框

    Window.prototype._alert = function() { //创建一个大盒子 var box = document.createElement("div"); ...

  3. 原生javascript模仿win8等待进度条。

    一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简 ...

  4. 表单美化-原生javascript和jQuery单选按钮(兼容IE6)

    最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...

  5. 使用原生 JavaScript 操作 DOM

    原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...

  6. 原生 JavaScript 实现 state 状态管理系统

    原生 JavaScript 实现 state 状态管理系统 Build a state management system with vanilla JavaScript | CSS-Tricks 在 ...

  7. 原生javascript 实现 animate

    原生javascript 实现 animate //animate function getstyle(obj,name){ if(obj.currentStyle){ return obj.curr ...

  8. Javascript模拟继承(赠送.net吐槽一段)

    首先吐槽一句,今年的就业形势很不乐观啊,特别是搞.net的(相对java),特特别是还没出校门没有正式工作经验的,找个实习很难,前些天接了个面试电话,上来就质疑我“你一个在校大学生怎么可能做了那么多项 ...

  9. 浅谈 原生javaScript&&react 实现全局触摸按钮(附带对addeventlistener的了解)

    1.采用原生javaACript 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...

随机推荐

  1. 调节音量的各个方法——AudioManager的使用

    AudioManager类位于android.Media包中,该类提供访问控制音量和铃声模式的操作. //获取AudioManager实例对象 AudioManager audioManage = ( ...

  2. Eclipse中文乱码问题

    最近用TortoiseSVN从androiddex上下载了一个android工程,导入之后发现里面的中文都是乱码,于是在Eclipse里通过Windows-Preferences-Workspace修 ...

  3. 使用SVPullToRefresh实现下拉刷新和下拉加载

    移动端开发中,“下拉刷新”和“上拉加载更多”早已在各大App中随处可见.也非常容易就能找到直接可供使用的第三方资源.譬如EGOTableViewPullRefresh(下拉刷新)和LoadMoreTa ...

  4. 尚观Linux最佳入门高清视频教程033/133/253

    [高清]Linux 最佳入门ULE112- RHCE033部分高清视频教程[尚观原创] 视频简介:高清RHCE033部分是RHCE考试中的基础部分,同时也是我们Linux入门的必 备学习资料.想学好L ...

  5. 任务30:RoutingMiddleware介绍以及MVC引入

    任务30:RoutingMiddleware介绍以及MVC引入 前面讲到app.Map的方式,它也可以实现路由 当我们的url是task的时候,就会执行里面的context的输出内容 app.Map( ...

  6. 斯坦福CS231n—深度学习与计算机视觉----学习笔记 课时26&&27

    课时26 图像分割与注意力模型(上) 语义分割:我们有输入图像和固定的几个图像分类,任务是我们想要输入一个图像,然后我们要标记每个像素所属的标签为固定数据类中的一个 使用卷积神经,网络为每个小区块进行 ...

  7. STL - merge()

    merge用来对两个有序容器进行合并.返回合并后存入容器中的元素的下一个位置的迭代器(可以认为是超尾). merge(v1.first(),v1.end(),v2.first(),v2.end(),r ...

  8. 洛谷 - P1309 - 瑞士轮 - 归并排序

    https://www.luogu.org/problemnew/show/P1309 一开始写的直接快排没想到真的TLE了. 想到每次比赛每个人前移的量不会很多,但是不知从哪里开始优化. 搜索一下原 ...

  9. on a null object reference 问题的解决办法

    FATAL EXCEPTION: …… java.lang.RuntimeException: Unable to start activity ComponentInfo…… ava.lang.Nu ...

  10. HDU6069:Counting Divisors(因子数统计|区间筛)

    题意 计算\(\sum_{i=l}^kd(i^k)(d_i代表i的因子数)\) 分析 比赛搞了3个小时都没搞出来,有两个思维上的trick 1.要先遍历素数,再遍历[L,R],而不是枚举每个数,然后对 ...