jquery的出現，大大的提公升了我們操作dom的效率，使得我們的開發更上一層樓，如jquery的選擇器就是乙個很強大的功能，它包含了類選擇器、id選擇器、屬性選擇器、元素選擇器、層級選擇器、內容篩選選擇器等等，很是方便快捷，並且這些選擇器的相容性都很好，可以說操作dom使用jq選擇器一時爽，一直使用一直爽！只是，目前vue、react、angular三大框架的出現大大降低了jquery的使用頻率，而且jquery在操作dom和繫結資料時確實存在一定的效能問題和各種坑，但依舊不可抹殺jq在操作dom方面的強大存在！
說了jquery這麼多的牛逼之處，那麼它的很多內部原理是如何實現的呢？今天就來簡單實現乙個類似jquery的類選擇器和name屬性選擇器。
類選擇器：
function getelementsbyclass(classname) }}
return classarr;
}
function getelementsbyname(name) }}
return namearr;
}
再來貼一下用遞迴來實現獲取元素的所有子節點（含孫子節點）：
/**
* 遞迴獲取所有子節點
* node代表想要獲取所有子節點的父節點
type取值:
1 element 代表元素
2 attr 代表屬性
3 text 代表元素或屬性中的文字內容
4 cdatasection 代表文件中的 cdata 部分（不會由解析器解析的文字）
5 entityreference 代表實體引用
6 entity 代表實體
7 processinginstruction 代表處理指令
8 comment 代表注釋
9 document 代表整個文件（dom 樹的根節點）
10 documenttype 向為文件定義的實體提供介面
11 documentfragment 代表輕量級的 document 物件，能夠容納文件的某個部分
12 notation 代表 dtd 中宣告的符號
*/var allchildnodes = function (node, type)
getallchildnodes(child, type, allcn);}}
getallchildnodes(node, type, allcn);
// 3.返回全部節點的陣列
return allcn;
}// 呼叫：
// 獲取body中全部節點
allchildnodes(document.queryselector('body'), 1);
//獲取body中全部純文字節點
allchildnodes(document.queryselector('body'), 3)
屬性選擇器和結構偽類選擇器
e attr 選中e元素,且e元素有attr屬性 e attr value 選中e元素,且e元素有attr屬性,值為value e attr value 選中e元素,且e元素有attr屬性,包含值value e attr value 選中e元素,且元素有attr屬性,以value值開頭 e attr...
屬性選擇器 偽類選擇器 層級選擇器
漸進增強 作用範圍 從小到大 先保證最基本的功能 使用者體驗提公升 優雅降級 作用範圍 從大到小 先針對版本較高的裝置進行專案構建，保證使用者體驗的完美 犧牲一些效果，保證最基本的功能 選擇器 選擇符 id class 型別 div span 後代選擇器 偽類選擇器 偽元素選擇 屬性選擇器 e at...
css選擇器 偽類選擇器 屬性選擇器
偽類選擇器 nth of type index index 同型別兄弟元素中的排名 屬性選擇器 attr val attr 屬件名稱 val 屬性值 屬性選擇器 href val 表標屬性的結尾 屬性選擇器 class tap 表示屬的開頭 first child選擇第乙個 元素 nth of ty...