Node 模块对 DOM 操作和事件注册等方法做了进一步封装,能让你很方便快捷的用链式风格书写代码:


    S.one('#test').parent()
                  .next()
                  .html('<p>new paragraph</p>')
                  .appendTo('#test2')
                  .on('click', function(ev) {
                      // your code
                  });

Node 模块包括:

  • node Node
  • nodelist NodeLst

Node 和 NodeList 都拥有以下方法:


hasClass addClass removeClass replaceClass toggleClass
attr removeAttr text val
css width height
offset
parent next prev siblings children contains
insertBefore insertAfter append appendTo prepend prependTo
on detach

所有方法和对应的 DOM 方法类似,请查看 dom docs

在载入动画支持后,Node 和 NodeList 都拥有以下方法:


show hide toggle
fadeIn fadeOut
slideDown slideUp

所有方法和对应的 animate 方法类似,请查看 animate docs

Node Properties

length - Number

Node 所包含的元素个数,始终为 1

Node Methods

getDOMNode HTMLElement getDOMNode()

获取相关联的 DOM 元素。

NodeList Properties

length - Number

NodeList中所包含的元素个数,默认为 0

NodeList Methods

getDOMNodes HTMLElement getDOMNodes()

获取相关联的 DOM 元素集合。

item Node item(index)

获取第 index 个 Node 对象。

each void each(fn, context)

遍历 NodeList 对象。

Node 和 NodeList 的共同特性


var S = KISSY;

var node = S.one('#test p'); // S.one 返回 Node
var nodelist = S.all('.test'); // S.all 返回 NodeList

// 可以通过下标获取与 Node/NodeList 相关联的 DOMElement
alert(node[0].nodeType);
alert(nodelist[0].nodeType);

// 都有 length 属性,都是 array-like
Array.prototype.slice.call(node);
Array.prototype.slice.call(nodelist);

// 都支持 dom, event 的通用方法
node.next().val();
nodelist.parent().attr('id');

特别注意:NodeList 支持的 DOM 方法,都遵循 Get-First-Set-All 原则。如果是 getter, 只会返回第一个 DOMNode 的对应值,而不是集合。

home › node :

Sub modules