首页 > 代码库 > 第十一课:选择器引擎涉及的通用函数
第十一课:选择器引擎涉及的通用函数
1.判断文档是否是XML文档
var isXML = function(elem){
var documentElement = elem && (elem.ownerDocument || elem).documentElement;
return documentElement ? documentElement.nodeName !=="HTML" : false;
}
看懂以上代码,需要先了解这两个的区别:
ownerDocument返回的是某个元素的根节点文档对象(即document对象)
而documentElement 返回的就是文档根节点。(html文档就是html,xml文档就是最外面的节点元素)
因此,如果传入函数中的元素属于html文档,那么documentElement = document.documentElement = html,因此html元素的nodeName == "HTML" (会默认变成大写)。
如果传入的的元素是XML文档,那么documentElement = document.documentElement = 最外面的节点元素,它不可能是html(html文档),所以就返回true。
这是jQuery中的方法,但是这不严谨:因为XML的根节点可能是HTML标签。(但谁这么无聊去那样创建xml呢)
有一种更严谨的方法:
var isXML = function(doc){
//xml文档创建元素时,传入小写的字母,取它的nodeName时就是小写。而HTML文档,不管传入的是小写还是大写,取它的nodeName时,都会是大写
return doc.createElement("p").nodeName !== doc.createElement("P").nodeName;
}
2.判定两个节点的关系
nodeA.compareDocumentPosition(nodeB)返回的结果: //标准浏览器支持,低版本浏览器不支持
0: 元素一致
1: 节点在不同的文档(或有一个节点在文档之外)
2: 节点B在节点A之前
4: 节点A在节点B之前
8: 节点B包含节点A
16: 节点A包含节点B
32: 浏览器的私有使用
当然,两个元素的位置关系可能满足以上两种情况,比如:A包含B,并且A在B的前面,这时就返回16+4=20.
为了兼容低版本浏览器,可以用IE的私有属性sourceIndex处理,sourceIndex会根据元素的位置从上到下,从左到右依次加1,比如HTML标签的sourceIndex为0,HEAD标签为1,BODY标签为2,HEAD的第一个子元素为3...,如果元素不在DOM树中,就返回-1.
3.节点排序
为了让选择器引擎搜索到的结果集与原生API结果一样,我们需要让元素节点按它们在DOM树出现的顺序排序。
(1)在IE以及Opera早期版本,可以使用sourceIndex进行排序。标准浏览器可以使用compareDocumentPosition判断,来排序。
(2)标准浏览器的Range对象有一个compareBoundaryPoints方法,它能迅速的得到两个元素的前后顺序。要兼容旧版本浏览器和XML文档,可以使用nextSibling等DOM API来处理。(所谓"Range"
,是指HTML文档中的任意一段内容。一个Range
的起始点和结束点位置可以任意,甚至起始点和结束点可以是一样的(也就是空Range
)。最常见的Range
是用户文本选择范围(user text selection)。当用户选择了页面上的某一段文字后,你就可以把这个选择转为Range
。当然,你也可以直接用程序定义Range
。)
(3)我们用选择器引擎选择好了之后,用document.getElementsByTagName("*")得到所有元素节点,这时它们肯定是排好序的。我们依次为它们添加一个类似sourceIndex的自定义属性,值为它的索引值。然后再去匹配选择器引擎选择好的结果,就可以排序了。
这里有一个tip跟大家说下:数组原生的sort方法,每个浏览器使用的排序算法都不一样。但是当它传入一个比较函数时,不管内部使用的是哪种排序算法,都需要多次比对,非常耗时。
这里讲一下经常会出现的面试题:对元素节点进行排序。我们可以把元素节点附在String对象数组中,比如:[{"0":元素1},{"1":元素2},{"2":元素3}],对这个数组逆序,然后根据数组的顺序取元素,元素节点就逆序了。
4.切割器
切割器就是对用户的选择符进行切割,这个步骤就像编译原理的词法分析,拆分出有用的符号出来。
比如:对于".td1,div a,body"这种选择符字符串,我们必须使用正则将它分解成以下数组:[".td1",",","div"," ","*",",","body"]。
然后就可以根据这个数组中的每项进行元素的创建和过滤了。最终去重排序,得到用户想要的元素。
这里主要用来正则表达式来处理字符串,需要强大的正则表达式基础,适合深入研究正则的人。
加油!
第十一课:选择器引擎涉及的通用函数