getElementsByClassName兼容 封装
众所周知，JS获取DOM有个getElementsByClassName，非常方便，但是呢，为了兼容某些浏览器(你懂的)。只能 进行封装下了。解决方法如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>getElementsByClassName 封装</title>
</head> <body>
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
<div class="item">item6</div>
</body>
<script>
function getElementsByClassName(name, attrbuteName) {
var arr = [];
if (document.getElementsByClassName) {
// 如果支持这个属性，直接获取
arr = document.getElementsByClassName(name)
} else {
// 如果 不支持
var attr = attrbuteName ? attrbuteName : "*";///如果指定标签名称则用
var tagNameArr = document.getElementsByTagName(attr);
for (var index = ; index < tagNameArr.length; index++) {
var classNameArr = tagNameArr[index].className.split(" ")
for (var j = ; j < classNameArr.length; j++) {
if (classNameArr[j] === name) {
arr.push( tagNameArr[index])
} }
}
}
return arr;
}
getElementsByClassName("item","div")[].style.color = "red"
</script> </html>
getElementsByClassName兼容 封装的更多相关文章
- requestAnimationFrame 完美兼容封装
完美兼容封装: (function() { var lastTime = 0; var vendors = ['webkit', 'moz']; for(var x = 0; x < vendo ...
- getElementsByClassName - 兼容详细介绍
概述 JavaScript中getElementsByClassName()方法IE8及以下不支持.本文通过使用正则表达式实 现1个兼容方案. 本文内容分为3个部分. 浏览器原生getElements ...
- JS-特效 ～ 05. 缓动框架兼容封装／回掉函数／兼容透明度／层级、旋转轮播图、正则表达式、验证表单注册账号、
缓动函数中opcity 写百分值的值 JS一般不用小数运算,会照成精度丢失 元素的默*认透明度是 层级一次性赋值,不缓动 利用for…in为同一个父元素的子元素绑定属性 缓动框架兼容封装/回掉函数/ ...
- 兼容IE8以下，获取className节点的元素(document.getElementsByClassName()兼容写法)。
因为ie8一下不兼容 document.getElementsByClassName() 功能:通过class的名字获取符合条件的元素 ...
- 解决getElementsByClassName兼容问题
getElementsByClassName这个方法很常用,但是只有较新的浏览器才兼容,所以我们需要自己写个方法,解决这个问题,使它能够兼容各个浏览器. function getElementsByC ...
- 让getElementsByClassName兼容
function getElementsByClassName(node, classname){ if(node.getElementsByClassName){ //使用现有方法 return n ...
- javascript中document.getElementsByClassName兼容性封装方法一
var getElmsByClsName = function(className, results) { results = results || []; // 判断浏览器是否支持 getEleme ...
- getElementsByClassName兼容低版本浏览器
var getElementsByClassName = function (searchClass, node,tag) { if(document.getElementsByClassName){ ...
- 针对css3特性浏览器兼容 封装less
//--------------------------------------------------- // LESS Prefixer //--------------------------- ...
随机推荐
- Quartus Prime 与 Modelsim 调试 及do文件使用
Quartus Prime 与 Modelsim 调试 及do文件使用 2019-06-28 11:12:50 RushBTaotao 阅读数 49更多 分类专栏: IntelFPGA-Softwar ...
- 【MySQL】Mysql模糊查询like提速优化
一般情况下like模糊查询的写法为(field已建立索引): SELECT `column` FROM `table` WHERE `field` like '%keyword%'; 上面的语句用ex ...
- CentOS7安装Apache2和PHP7
安装Apache 2.4 更新源:rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpmrpm ...
- error Microsoft Visual C++ 14.0 is required 解决方案
Windows平台上,pip install fastFM scrapy等工具的时候,经常出现 error Microsoft Visual C++ 14.0 is required 的错误, ...
- 工作流之activiti6新手上路
工作流的定义(解决什么问题?) 工作流(Workflow),就是“业务过程的部分或整体在计算机应用环境下的自动化”,它主要解决的是“使在多个参与者之间按照某种预定义的规则传递文档.信息或任务的过程自动 ...
- CentOS7使用yum安装redis
#下载fedora的epel仓库yum install epel-release #安装redis数据库yum install redis # 启动Redisservice redis start # ...
- 爬虫相关-scrapy框架介绍
性能相关-进程.线程.协程 在编写爬虫时,性能的消耗主要在IO请求中,当单进程单线程模式下请求URL时必然会引起等待,从而使得请求整体变慢. 串行执行 import requests def fetc ...
- 解决IDEA中导入新的maven依赖后Language Level自动重置问题
问题: 弄了个测试项目,因为有涉及JDK1.8的代码,所以将IDEA中默认的Language Level 5(即对应JDK1.5),修改为了8(即对应JDK1.8),但是每次引入新的maven依赖,自 ...
- 如何录制高清GIF格式的图片
如何录制高清GIF格式的图片 工具:傲软GIF 下载地址:https://www.apowersoft.cn/gif 特点:质量高,能够一帧一帧的修改 使用简单.就不说了.自行尝试.这里只是提供一个制 ...
- css3写下雨效果
css3写下雨效果<pre><div class="xiayuxiaoguo"></div></pre> <pre>.x ...