nodeType
在读Zepto v1.2.0
的源码时,有处函数如下,用来获取子元素
|
|
里面涉及到了children
和childNodes
两个属性,函数中首先判断children
属性是否存在,否则从childNodes
属性中获取所需元素。
对于这些属性首先看下在MDN中的解释:
ParentNode.children 是一个只读属性,返回 一个Node的子elements 的HTMLCollection
HTMLCollection 接口表示一个包含了元素(元素顺序为文档流中的顺序)的通用集合(generic collection)。
ChildNodes 接口包含特定于Node 对象的方法,这些对象可以有一个父对象。
节点有多种类型,比如元素、文本和注释,区分这些节点可以通过检查nodeType
属性。共计有12种节点类型,其中比较有代表性的如下:
节点类型 | 描述 | 值 | 常量 |
---|---|---|---|
Element | 一个元素节点, 如<p> 和<div> |
1 | ELEMENT_NODE |
Attr | 属性 | 2 | ATTRIBUTE_NODE |
Text | Element或者Attr中实际的文字 | 3 | TEXT_NODE |
Comment | 注释 | 8 | COMMENT_NODE |
Document | 代表整个文档(DOM 树的根节点) | 9 | DOCUMENT_NODE |
也就是说,childNodes
包含了children
的内容。
回到zepto
中,children
函数获取了父元素中所有子元素,并以数组的形式返回;而childNodes
则筛选了nodeType == 1
的节点,即 Element
类型的节点。
除此之外,zepto
在其他地方同样用到了nodeType
相关的属性,在上面的表格中有判断节点类型的常量来代替数字值。所以zepto在判断是否为document
函数中写成了如下形式:
|
|
其中DOCUMENT_NODE
的值为9
此children非彼children
在zepto
源码中继续查找可以发现$.fn
上同样定义了一个children
函数,这里的函数实际上就是平常所使用的选择器了,能够把获取到的数组转换为zepto
类型。
|
|