最近在工作中,由于有一个插件必须使用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. Objective-C 中Socket常用转换机制(NSData,NSString,int,Uint8,Uint16,Uint32,byte[])

    最近项目中要用到socket通讯,由于涉及到组包问题,所以需要数据类型之间的来回转换,现在分享出来 如果想要请教Socket的问题请留言,我会随时回答的 1. int类型转16进制hexstring ...

  2. poj 2531 Network Saboteur 解题报告

    题目链接:http://poj.org/problem?id=2531 题目意思:将 n 个点分成两个部分A和B(也就是两个子集啦), 使得子集和最大(一定很难理解吧,呵呵).举个例子吧,对于样例,最 ...

  3. Loadrunner11打开WebTours只显示头部解决办法

    1.遇到这种情况,先查看一下路径HP\LoadRunner\WebTours下的cgierr日志中是否有错误,比如Can't open perl script "D:\Program&quo ...

  4. BZOJ_2097_[Usaco2010 Dec]Exercise 奶牛健美操_二分答案+树形DP

    BZOJ_2097_[Usaco2010 Dec]Exercise 奶牛健美操_二分答案+树形DP Description Farmer John为了保持奶牛们的健康,让可怜的奶牛们不停在牧场之间 的 ...

  5. 「UVA524」 Prime Ring Problem 质数环

    Description 输入正整数n,把整数1,2,-,n组成一个环,使得相邻两个整数之和均为素数.输出时,从整数1开始逆时针排列.同一个环恰好输出一次.n<=16. A ring is com ...

  6. ng2中文文档地址

    https://angular.cn/docs/ts/latest/guide/displaying-data.html

  7. scrollerView 滚动的时候改变 scrollerView 的背景色代码

    要实现点击电池条的时候立即回到页面的顶部的时候注意: 只有当一个主控制器有一个scrollview 并把这个属性设置为yes,其他的scrollview.scrollsToTop = NO 这样才会响 ...

  8. Java调用Static修饰的本类方法

    public class Dy { public static void main(String[] args){ int a=6; int b=5; int result=0; result=Add ...

  9. poj3249【拓扑排序】

    //题意:   给出一个有向无环图,每个顶点都有一个权值. //         求一条从入度为0的顶点到出度为0的顶点的一条路径, //         路径上所有顶点权值和最大. //我觉得只要明 ...

  10. python __builtins__ property类 (55)

    55.'property',  获取对象的所有属性 class property(object) | property(fget=None, fset=None, fdel=None, doc=Non ...