节点（获取、创建、查找、替换、删除）！

节点的种类：
整个html文档 文档节点
文件中的所有标签 元素节点
标签的属性 属性节点
标签中的文本 文本节点
注释 注释节点
预加载事件：等文档中的元素及资源加载完毕后才执行的事件
1、window.οnlοad=function(){
}
2、在body标签上写onload事件
html代码从上往下执行，当获取的元素写在dom元素之前时，代码还未走到dom元素，此时无法找到dom对象，会返回null；
获取节点
方法 描述
getElementById() 根据 id 获取 dom 对象，如果 id 重复，那么以第一个为准
getElementsByTagName() 根据标签名获取 dom 对象数组
getElementsByClassName() 根据样式名获取 dom 对象数组
getElementsByName() 根据 name 属性值获取 dom 对象数组，常用于多选获取值
javascript:void(0); 伪协议，表示a标签不执行href属性的跳转行为，而去执行点击事件
javascript:函数名(); 不执行跳转，执行函数
创建节点
方法 描述
createElement() 创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
createTextNode() 创建一个文本节点，可以传入文本内容
innerHTML 也能达到创建节点的效果，直接添加到指定位置了

	插入节点
		方法 						描述
		write() 						将任意的字符串插入到文档中
										document.write()在加载文档时使用，会和当前文档使用同一个document对象，所以写入的内容会显示在原来的内容之后；
										document.write()在加载文档之后使用（点击按钮触发事件使用），此时document是一个新的对象，会将原来的document对象覆盖，所以原来页面中的内容也会被覆盖。不要在使用document.write()方法之后去获取元素节点
		appendChild() 			向元素中添加新的子节点，作为最后一个子节点
		insertBefore() 				向指定的已有的节点之前插入新的节点
											newItem：要插入的节点
											exsitingItem：参考节点 
											需要参考父节点
											

												    /**
												    		 	insertBefore() 			向指定的已有的节点之前插入新的节点
												    									newItem：要插入的节点
												    									exsitingItem：参考节点 
												    									需要参考父节点
												    		 */
												    		// div.parentElement : div的父元素
												    		var div = document.createElement("div");
												    		div.innerHTML = "我是放在你前面的元素...";
												    		console.log(mydiv.parentElement);
												    		console.log(mydiv.parentNode);
												    		mydiv.parentElement.insertBefore(div,mydiv);

间接查找节点
方法|属性 描述
childNodes () 返回元素的一个子节点的数组 （包括文本节点）（集合）
firstChild() 返回元素的第一个子节点
lastChild() 返回元素的最后一个子节点
nextSibling 返回元素的下一个兄弟节点
parentNode 返回元素的父节点
previousSibling 返回元素的上一个兄弟节点

											    // 得到div对象
											    		var div1 = document.getElementById("div1");
											    		
											    		// childNodes () 		返回元素的一个子节点的数组
											    		console.log(div1.childNodes);
											    		
											    		// firstChild() 		返回元素的第一个子节点
											    		console.log(div1.firstChild);
											    		// lastChild() 		返回元素的最后一个子节点
											    		console.log(div1.lastChild);
											    		// parentNode 			返回元素的父节点
											    		console.log(div1.parentNode);
											    		
											    		// nextSibling 		返回元素的下一个兄弟节点
											    		console.log(div1.nextElementSibling); // 下一个元素节点（元素）
											    		console.log(div1.nextSibling); // 下一个节点（包含文本节点）
											    		
											    		//	previousSibling 	返回元素的上一个兄弟节点
											    		console.log(div1.previousElementSibling); // 上一个元素节点（元素）
											    		console.log(div1.previousSibling); // 上一个节点（包含文本节点）

替换节点
方法|属性 描述
replaceChild(newNode,oldNode) 用新的节点替换旧的节点
oldNode.parentNode.replaceChild(newNode,oldNode) 首先通过旧节点定位到父节点，然后用新的节点替换旧节点
克隆节点
方法|属性 描述
cloneNode() 复制节点
var 复制好的节点 = 被复制的节点.cloneNode([true/false]);
true：深度克隆，可以克隆结构和内容
false(默认值)：只克隆结构

						    /**
						    		 * 替换元素
						    		 */
						    		function replaceNode() {
						    			// oldNode.parentNode.replaceChild(newNode,oldNode) 
						    			// 首先通过旧节点定位到父节点，然后用新的节点替换旧节点
						    			var cxy = document.getElementById("test");
						    			// 创建新节点
						    			var span = document.createElement("span");
						    			span.innerHTML = "工程师";
						    			cxy.parentNode.replaceChild(span,cxy);
						    		}
						    		
						    		/**
						    		 * cloneNode() 		复制节点
						    				var 复制好的节点 = 被复制的节点.cloneNode([true/false]);
						    				true：深度克隆，可以克隆结构和内容
						    				false(默认值)：只克隆结构
						    		 */
						    		function cloneValue() {
						    			// 得到被克隆的对象
						    			var cloneValue = document.getElementById("music");
						    			var newValue = cloneValue.cloneNode(false); // 浅度克隆，只克隆结构
						    			console.log(newValue);
						    			var deepValue = cloneValue.cloneNode(true); // 克隆结构及内容
						    			console.log(deepValue);
						    			
						    			// 将克隆好的结果追加到div中
						    			document.getElementById("mydiv").appendChild(deepValue);
						    		}

删除节点
方法|属性 描述
removeChild() 从元素中移除子节点
从父元素中删除节点，获取要删除对象的父元素，然后从父元素中删除该对象

								    function removeNode() {
								    			// 得到被删除的节点的对象
								    			var del = document.getElementById("test");
								    			// 从父元素中删除节点，获取要删除对象的父元素，然后从父元素中删除该对象
								    			del.parentNode.removeChild(del);
								    		}