使用原生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 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...
随机推荐
- GDUT 积木积水 2*n 时间复杂度
题意 Description 现有一堆边长为1的已经放置好的积木,小明(对的,你没看错,的确是陪伴我们成长的那个小明)想知道当下雨天来时会有多少积水.小明又是如此地喜欢二次元,于是他把这个三维的现实问 ...
- Erlang-VM节点启动名冲突问题
今天在启动聊天的ErlangVM后,在日志中发现错误信息: Protocol 'inet_tcp': the name chatserver@127.0.0.1 seems to be in use ...
- RxJava 参考文档
/*************************************************************** * RxJava 参考文档 * 说明: * 最近无意中发现RxJava ...
- web.xml配置之<context-param>
<context-param>的作用和用法: 1.<context-param>配置是是一组键值对,比如: <context-param> <p ...
- HTTP 请求的组成 方法 已经 请求的状态码
HTTP请求是指从客户端到服务器端的请求消息. 包括:消息首行中,对资源的请求方法.资源的标识符及使用的协议.从客户端到服务器端的请求消息包括,消息首行中,对资源的请求方法.资源的标识符及使用的协议. ...
- 从1到N的整数中1出现的次数
/* * 1-n整数中1出现的次数.cpp * * Created on: 2018年5月1日 * Author: soyo */ #include<iostream> using nam ...
- 日志系统:一条sql更新语句是如何执行的?--Mysql45讲笔记记录 打卡day2
下面是一个表的创建语句,这个表有一个主键id和一个整型字段c: create table t(id int primary key,c int); 如果要将 id = 2 这一行的值加 1,sql语句 ...
- bzoj 4909 [Sdoi2017]龙与地下城
题面 https://www.lydsy.com/JudgeOnline/problem.php?id=4909 题解 目前为止仅仅在LOJ上A掉这道题(Loj真快!) 当然不是标准做法 显然我们只要 ...
- 二分查找 2015百度之星初赛1 HDOJ 5246 超级赛亚ACMer
题目传送门 /* 二分找到不大于m的最大的数,记做p,只要a[p] + k <= a[p+1]就继续 注意:特判一下当没有比m小的数的情况:) */ #include <cstdio> ...
- 题解报告:hdu 4607 Park Visit(最长链)
Problem Description Claire and her little friend, ykwd, are travelling in Shevchenko's Park! The par ...