jQuery选择器原理分析_jquery dom选择器实现原理-CSDN博客

本文链接：https://blog.csdn.net/qq_43386754/article/details/86441683

选择器的实现原理

选择器的核心原理就在于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>

运行结果

在这里插入图片描述

如果"*"的形式出现了,实际上对于指定的元素的选择也可以轻松实现了
选择指定的几个元素设置样式

	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");
				}
				
			}
		}