选择器的实现原理
- 选择器的核心原理就在于DOM数据的处理上,而且对于DOM标准里面元素的选择之后两个核心的操作
- $ID:document.getElementById()
- 元素:document.getElementByTagName()
- 实际上在整个基础选择器之中,"*"是一个非常重要的实现过程,而且根据指定的样式选择,本质上来讲,就是进行整体元素的便利.
分析"*"的操作
<html>
<head>
<meta charset="UTF-8">
<title>jquery项目</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
window.onload=function(){
var rootEle = document.getElementsByTagName("html")[0];
getAll(rootEle);
for(var x =0; x < allEle.length;x++){
allEle[x].setAttribute("class","init");
}
}
//保存所有元素的数组
var allEle = new Array();
//操作数组的下标,每次保存一个数组之后,下标+1
var foot = 0;
/**
*得到一个元素下的所有子元素
*/
function getAll(element){
//判断该元素是否还有子元素
if(element.hasChildNodes()){
//得到该元素下的所有子元素集合
var childList = element.childNodes;
//遍历这个元素集合
for(var x =0; x < childList.length;x++){
//当子元素的nodeType 值 == 1的时候表示此元素为元素,如果notetype的值为3的时候.表示此时为一个文本节点
if(childList[x].nodeType == 1){
//那么就是递归调用该方法,继续找出该元素下的所有子元素
getAll(childList[x]);
}
}
}
allEle[foot ++] = element;
}
</script>
</head>
<body>
<div class="word">我爱这个世界!</div>
<div>生活还需继续!</div>
<div class="hello">生活不会偏袒你!</div>
</body>
</html>
jQuery选择器原理分析选择器的实现原理 - 如果"*"的形式出现了,实际上对于指定的元素的选择也可以轻松实现了
- 选择指定的几个元素设置样式
window.onload=function(){
var rootEle = document.getElementsByTagName("html")[0];
getAll(rootEle);
for(var x =0; x < allEle.length;x++){
//设置所有"P"元素
if(allEle[x].nodeName == "P"){
allEle[x].setAttribute("class","init");
}
}
}
jQuery选择器原理分析选择器的实现原理 
