js原生:封装document.getElementByClassName()函数
//接口封装:封装document.getElementByClassName()函数
function getElementsByClassName (cName,domTag,root) {//该函数有三个参数:第一个参数是class名(必选,字串形式);第二个参数是父容器(可选),默认为body节点;第三个参数是该DOM节点的标签名(字串形式)
if (root) {
root = typeof root == "string" ? document.getElementById(root) : root;
} else{
root = document.body;
};
domTag = domTag || "*";
var els = root.getElementsByTagName(domTag);
var arr = [];
for (var i = 0,n = els.length; i < n; i++) {
for (var j = 0,k = els[i].className.split(" "),l = k.length; j < l; j++) {
if (k[j] == cName) {
//console.log(els[i]);//这就是输出的标签DOm元素对象
// return els[i];els[i]就是Dom节点对象,追加到数组中保存
arr.push(els[i]);
break;
}
}
}
return arr;//返回的虽然是数组,但是数组存储的都是一个个Dom元素节点,在外面要调用节点的话,用arr[0]这种方法调用即可
}
js原生:封装document.getElementByClassName()函数的更多相关文章
- js原生的url操作函数,及使用方法。(附:下边还有jquery对url里的中文解码函数)
js原生的url操作函数,完善的. /*****************************/ /* 动态修改url */ /*****************************/ var ...
- main.js中封装全局登录函数
1. 在 main.js 中封装全局登录函数 通过 vue 对象的原型扩展,可以扩展一个函数,这样这个函数就可以在每一个界面通过类似指向对象的方式,去访问这个函数. 如下是 main.js 扩展的函数 ...
- 基于js原生封装的点击显示完整文字
基于js原生封装的点击显示完整文字 (function(window) { var inner = ''; var showCont_s = function(ele) { this.init.app ...
- 原生js,通过document.getElementByClassName获取元素的索引值
let itemList = document.getElementsByClassName('sky-item') // 一行所有元素 let index = 0 for(let i = 0; i& ...
- js原生封装getClassName()方法-ie不支持getElementsByClassName,所以要自己实现获取类名为className的所有元素
<html> <head> <script type="text/javascript"> window.onload = function() ...
- js原生封装自定义滚动条
/* * @Author: dothin前端 * @Date: 2015-11-21 00:12:15 * @Last Modified by: dothin前端 * @Last Modified t ...
- Js原生封装选项卡组件
class MyTab extends HTMLElement{ //创建一个类名MyTab constructor(){ //构造函数 super(); //指向父类构造函数,必须要有的 const ...
- js原生函数一些封装
这是一些js原生封装的函数,主要是为了兼容IE浏览器,如下 获取css样式 function getStyle(ele, prop) { if(window.getComputedStyle) { r ...
- js原生高逼格插件
如何定义一个高逼格的原生JS插件 作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高 ...
随机推荐
- C#入门经典第七章,错误调试
调试模式下执行应用程序-------F5或是绿色的运行箭头 非模式下,调试---开始执行不调试(ctrl+F5)
- 我也谈 javascript 模块化 -AMD规范
最近,读了很多有关js模块化编程方面的文章,自己也有些小小的理解,不过,还是得借助别人的总结,在这个基础上谈一谈自己的理解吧!参考:http://www.ruanyifeng.com/blog/201 ...
- mysql查询数据库约束
SELECT * FROM information_schema.`TABLE_CONSTRAINTS` where TABLE_SCHEMA='mold' and TABLE_NAME='tplmi ...
- 项目整体说明及WBS练习
乐谱识别研究的意义 纸质乐谱向数字化乐谱的转换,是人类音乐活动与计算机音乐处理之间进行信息交流的必经之路.光学乐谱识别是将纸质乐谱扫描输入计算机后,对乐谱图像加以处理.识别.分析,最终获得乐谱的计算机 ...
- springMVC和spring的集成
主要是2点 1.web.xml里 配置spring所需的listener 2. 新增applicationContext.xml, 配置注入的bean 3. 使用注解获取bean @Resource ...
- Myeclipse添加struts2支持后取消操作
Myeclipse添加struts包后, 想重新加载的方法: 1. myelicpse,右键项目,选close project 2. 找到项目所在目录, 打开.classpath删除带有struts2 ...
- ural1671 Anansi's Cobweb
Anansi's Cobweb Time limit: 1.0 secondMemory limit: 64 MB Usatiy-Polosatiy XIII decided to destroy A ...
- php new self 详解(转)
self points to the class in which it is written. So, if your getInstance method is in a class name M ...
- 使用bootstrap响应式布局——手机屏幕中横向滚动显示标签页选项
导航栏到小屏幕的时候,我们的处理办法是隐藏为一个按钮.可是选项卡的标签页部分,我们的处理办法是加一个水平滚动条.但是加水平滚动条需要解决一个问题,就是宽度的问题,如果不设置宽度,他就会根据屏幕大小自适 ...
- Python之路【第三篇】:模块
定义: 包:包含__init__.py文件.模块(也是.py文件) 当包被其它模块调用时,首先会执行该包下的__init__文件 包含有模块,包可以有多级 模块的导入: import from...i ...