JavaScript實現CSS選擇器
阿新 • • 發佈：2018-12-23
先看下面一段程式碼：
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head>
</head>
<body>
<div>
<span class="a">span</span>
<span class="a">span</span>
<span class="b">span</span>
</div>
<div id="div">
<span 在上面的html中，由兩個div和一個p組成，而三個標籤又各自包含了帶有或沒有帶有class的span。
假設我們要用css的方法選取id為div中的所有class為a的span元素，將他們的color設定為red，我們該怎麼做？
#div .a {
color : red;
}當然，用css實現真的很簡單。但是，我們用js實現css選擇器該如何實現呢？
第一步，我們先實現不帶層次的css選擇器，例如：
$("#box").css("color", 'red');
$("span").css('color', 'red');
$(".a").css('color', 'red');分別通過通過id、標籤和class來選取元素，並設定他們的樣式
下面是程式碼實現部分
// 前臺呼叫
var $ = function (args) {
return new Base(args);
}
// 基礎庫
function Base (args) {
this.elements = [];
if(typeof args === 'string') {
switch (args.charAt(0)) {
case "#":
this.elements.push(this.getId(args.substring(1)));
break;
case ".":
this.elements = this.getClass(args.substring(1));
break;
default :
this.elements = this.getTagName(args);
}
} else if (typeof args === 'object') {
if(args !== undefined) {
this.elements[0] = args;
}
}
}通過id查詢
// 通過id查詢元素
Base.prototype.getId = function (id) {
return document.getElementById(id);
}通過class查詢
// 通過className查詢元素
// className [string]要查詢的name字串
// parentNode [DOM Node]要查詢的ame字串的父節點
Base.prototype.getClass = function (className, parentNode) {
var node = null;
var temps = [];
if (parentNode !== undefined) {
node = parentNode;
} else {
node = document;
}
var all = node.getElementsByTagName("*");
for (var i = 0; i < all.length; i++) {
if (all[i].className === className) {
temps.push(all[i]);
}
}
return temps;
}通過tagName查詢
// 通過TagName查詢元素
// tag [string]要查詢的標籤字串
// parentNode [DOM Node]要查詢的節點的父節點
Base.prototype.getTagName = function (tag, parentNode) {
var node = null;
var temps = [];
if (parentNode !== undefined) {
node = parentNode;
} else {
node = document;
}
var tags = node.getElementsByTagName(tag);
for (var i = 0; i < tags.length; i++) {
temps.push(tags[i]);
}
return temps;
}設定css部分
// 設定CSS樣式
Base.prototype.css = function (attr, value) {
for (var i = 0, len = this.elements.length; i < len; i++) {
if (arguments.length == 1) {
getStyle(this.elements[i], attr);
}
this.elements[i].style[attr] = value;
}
return this;
};雖然我們可以實現單個的選擇器查詢，但是沒有層次感，例如：
$("div").find('.b').css('color', 'red');
$("p").find('span').css('color', 'red');
$("p").find('#span').css('color', 'red');我們在實現查找了第一個節點之後，用find（）方法繼續進行查詢，然後設定樣式
下面是find（）方法的實現程式碼
// 通過find查詢子元素
Base.prototype.find = function (str) {
var childElement = []; // 存放子節點
for (var i = 0; i < this.elements.length; i++) {
switch (str.charAt(0)) {
case "#":
childElement.push(this.getId(str.substring(1)));
break;
case ".":
var all = this.elements[i].getElementsByTagName("*");
for (var j = 0; j < all.length; j++) {
if (all[j].className === str.substring(1)) {
childElement.push(all[j]);
}
}
break;
default :
var tags = this.elements[i].getElementsByTagName(str);
for (var j = 0; j < tags.length; j ++) {
childElement.push(tags[j]);
}
}
}
this.elements = childElement;
return this;
}雖然這樣我們可以不停的通過find方法來查詢自己想要的元素，但是它不夠簡潔和靈活，我們需要像css選擇器那樣查詢元素，例如：
$("#div .a").css("color", 'red');
$("div span").css("color", 'red');
$("#div span").css("color", 'red');
因此，我們需要對Base構造器進行升級
function Base (args) {
this.elements = [];
if(typeof args === 'string') {
if (args.indexOf(" ") !== -1) {
// CSS選擇器查詢
var elements = args.split(" "); // 選擇器的層次陣列
var node = []; // 父節點
var childElement = []; // 子節點陣列
for (var i = 0, len = elements.length; i < len; i ++) {
if (node.length === 0) {
node.push(document);
}
switch (elements[i].charAt(0)) {
case "#":
childElement = [];
childElement.push(this.getId(elements[i].substring(1)));
node = childElement;
break;
case ".":
childElement = [];
// 遍歷父節點
for(var j = 0; j < node.length; j ++) {
var temps = this.getClass(elements[i].substring(1), node[j]);
for (var k = 0; k < temps.length; k ++) {
childElement.push(temps[k]);
}
}
node = childElement;
break;
default :
childElement = [];
for (var j = 0; j < node.length; j ++) {
var temps = this.getTagName(elements[i], node[j]);
for (var k = 0; k < temps.length; k ++) {
childElement.push(temps[k]);
}
}
node = childElement;
}
}
this.elements = childElement;
} else {
// find查詢
switch (args.charAt(0)) {
case "#":
this.elements.push(this.getId(args.substring(1)));
break;
case ".":
this.elements = this.getClass(args.substring(1));
break;
default :
this.elements = this.getTagName(args);
}
}
} else if (typeof args === 'object') {
if(args !== undefined) {
this.elements[0] = args;
}
}
}當然，CSS中還有像>這樣的後代選擇器，我們可以也可以模仿上述方法來顯示，這裡就不浪費大家的事件了，謝謝！