本文分享了一个基于原生JavaScript实现的简易DOM查询封装示例。通过判断传入字符串的首字符(#、.或普通字符),分别调用getElementById、getElementsByClassName及getElementsByName等方法,实现了类似jQuery的简洁调用方式,旨在为前端开发提供一种轻量级的DOM操作方案。
JavaScript DOM查询封装思路
近期在阅读相关技术书籍时受到启发,尝试编写了一段用于简化DOM查询的JavaScript代码。
核心选择器逻辑实现
$ = function (val) {
switch(val.charAt(0)) {
case '#' :
return document.getElementById(val.substring(1));
break;
case '.' :
val = val.replace('.','');
if(document.getElementsByClassName)
return document.getElementsByClassName(val);
else {
var obj = document.getElementsByTagName('*'),len = obj.length,arr=[];
for(var i=0;i<len;i++) {
if(obj[i].className == val) {
arr[arr.length] = obj[i];
}
}
return arr;
}
break;
default :
if(document.getElementsByName(val).length > 0)
return document.getElementsByName(val);
else
return document.getElementsByTagName(val);
}
}
经过该封装实现后,后续调用ID元素时可直接使用类似$('#idname')的语法;处理Class时可使用$('.classname');而对于TagName和Name,代码内部进行了简单的逻辑判断,均支持直接通过$('name')的形式获取。经实际测试,该方案表现良好。
上述内容即为关于简单封装JavaScript DOM查询的完整示例代码,分享给各位读者参考,希望能对大家的开发工作有所帮助。