使用原生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 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...
随机推荐
- dba操作之archivelog清理
下面的命令用于校验归档日志的有效性,列出无效的归档日志,以及以何种方式清除归档日志,列出几种常用的: crosscheck archivelog all; ...
- LA-2678 (尺取法)
题意: 在一个长度为n的序列中,找到最短的长度序列,使其和大于等于s; 思路: two pointer ,水题; Ac代码: #include <bits/stdc++.h> /* #in ...
- 09:LGTB 学分块
总时间限制: 10000ms 单个测试点时间限制: 1000ms 内存限制: 65536kB 描述 LGTB 最近在学分块,但是他太菜了,分的块数量太多他就混乱了,所以只能分成 3 块 今天他得 ...
- 关于base64编码的原理及实现
我们的图片大部分都是可以转换成base64编码的data:image. 这个在将canvas保存为img的时候尤其有用.虽然除ie外,大部分现代浏览器都已经支持原生的基于base64的encode和d ...
- IOS 的调试模式
iOS调试模式分为: 断点单步调试: 全局断点调试: 僵尸调试: 暴力调试: 这里主要说一下什么是僵尸调试模式? .为什么会使用NSZombieEnabled? 应用调试可能会收到类似 Thread ...
- notepad++的NppFTP插件远程连接linux操作系统
1.首先要有NppFTP插件,如果没有可以去下面链接或者其他网站下载: https://sourceforge.net/projects/nppftp/files/latest/download ...
- centos7搭建rsync
两台主机(centos7): 172.16.0.109 server 172.16.0.106 client 一.在172.16.0.109上 yum -y install rsync #安装 mkd ...
- iOS开发检测是否开启定位、是否允许消息推送等权限
1.iOS开发检测是否开启定位: 需要导入: #import <CoreLocation/CoreLocation.h> 代码如下: + (void)openLocationService ...
- bzoj 1488: [HNOI2009]图的同构【polya定理+dfs】
把连边和不连边看成黑白染色,然后就变成了 https://www.cnblogs.com/lokiii/p/10055629.html 这篇讲得好!https://blog.csdn.net/wzq_ ...
- springboot&mybatis 增删改查系列(二)
数据库篇 我的数据库名为data0525,数据表名为user,其中有五列uid,uname,upass,usex,umessage.uid为主键并且自动生成,由于是练习表,所以并没有考虑设计的合理性. ...