JavaScript实现DOM对象选择器
在Web开发中，选择器是DOM对象的基本操作单元。选择器可以根据不同的选择器类型选出第一个符合的DOM对象。本文将详细介绍JavaScript实现DOM对象选择器的方法和思路。
**选择器类型**
根据传入的选择器类型，可以选出第一个符合的DOM对象。主要有五种选择器类型：
1. 通过id获取DOM对象，例如$(“#adom”)；
2. 通过tagName获取DOM对象，例如$(“a”)；
3. 通过样式名称获取DOM对象，例如$(“.classa”)；
4. 通过attribute匹配获取DOM对象，例如$(“[data-log]”)，$(“[data-time=2015]”)；
5. 通过层叠组合获取DOM对象，例如$(“#adom .classa”)。
**实现思路**
实现JavaScript实现DOM对象选择器的思路是：
1. 区分复合选择还是单项选择，单项选择的话分别用各自的方法进行获取，复合选择的话就要进行筛选。
2. 将传入选择器的字符串转换成数组，如果数组长度大于1的话，就是复合选择。如果不是的话，再判断是哪一种单项选择器。
3. 判断是哪一种单项选择器，然后进行筛选返回第一个元素。
**单项选择器判断**
判断是哪一种单项选择器可以用两种方法：
1. 用正则表达式。例如：
if(/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/.test(selector)){
//ID选择器
}
if(/^((?:[\w\u00c0-\uFFFF\-]|\\.)+)/.test(selector)){
//Tag选择器
}
if(/\.(?:[\w\u00c0-\uFFFF\-]|\\.)+/.test(selector)){
//class选择器
}
if(/^\[[A-Za-z0-9_-\S]+\]$/.test(selector)){
//属性选择器
}
2. 检查传入选择器的第一个字符。例如：
vartype=trim(selector).charAt(0);
switch(type){
case ".":
//class选择器
case "#":
//id选择器
case "[":
//属性选择器
default:
//tag选择器
}
**选择器实现**
根据选择器进行筛选。id和tag直接用DOM方法就可以了。class的document.getElementsByClassName有兼容问题，需要为IE定义方法。
通过这种方法，可以根据不同的选择器类型选出第一个符合的DOM对象，满足了Web开发中的基本操作需求。
我的内容管理
展开
