因为在编写js代码时经常要用到
document.getElementById(id);
document.getElementsByClassName(classname);
document.getElementsByTagName(tagname);
所以我们可以封装一个函数进行模拟相应功能,进而简化代码
首先封装函数$(selector,context)
其中参数selector是传选择器的字符串,可取代可取 #id .class element,
参数context是DOM
查询上下文,即在该DOM
元素后代查找满足选择器条件的元素,默认在 document
中查找,简单来说在这儿可以替代document
$函数代码如下:
/**
* 根据选择器查找元素
* @param selector <String> 选择器,可取 #id .class element
* @param context <DOM> 查询上下文,即在该DOM元素后代查找满足选择器条件的元素,默认在 document 中查找
* @return 返回查找到的元素(根据id查找时返回的是查找到的DOM对象,根据类名或元素名查找时,返回的是 HTMLCollection)
*/
function $(selector,context){
// 如果未传递 context 参数,则默认取 document 值
context = context||document;
//通过判断selector字符串第一个字符来判别 #id .class element
if(selector.charAt(0) === "#")//通过id查找
return context.getElementById(selector.slice(1));
//selector.slice(1)截取字符串除去第一个字符后面的字符串,如#id-->id
if(selector.charAt(0) === ".")//通过classname查找
return context.getElementsByClassName(selector.slice(1));
else//元素名查找
return context.getElementsByTagName(selector);
}
因为IE8及以下不支持document.getElementsByClassName()方法,所以以上函数还需修改调整以解决兼容问题
封装函数byClassName(classname,context)解决兼容问题
function byClassName(className, context) {
// 默认在 document 文档中查找
context = context || document;
/* 支持使用 getElementsByClassName 方法,则直接使用 */
if (context.getElementsByClassName)
return context.getElementsByClassName(className);
/* 不支持使用 getElementsByClassName 方法 */
// 保存所有查找到元素的数组
var _result = [];
// 将查询上下文后代中所有元素查找出来
var _tags = context.getElementsByTagName("*");
// 遍历迭代所有元素
for (var i = 0, len = _tags.length; i < len; i++) {
// 获取当前遍历到元素的所有类名
var _classNames = _tags[i].className.split(" ");//将有多个类名同时存在时分割成新数组存入_classNames[] 数组中
// 遍历所有类名
for (var j = 0, l = _classNames.length; j < l; j++) {
if (_classNames[j] === className) { // 当前元素的某个类名与待查找的类名一致
// 说明当前遍历到的元素是需要查找的元素之一
_result.push(_tags[i]);
break;
}
}
}
// 返回所有查找到的结果
return _result;
}
将$()函数通过类名查找的代码部分进行修改
function $(selector,context){
// 如果未传递 context 参数,则默认取 document 值
context = context||document;
if(selector.charAt(0) === "#")//id
return context.getElementById(selector.slice(1));
if(selector.charAt(0) === ".")//classname
//调用byClassName()解决兼容
return byClassName(selector.slice(1),context);
else
return context.getElementsByTagName(selector);
}
这样便可以直接调用$()函数查找元素啦,如下:
$(".box1")——>查找类名为“box1”的元素
$("#box1")——>查找id为“box1”的元素
$("p")——>查找元素p标签
$(".box1",$("#box"))——>在id为“box”元素下查找元素类名为“box1”的元素
希望有帮助到正在奋斗的你