本文介绍如何使用原生 JavaScript 封装一个轻量级的元素选择器。通过封装 document.getElementById、getElementsByClassName 和 getElementsByTagName 等常用方法，实现支持 ID、Class、标签及属性选择的统一接口。利用对象扩展机制为返回的 DOM 节点附加 addClass、styleSettings 等便捷方法，简化前端页面元素获取与操作逻辑。
JavaScript 原生实现元素选择器封装
本文分享了一段使用 JavaScript 实现元素选择器的具体代码示例，供开发者参考学习。
什么是元素选择器？
什么是元素选择器？
熟悉 jQuery 的开发者了解，jQuery 封装了元素查找功能，通过提供选择条件字符串即可获取对应的页面元素。元素选择器本质上是一个工具函数，旨在通过特定的条件字符串来定位并返回相应的页面元素。
选择器类型与底层方法
常见的元素选择器类型包括 ID 选择器、Class 选择器、标签选择器以及属性选择器。
ID 选择器通过元素唯一的 id 属性来精准获取单个元素。
Class 选择器通过元素的 class 属性获取一组元素列表。
标签选择器通过元素的标签名称获取对应的元素集合。
属性选择器则依据元素的特定属性来获取相应的元素列表。
元素选择器的底层实现可以基于 JavaScript 的 document 对象提供的方法。document 对象中用于获取元素的主要方法包括：
1、getElementById
2、getElementsByClassName
3、getElementsByTagName
除了上述三种常用方法外，还有其他获取页面元素的方式，但这三种是日常开发中最为基础和频繁使用的。
元素选择器实现代码
以下展示一个简化的元素选择器实现代码。
function node(selector) {
if(selector.indexOf("#")==0) {
var dom = document.getElementById(selector.substring(1));
FE.extend("addClass",dom,addClass);
FE.extend("removeClass",dom,removeClass);
FE.extend("prevNode",dom,prevNode);
FE.extend("value",dom,value);
FE.extend("styleSettings",dom,styleSettings);
FE.extend("nextNode",dom,nextNode);
return dom;
}else if(selector.indexOf(".")==0) {
var doms = document.getElementsByClassName(selector.substring(1));
var result = [];
for(var i=0;i<doms.length;i++) {
FE.extend("addClass",doms[i],addClass);
FE.extend("removeClass",doms[i],removeClass);
FE.extend("prevNode",doms[i],prevNode);
FE.extend("value",doms[i],value);
FE.extend("styleSettings",doms[i],styleSettings);
FE.extend("nextNode",doms[i],nextNode);
result.push(doms[i]);
}
return result;
}else {
var start = selector.indexOf("[");
var end = selector.indexOf("]");
var tagName = selector.substring(0,start);
var attrStr = selector.substring(start+1,end);
var attr = attrStr.split("=");
var doms = document.getElementsByTagName(tagName);
var result = [];
for(var i=0;i<doms.length;i++) {
var attrName = attr[0];
var value = doms[i].getAttribute(attrName)
if("'"+value+"'" == attr[1]) {
FE.extend("addClass",doms[i],addClass);
FE.extend("removeClass",doms[i],removeClass);
FE.extend("prevNode",doms[i],prevNode);
FE.extend("value",doms[i],value);
FE.extend("styleSettings",doms[i],styleSettings);
FE.extend("nextNode",doms[i],nextNode);
result.push(doms[i]);
}
}
return result;
}
}元素选择器实现总结
元素选择器实现总结
简而言之，该实现封装了对元素获取的底层方法。每次获取页面元素时，无需重复调用 document 对象的方法，只需使用工具函数 node 并传入满足 selector 条件的字符串即可。考虑到页面元素通常具备修改 class（如 addClass、removeClass）、操作 style 属性（styleSettings）、读写元素属性（value）以及获取前后节点（prevNode、nextNode）等共性需求，这些功能可以通过扩展对象的类方法 extend 绑定到返回的元素上。这样开发者无需编写额外代码即可直接调用这些方法。
extend 类方法允许向任意对象添加任意属性。在 JavaScript 中，除基本类型变量外，所有变量均可视为对象。我们可以利用类似代码的方式获取或修改对象属性：
var o = {name:"fe_spiderman",username:"路爷交欢"}
/*通过对象引用方式获取对象的属性*/
o.name
/*通过键值对的方式获取对象的属性*/
o[“name”]JavaScript 的这种特性极大地增强了对象的可扩展性。这意味着开发者无需通过复杂的继承或接口封装来维护代码可读性，从而提升了开发的灵活性与乐趣。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。