Javascript封装id、class与元素选择器方法示例
由于各个浏览器都支持的选择方法只有如下三种：
- 1、document.getElementById()
- 2、document.getElementsByName()
- 3、document.getElementsByTagName()
所以在封装选择器的时候要考虑浏览器的兼容性
<script>
//封装id选择器
function $(selector) {
var c = selector.substring(0, 1); //获取第一个字符
if (c == "#") {
return document.getElementById(selector.substring(1, selector.length)); //返回相应的元素
}
}
//封装class选择器
function $(selector) {
var className = selector.substring(1); //从索引为1的元素往后取
//判断浏览器是否支持getElementsByClassName
if (document.getElementsByClassName) {
return document.getElementsByClassName(className)
//document.querySelectorAll('.cls')兼容性有问题
} else {
//document.getElementsByTagName('*')+正则表达式
//\s空白字符 ^开始 $结束
var reg = new RegExp('^|\\s' + className + '$|\\s');
var elems = document.getElementsByTagName("*"); //获取页面中所有元素
var arr = []; //保存获取到的指定className的元素
for (var i = 0; i < elems.length; i++) {
if (reg.test(elems[i].className)) { //如果和模式匹配上
arr.push(elem[i]);
}
}
return arr;
}
}
//封装标签选择器
function $(element) {
return document.getElementsByTagName(element);
}
</script>