js封装 DOM获取
2019-09-04 00:28
1746 查看
function $(selector){
//获取第一个字符
var firstLetter = selector.charAt(0);
//对第一个字符进行判断
switch(firstLetter){
//#则为id
19c6
名称;
case '#' : return idSelector(selector);
break;
//.则为class;
case '.' : return classSelector(selector);
break;
default : return tagNameSelector(selector);
}
//idSelector
function idSelector(idS){
return document.getElementById(idS.substring(1));
}
//tagNameSelector;
function tagNameSelector(tagNameS){
return document.getElementsByTagName(tagNameS);
}
//classSelector
function classSelector(classS){
//兼容处理
if(docuent.getElementsByClassName){
return document.getElementsByClassName(classS.substring(1));
}else{
//放置dom节点的数组
var arr = [];
//如果浏览器不兼容getElementsByClassName
//获取页面中的所有的元素
var arrTag = document.getElementsByTagName('*');
//利用正则匹配找到对应的标签
var reg = new RegExp('(^|\\s)'+classS.substring(1)+'($|\\s)','g');
//遍历所有的标签
for(var i = 0 , k = arrTag.length ; i < k ; i++){
//如果标签拥有对用的class名称 push 到一个数组中
console.log(arrTag[i].className);
if(reg.test(arrTag[i].className)){
arr.push(arrTag[i]);
}
}
return arr;
}
}
}
相关文章推荐
- Js基础学习之 -- DOM兼容 根据标签、类名获取节点函数封装
- JS的DOM(一)获取节点
- JS 获取DOM节点宽高与绝对位置
- Chrome 控制台console 调试js 获取最近一次点选的DOM节点
- 封装常用的js(Base.js)——【01】理解库,获取节点,连缀,
- js框架 - 封装获取元素
- js中获取dom元素大小
- 简单封装js的dom查询
- 通过封装scroll.js 获取滚动条的值
- ajax|消息提示框|js获取html绝对位置 封装
- [Js]封装好的通过className来获取元素的函数
- JS1 js获取dom元素方法
- 解决webstorm调试js时Evaluate脚本获取dom属性丢失问题
- js如何获取触发js事件的DOM
- js之DOM操作中获取属性方法
- JS-DOM2级事件对象跨浏览器处理(已封装)
- JS获取浏览器地址参数的封装类
- JS获取DOM元素的八种方法
- JS获取DOM元素位置与大小
- js获取节点 dom操作