代碼如下:
// getElementById徐裸、getElementsByName郎仆、getElementsByTagName、getElementsByClassName歇僧，這幾個 API 的性能高于 querySelector。
// getElementsByName犬庇、getElementsByTagName付鹿、getElementsByClassName 獲取的集合并非數(shù)組，而是一個能夠動態(tài)更新的集合炎滞。
function querySelector(selector) {
let element = null
let elements = null
let idSelector = /(?<=#)[\w-]+/g
let classSelector = /(?<=\.)[\w-]+/g
let typeSelector = /^[a-zA-Z]+/g
let attrSelector = /(^[\w-]*)(\[(\w+)\]|\[(\w+)=\"(\w+)\"\])/g
if (idSelector.test(selector)) {
let id = selector.match(idSelector)[0]
element = document.getElementById(id)
} else {
}
if (classSelector.test(selector)) {
let className = selector.match(classSelector)[0]
elements = document.getElementsByClassName(className)
if (elements.length === 1) {
element = elements[0]
}
} else {
}
if (typeSelector.test(selector)) {
let tagName = selector.match(typeSelector)[0]
elements = document.getElementsByTagName(tagName)
if (elements.length === 1) {
element = elements[0]
}
} else {
}
if (attrSelector.test(selector)) {
//在調(diào)用 exec() 或 test() 時，RegExp $1-$9 屬性會被自動填充诬乞。
let res = attrSelector.exec(selector)
let tag = RegExp.$1
let attrName = RegExp.$3 || RegExp.$4
let attrValue = RegExp.$5
elements = document.getElementsByTagName(tag)
if (attrValue) {
elements = Array.prototype.filter.call(elements, ele => ele.getAttribute(attrName) === attrValue)
} else {
elements = Array.prototype.filter.call(elements, ele => ele.hasAttribute(attrName))
}
if (elements.length === 1) {
element = elements[0]
}
} else {
}
return element || elements
}
此為簡化版册赛，不能處理復(fù)合選擇器以及復(fù)雜選擇器
