最近在工作中,由于有一个插件必须使用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. CollapsingToolbarLayout 收缩显示tilte

    final CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id. ...

  2. [原创]java合并word文件

    需求背景 在互联网教育行业,做内容相关的项目经常碰到的一个问题就是如何动态生成一张word试卷.事先把题库中的每一道试题都已经保存成一个独立的word文件了,但是在选择了部分试题生成一张word试卷的 ...

  3. linux静默安装Oracle 11g

    ./runInstaller -silent -force -responseFile /home/oracle/software/database/response/orcl_install.rsp ...

  4. iOS 观察者模式(KVO)的简单使用

    KVO的全称是Key-Value Observing,它实现了一种机制,对所关心的属性对象添加观察者,当属性值发生变化时会得到通知,我们可以对变化做相应的处理.看过设计模式的同学应该知道,这是一种典型 ...

  5. 我自己比较习惯的Watir自动化测试代码管理方式

  6. 使用lsyncd配置数据库备份多异地同步

    lsyncd配置文件 settings { logfile = "/var/log/lsyncd.log", --日志路径 status = "/var/log/lsyn ...

  7. 6-11 SVM支持向量机2

    SVM支持向量机的核:线性核.进行预测的时候我们需要把正负样本的数据装载在一起,同时我们label标签也要把正负样本的数据全部打上一个label. 第四步,开始训练和预测.ml(machine lea ...

  8. eclipse整合tomcat

    首先确保jdk已经安装好 步骤1 获得服务器运行环境配置,Window/Preferences/Server/Runtime Environmen l步骤2 添加服务器 步骤3 选择服务器在硬盘的地址 ...

  9. 网络爬虫之Selenium模块和Xpath表达式+Lxml解析库的使用

    实际生产环境下,我们一般使用lxml的xpath来解析出我们想要的数据,本篇博客将重点整理Selenium和Xpath表达式,关于CSS选择器,将另外再整理一篇! 一.介绍: selenium最初是一 ...

  10. linux下svn的建库以及相关配置

    1.安装svn软件 yum install subversion -y 2.建立库的根目录,此目录下为所有库的根目录(路径为:/home/svn-server/) ,然后进入此目录 mkdir /ho ...