注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

dojo study --- dom-constructor  

2013-11-14 20:09:07|  分类: Javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

dojo/dom-constructor用于构建dom结构的模块,非常有用。

常用方法

create(tag, attrs, refNode, pos) Create an element, allowing for optional attribute decoration and placement.
destroy(node) Removes a node from its parent, clobbering it and all of its children.
empty(node) safely removes all children of the node.
place(node, refNode, position) Attempt to insert node into the DOM, choosing from various positioning options.
toDom(frag, doc) instantiates an HTML fragment returning the corresponding DOM.

How to Use
toDom
参数1 String : html fragment
参数2 document

require(["dojo/dom-construct"], function(domConstruct){
// Take a string and turn it into a DOM node
var nodeDiv = domConstruct.toDom("<div>I'm a Node</div>");
console.dirxml(nodeDiv);
var nodeFoo = domConstruct.toDom("<Foo><li>A</li><li>B</li></Foo>");
console.dirxml(nodeFoo);
var nodeError = domConstruct.toDom("<Error><li>A</li><li>B</li>");
console.dirxml(nodeError);

var nodeError2 = domConstruct.toDom("<Error><li>A<li>B");
console.dirxml(nodeError2);

var nodeError3 = domConstruct.toDom("<Error><li>A</li>B</orr>");
console.dirxml(nodeError3);
//toDom方法将html字符串,转换成Html Dom结构
//并对错误的html字符串结构,进行了修正,对不认识的标签,也进行了转换
});

结果:
dojo study --- dom-constructor - 星期五 - 星期五
 
place
参数1 String|DomNode node 

If it is a string starting with “<”, it is assumed to be an HTML fragment, which will be created. Otherwise it is assumed to be an id of a DOM node.

Note:

  • An HTML fragment can have more than one top node.
  • In the case of an invalid HTML fragment the result of instantiation is undefined.
  • When instantiating an HTML fragment the owner document of the reference node is used.
参数2 String|DomNode refNode  : The DOM node where the node should be placed. If a string, it is assumed to be the ID of the node
参数3 String Pos : before, after, replace, only, first, last defaut value: last

require(["dojo/dom-construct"], function(domConstruct){
domConstruct.place("<div>before: I am a div node, I am a div node,I am a div node</div>", "features", "before");
domConstruct.place("<div>after: I am a div node, I am a div node,I am a div node</div>", "features", "after");
domConstruct.place("<div>replace: I am a div node, I am a div node,I am a div node</div>", "features", "replace");
//domConstruct.place("<div>first: I am a div node, I am a div node,I am a div node</div>", "features", "first");
//domConstruct.place("<div>last: I am a div node, I am a div node,I am a div node</div>", "features", "last");
//domConstruct.place("<div>only: I am a div node, I am a div node,I am a div node</div>", "features", "only");
});

before: insert before refNode
after: insert after refNode
replace: replace refNode

first: insert first child
last: insert last child
only: replace all children


create
参数1 tag String|DomNode
参数2 attrs Object
参数3 refNode
参数4 pos

A convenient DOM creation, manipulation and placement utility shorthand. It is designed to simplify the frequently used sequence of DOM manipulation:

  • create a node,
  • set attributes on it,
  • and place it in the DOM.

It can be used with existing nodes too, if you want to assign new attributes and place it afterwards.

require(["dojo/dom-construct"], function(domConstruct){
var n1 = domConstruct.create("div");
console.dirxml(n1);
var n2 = domConstruct.create("div",{innerHTML: "<p>I am a P</p>", class:"ClassA"});
console.dirxml(n2);
var n3 = domConstruct.create("div",{innerHTML: "<p>I am a P</p>", class:"ClassA"}, "features", "before");
console.dirxml(n3);
});

empty 清除所有孩子节点

require(["dojo/dom-construct"], function(domConstruct){
//清空掉自己的content,也就是清空自己的children
domConstruct.empty("features");
});

destroy 销毁自己和所有孩子节点

require(["dojo/dom-construct"], function(domConstruct){
//摧毁所有Node 包括他自己和他的孩子节点
domConstruct.destroy("features");
});


参考资料:http://dojotoolkit.org/reference-guide/1.9/dojo/dom-construct.html
  评论这张
 
阅读(450)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017