基于原生JS的简易DOM查询封装实现

作者:页面旅途

时间:2026-10-30

浏览:401

本文分享了一个基于原生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查询的完整示例代码,分享给各位读者参考,希望能对大家的开发工作有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章