增删节点

 

示例代码

创建文本节点

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;
}