javascriptDOM笔记02

javascriptDOM笔记02

1.创建并加入节点
（1）创建一个元素节点
createElement(elementTagName);
（2）创建一个文本节点
createTextNode(string);
（3）为元素节点添加子节点
elementNode.appendChild(newChild);

2.交换节点
（1）用a节点替换b节点：replaceChild(aNode, bNode);

• 替换后a节点被移动到b节点处（不是复制带b节点处）

（2）两个节点互换的函数：

function replaceEach(aNode, bNode){
		//1.获取aNode和bNode 的父节点，使用parentNode属性
		var aParent = aNode.parentNode;
		var bParent = bNode.parentNode;
		
		if(aParent && bParent){
			//2.克隆aNode或bNode
			var aNode2 = aNode.cloneNode(true);			
			//3。分别调用aNode的父节点和bNode的父节点的replaceChild()
			bParent.replaceChild(aNode2, bNode);
			aParent.replaceChild(bNode, aNode);
		}
	}

3.删除节点

通过b节点的父节点删除b节点：bjNode.parentNode.removeChild(bjNode);

插入节点
把一个给定的节点插入到给定元素节点的给定节点的前面

• element.insertBefore(newNode， targetNode)
  节点newNode将被插入到元素节点element中并出现在targetNode节点之前
  节点targetNode必须是element元素的一个子节点
  具有移动的功能

//把newNode 插入到refNode的后面
	function insertAfter(newNode, refNode){
		//1.测试refNode是否为其父节点的最后一个子节点
		var parentNode = refNode.parentNode;
		if(parentNode){
			var lastNode = parentNode.lastChild;
			
			//2.若是：直接把newNode插入为refNode父节点的最后一个子节点
			if(refNode == lastNode){
				parentNode.appendChild(newNode);
			}else{
				//3.若不是：获取refNode的下一个兄弟节点，然后插入到其下一个兄弟节点的前面
				var nextNode = refNode.nextSibling;
				parentNode.insertBefore(newNode, nextNode);
			}
		}
		
	}

4.innerHTML 属性
非标准，但浏览器都支持
读写属性，读写某HTML元素的HTML内容