DOM工具函数

skylarkjs提供了大量简单而强大的dom工具函数，不需要第三方UI库，只使用这些函数即可开发功能强大的HTML应用程序。

DOM工具函数包含以下三种类型的API，您可以为根据您的场景选择使用最合适的API类型：

1. 节点级API
   直接指定对象DOM节点进行相应的操作，简单直观
2. vme api
   使用一个封装了单个DOM节点的vme对象。 支持链接调用，因此适用于对同一个DOM节点多次进行操作
3. query api
   使用query对象包装节点列表。 适用于对一组DOM节点进行同样的操作

skylarkjs中包含的工具函数按类别列出如下

• browser
  该模块封装了一些关于浏览器兼容性的API。
• css
  该模块封装了一些关于样式表和规则的API。
• scripter
  该模块封装了一些关于脚本加载和卸载的API。

• datax
  该模块封装了一些操作DOM节点属性的API。.
• dnd
  该模块封装了一些关于DOM拖放的API
• eventer
  该模块封装了一些关于DOM事件的API。
• filer
  该模块封装了一些关于文件操作的API。
• finder
  该模块封装了一些关于DOM查询的API。
• fx
  该模块封装了一些关于DOM动画的API。
• geom
  该模块封装了一些关于DOM节点大小的API。
• mover
  该模块封装了一些关于DOM节点移动的API。
• noder
  该模块封装了一些关于DOM节点构造的API。
• styler
  该模块封装了一些关于DOM节点样式和和类的API。

• velm
  该模块实现了VisuleElement类型，用于封装可视DOM节点。
  VisualElment提供了从节点级API封装的许多方法，并支持链接调用。

• query
  该模块提供了类似于jQuery的众多Query API

基于此模块的skylark-jquery则提供了与jquery完全兼容。

define(["skylarkjs"],function(skylarkjs){
  var finder = skylarkjs.finder,
      geom = skylarkjs.geom;
      
  var el = finder.find(".target:first");
  if (el) {
    var p = geom.pagePosition(el);
    p.left = p.left + 10;
    p.top = p.top + 30;
    styler.css(el,{
      position : "absoute"
    });
    geom.pagePosition(el,p);  
  }
});

vme模块实现了VisuleElement类型，用于包装可视DOM节点。

	
define(["skylarkjs"],function(skylarkjs){ 	
var vme = skylarkjs.vme;
//Get a VisualElement object from id
var ve1 = vme("id11");	

// Get a VisualElement object from dom node
var ve2 = vme(document.getElementById("id11"));	

// Get a VisualElement object from selector
var ve3 = vme.find(".cls1 .cls2");	

//Chains call
ve3.removeClass("cls1").addClass("cls2 cls3")	

}); 	

VisualElement类可通过vme.VisualElement访问，您可以通过添加新的原型方法或静态方法来扩展它。

	
define(["skylarkjs"],function(skylarkjs){ 	
var vme = skylarkjs.vme;
  vme.VisualElement.partial({	
    newProp1 : "value1",	
    newMethod1 : function() {}	
  });	
}); 	

query模块提供了一系列与jquery兼容的方法 ，并且代码更简单，更有效率。 您可以使用query，如使用jquery。