YUI3 DOM

YUI3  DOM

YUI3 DOM包含dom-base,dom-screen,dom-style,selector(selector-css2,selector-css3,selector-native)模块。

 

dom-base 

dom-base中包含了许多基本获取文档节点的函数(byId,allById,children...)，和一些常用方法 (getText,setText,contains)等

 

Y.DOM.allById(id, root)

内部通过三种方式找出指定id的元素，先检测querySelectorAll方法,然后是document.all,最后是原生的getElementById方法,

通过allById返回的是数组

 

Y.DOM.ById(id, doc)

获取Y.DOM.allById(id, root)返回结果中的第一个对象

 

Y.DOM.children(node, tag)

通过Y.Selector.query获取元素的子元素，需要Y.Selector模块支持。

 

Y.DOM.firstByTag(tag, root)

使用原生的getElementsByTagName方法获取,root中的第一个元素

 

 Y.DOM.getText(element) && Y.DOM.setText(element, content)

解决浏览器兼容性的问题，针对innerHTML和textContent的处理

 

Y.DOM.previous(element, fn, all), Y.DOM.next(element, fn, all) ,Y.DOM.ancestor(element, fn, testSelf)

在Y.DOM.elementByAxis的基础上获取兄弟节点和祖先节点

 

Y.DOM.contains(element, needle)

contains方法作用是检查一个元素是否包含另一个元素，element是否包含needle

先检查元素自身的contains方法,element[CONTAINS](needle)

最后是检查compareDocumentPosition方法,这个方法是 DOM Level 3 specification 的一部分， 

允许你确定 2 个 DOM Node 之间的相互位置。这个方法比 .contains() 强大。这个方法的一个可能应用是排序 DOM Node 成一个详细精确的顺序.

使用这个方法你可以确定关于一个元素位置的一连串的信息.

000 0 元素一致
001 1 节点在不同的文档（或者一个在文档之外）
010 2 节点 B 在节点 A 之前
100 4 节点 A 在节点 B 之前
000 8 节点 B 包含节点 A
000 16 节点 A 包含节点 B
000 32 浏览器的私有使用

YUI 3用的就是!!(element[COMPARE_DOCUMENT_POSITION](needle) & 16) 来确定 节点A包含节点B

 

Y.DOM.inDoc(element, doc)

确认元素是否在当前document中 

Y.DOM.create() && Y.DOM.addHTML()

创建一个新的元素，添加一个元素到指定的位置上

 

Y.DOM.setAttribute(el, attr, val, ieAttr) && Y.DOM.getAttribute(el, attr, ieAttr)

设置和获取元素属性，做了简单的封装，对一些属性做了特殊处理

'for': 'htmlFor',
'class': 'className' 

2个属性简单的映射,当获取class时，会帮你转成className

如 obj.getAttribute("class");  //返回时null, 转成className就没问题了

Y.DOM. setAttribute / Y.DOM. getAttribute 就做了这样的处理

 

Y.DOM.addClass() ,Y.DOM.removeClass(), Y.DOM.replaceClass(), Y.DOM.toggleClass()

YUI 3x 比 YUI2x 多了 Y.DOM.toggleClass方法

如果元素有某class则删除class,如果没有，则添加class.

 

dom-screen 

dom-screen模块提供了获取各种宽高度基本信息，坐标操作，区块操作等一系列常用的方法

例如 Y.DOM. docHeight() ,Y.DOM.docWidth(), getXY(),getX(),getY(),sexX(),setY(),setXY() 等.

Y.DOM.region()   返回一个坐标对象 ,包含以下内容 -> (top, right, bottom, left)

Y.DOM.intersect() 检测是否相交,返回当前区域与指定的另一个区域的重叠部分构成的区域

Y.DOM.inRegion() 检测元素是否在另一元素的区域里,我想给应该可以用于简单的矩形碰撞检测，不过YUI给出的方法只限定与矩形。

 

dom-style 

dom-style包含样式操作( setStyle和getStyle)和Y.Color(toRGB,toHex)。

样式操作比YUI 2x多出了 setStyles，批量设置样式的方法.

关于getStyle的方法 可以查看我的另一篇随笔 http://www.cnblogs.com/windows7/archive/2010/03/30/1700648.html

 

 

selector 

默认的selector模块包含了selector-css2和selector-native

selector-css3 采用了插件方式, 在selector-css2中预留了扩展接口，可以直接扩充。

 YUI3 的selector实现大致如下

分析 - >选择 ->过滤

 1、Y.Selector.__tokenize分析选择器: 如  "#page > p"   = >   "[id=page] > p"

1 combinators: {
2             ' ': {    axis: 'parentNode'  },
3             '>': {
4                 axis: 'parentNode',  direct: true
5             },
6             '+': {
7                 axis: 'previousSibling',  direct: true
8             }
9       } 

Y.Selector.combinators作为分割的基本元素符,Y.Selector. _parsers 中包含了属性选择器的正则表单式和过滤函数.

2、Y.Selector.__bruteQuery  选出符合条件的元素

3、Y.Selector._filterNodes对选出的元素进行过滤