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>