编写一个 JavaScript 函数,输入指定类型的选择器(仅需支持 id,class,tagName 三种简单 CSS 选择器,无需兼容组合选择器)可以返回匹配的 DOM 节点,需考虑浏览器兼容性和性能。
/*** @param selector {String} 传入的CSS选择器。* @return {Array}*/
var query = function(selector) {
var reg = /^(#)?(\.)?(\w+)$/gim;
var regResult = reg.exec(selector);
var result = [];
//如果是id选择器
if (regResult[1]) {
if (regResult[3]) {
if (typeof document.querySelector === "function") {
result.push(document.querySelector(regResult[3]));
} else {
result.push(document.getElementById(regResult[3]));
}
}
} //如果是class选择器
else if (regResult[2]) {
if (regResult[3]) {
if (typeof document.getElementsByClassName === "function") {
var doms = document.getElementsByClassName(regResult[3]);
if (doms) {
result = converToArray(doms);
}
} //如果不支持getElementsByClassName函数
else {
var allDoms = document.getElementsByTagName("*");
for (var i = 0, len = allDoms.length; i < len; i++) {
if (allDoms[i].className.search(new RegExp(regResult[2])) > -1) {
result.push(allDoms[i]);
}
}
}
}
} //如果是标签选择器
else if (regResult[3]) {
var doms = document.getElementsByTagName(regResult[3].toLowerCase());
if (doms) {
result = converToArray(doms);
}
}
return result;
};
function converToArray(nodes) {
var array = null;
try {
array = Array.prototype.slice.call(nodes, 0); //针对非IE浏览器
} catch (ex) {
array = new Array();
for (var i = 0, len = nodes.length; i < len; i++) {
array.push(nodes[i]);
}
}
return array;
}
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。