使用原生JavaScript模拟getElementByClassName .
最近在工作中,由于有一个插件必须使用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 .的更多相关文章
- 用原生javascript模拟经典FC游戏公路争霸
#用原生javascript模拟经典FC游戏公路争霸 前几天看了园子里面的随笔 [原生javascript开发仿微信打飞机小游戏](http://www.cnblogs.com/Mr-Nobody/p ...
- 原生JavaScript 模拟alert对话框
Window.prototype._alert = function() { //创建一个大盒子 var box = document.createElement("div"); ...
- 原生javascript模仿win8等待进度条。
一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简 ...
- 表单美化-原生javascript和jQuery单选按钮(兼容IE6)
最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...
- 使用原生 JavaScript 操作 DOM
原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...
- 原生 JavaScript 实现 state 状态管理系统
原生 JavaScript 实现 state 状态管理系统 Build a state management system with vanilla JavaScript | CSS-Tricks 在 ...
- 原生javascript 实现 animate
原生javascript 实现 animate //animate function getstyle(obj,name){ if(obj.currentStyle){ return obj.curr ...
- Javascript模拟继承(赠送.net吐槽一段)
首先吐槽一句,今年的就业形势很不乐观啊,特别是搞.net的(相对java),特特别是还没出校门没有正式工作经验的,找个实习很难,前些天接了个面试电话,上来就质疑我“你一个在校大学生怎么可能做了那么多项 ...
- 浅谈 原生javaScript&&react 实现全局触摸按钮(附带对addeventlistener的了解)
1.采用原生javaACript 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...
随机推荐
- Ubuntu:Could not get lock /var/lib/dpkg/lock
在ubuntu上使用apt-get时,碰过如下问题: 看意思是上一次使用apt-get时异常退出了,锁住了,google了下解决方案如下: 1.先判断是否有apt-get进程在跑,同一时刻只能有一个a ...
- 通过HttpservletRequest对象获取客户端的真实IP地址
这篇文章主要介绍了Java中使用HttpRequest获取用户真实IP地址,使用本文方法可以避免Apache.Squid.nginx等反向代理软件导致的非真实IP地址,需要的朋友可以参考下 在JSP里 ...
- bzoj1087互不侵犯King——状压DP
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1087 水题... 然而犯了两个致命小错误,调了好半天...详见注释. 代码如下: #incl ...
- JAVA 集合JGL
集合 Java提供了四种类型的“集合类”:Vector(矢量).BitSet(位集).Stack(堆栈)以及Hashtable(散列表).与拥有集合功能的其他语言相比,尽管这儿的数量显得相当少,但仍然 ...
- HBase之一:HBase原理和设计
一.简介 HBase —— Hadoop Database的简称,Google BigTable的另一种开源实现方式,从问世之初,就为了解决用大量廉价的机器高速存取海量数据.实现数据分布式存储提供可靠 ...
- vue+webpack 打包文件 404 页面空白
最近用vue-cli+vue-router+webpack建立项目,其中的遇到的三个问题,整理如下: vue-cli+ webpack 建立的项目,cnpm run build 打包项目之后,需要放在 ...
- bzoj2676
二分概率+矩乘+dp 也是二分概率,然后dp[i][j][k]表示当前到了i,有j条命,下一次的收益是k,然后矩乘转移,但是我自己的似乎wa了,抄了liu_runda的才行,具体不知道为什么 注释的是 ...
- 如何升级xcode 中的cocos2dx 到v2.2.2以上版本
每次升级cocos2dx版本都觉得不知道怎么弄才行. 这次升级到v2.2.2版本又花了我不少时间.因此在这里分享一下,以后也有地方可以查询. 1. 到http://cocos2d-x.org/ 下载最 ...
- ORACLE PL/SQL 实例精解之第七章 迭代控制之二
7.1CONTINUE语句 CONTINUE语句会导致循环终止当前迭代.并且当CONTINUE的条件为TRUE时,开始执行该循环的下一次迭代.需要借助于IF语句来计算COUNTINUE条件.当CONT ...
- python 之 配置环境变量、通过pip 安装第三方库
配置环境变量 右击桌面上的“此电脑”—>“属性”—>“高级系统设置”—>右下角“环境变量”—>双击“系统变量”里的“Path”—>点击“新建”—>输入python的 ...