每天挤一点，实现自己的selector函数（2）——主要思路与基本结构

最新推荐文章于 2023-03-09 00:29:48 发布

iteye_3224

最新推荐文章于 2023-03-09 00:29:48 发布

阅读量142

点赞数

本文介绍了一种基于CSS选择器的DOM元素选取算法流程。通过将输入的选择符字符串按逗号分隔并逐一处理，最终合并成一个元素集合，并去重返回。此方法利用原生querySelectorAll简化处理，适用于多种浏览器环境。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在（1）中进行了初步的语义分析，根据这几天反复的试验，，暂时选定了一个主要的算法流程来实现选择器，如下：

输入：字符串exprs, 由','连接的选择符，形式为"expr1, expr2, expr3 .."如"div .main #x, div, [type]"

输出：符合选择符条件的DOM元素集合ret

1、将输入exprs以','分隔成子表达式，

2、对每个子表达式求值，

3、合并每个子表达式的值到ret中，

4、对ret去除重复元素，

5、输出ret。

上述5个步骤构成了基本的思想，按照这个流程，定义一个对外的调用接口：

window.XX = window.XX || {};
/*
 * 选择器表达式处理函数，
 * 参数selectors:CSS选择符，默认为'*'
 * 参数context: 选择开始的父元素，默认为document
 * 返回值：若返回保存了符合选择符元素的数组或者NodeList对象
 * */
XX.$ = function(selectors, context) {
	 /*上下文，默认为document*/
	context = context || document;
	if(context.querySelectorAll) {//有原生的选择器，我们就不用操心了，，
		return context.querySelectorAll(selector);
	}

	 
	var  i, ret = [];
	//预处理，将selectors分解，即："expr1, expr2, .. "分解为[expr1, expr2, ..]以便逐个处理
	selectorArr = selectors.split(',');

	//逐个处理并合并元素
	for( i = 0, len = selectorArr.length; i < len; ++i) {
		ret = ret.concat( XX.selector(selectorArr[i], context));
	}

	return ret;
};

上述代码中，XX.selector函数是设想的处理子表达式的功能函数，选择器主要的实现就在这个函数上，也就是主要实现步骤2：对每个子表达式求值。

我这里把XX.selector函数称为子选择器，子选择器必须能够方便的扩展，以便能够在未来轻松的加入新的选择符。

今天挤得有点少，哈哈~~ 改天继续挤。。