增删节点
示例代码
创建文本节点
var node = domlib.createTextNode("hello,hudaokeji");
创建元素节点
var node = domlib.createElemnt("div",{ "style" : "width:100%;height:100%" });
创建节点块
var node = domlib.createFragment("<div><span>label</span><input type='text'/></div>");
追加节点
//将node作为兄弟节点追加到refNode后面 domlib.appendAfter(node,refNode); //将node作为兄弟节点追加到refNode前面 domlib.appendBefor(node,refNode); //将node作为第一个子节点追加到parentNode下面 domlib.appendChildFirst(node,parentNode); //将node作为最后一个子节点追加到parentNode下面 domlib.appendChild(node,parentNode);
清空和删除节点
//清空node的内容 domlib.empty(node); //移除node domlib.remove(node);
工具函数列表
uDOMlib所提供的工具函数之中,有一部分与增删节点相关,下面列出部分函数的源代码实现以供参考。
clone
clone: function(node, deep) { var self = this, clone, doc; // TODO: Add feature detection here in the future if (!isIE || node.nodeType !== 1 || deep) { return node.cloneNode(deep); } doc = self.doc; // Make a HTML5 safe shallow copy if (!deep) { clone = doc.createElement(node.nodeName); // Copy attribs each(self.getAttribs(node), function(attr) { self.setAttrib(clone, attr.nodeName, self.getAttrib(node, attr.nodeName)); }); return clone; } return clone.firstChild; }
createElemnt
createElement : function(tag,props){ var node = document.createElement(tag); if (props) { utils.mixin(node,props); } return node; }
createFragment
createFragment: function(html) { var frag = document.createDocumentFragment(), node; if (html) { fragmentContainer.innerHTML = html; } while ((node = fragmentContainer.firstChild)) { frag.appendChild(node); } return frag; }
createTextNode
createTextNode : function(text){ return document.createTextNode(text); }
empty
empty : function(node){ while (node.hasChildNodes()) { var child = node.firstChild; node.removeChild(child); } return this; }
isChildOf
isChildOf: function(node, parent) { while (node) { if (parent === node) { return true; } node = node.parentNode; } return false; }
placeAfter
placeAfter: function(node,refNode){ var parent = refNode.parentNode; if(parent){ if(parent.lastChild == refNode){ parent.appendChild(node); }else{ parent.insertBefore(node, refNode.nextSibling); } } return this; }
placeBefore
placeBefore: function(node,refNode){ var parent = refNode.parentNode; if(parent){ parent.insertBefore(node, refNode); } return this; }
placeChildFirst
placeChildFirst: function(node,parentNode){ if(parentNode.firstChild){ insertBefore(node, refNode.firstChild); } else { parentNode.appendChild(node); } return this; }
placeChild
placeChild: function(node,parentNode){ parentNode.appendChild(node); return this; }
remove
remove: function(node){ if(node && node.parentNode){ node.parentNode.removeChild(node); } return this; }
replace
replace: function(node, oldNode) { oldNode.parentNode.replaceChild(node, oldNode); return this; }