一：Node類型DOM1級定義了一個Node接口，該接口是由DOM中的所有節點類型實現。每個節點都有一個nodeType屬性，用于表明節點的類型，節點類型在Node類型中有以下幾種：Node.ELEMENT_NODE(1);元素節點Node.ATTRIBUTE_NODE(2);屬性節點Node.TEXT_NODE(3);文本節點Node.DOCUMENT_NODE(9);文檔節點其實還有很多種，但是那些都不是很常用，所以就來理解這其中4種就可以了，我們先來看看節點類型，比如如下代碼：HTML代碼如下：

JS代碼如下：var list = document.getElementById("list");var arrs = [];for(var i = 0, ilen = list.childNodes.length; i < ilen; i++) {var curElement = list.childNodes[i];if(curElement.nodeType === 1){arrs.push(curElement);}}console.log(arrs); console.log(arrs.length); // 3如上代碼在所有的瀏覽器都支持，通過判斷該元素是不是元素節點，然后在執行后續操作；不是元素節點都會過濾掉，因此返回的長度都為3；理解Text類型Text節點具有以下特征：nodeType的值為3；nodeName的值為”#text”;nodeValue的值為節點所包含的文本；parentNode是一個Element；沒有子節點；創建文本節點；可以使用document.createTextNode()創建新文本節點，這個方法需要一個參數，即要插入的文本，如下代碼：var element = document.createElement("div");var text = document.createTextNode("aa");element.appendChild(text); document.body.appendChild(element);2. 分割文本節點splitText(offset);從offset指定的位置將當前的文本節點分成2個文本節點；如下代碼：var element = document.createElement("div");var text = document.createTextNode("aabbbccc");element.appendChild(text);document.body.appendChild(element);var newNode = element.firstChild.splitText(5);console.log(element.firstChild.nodeValue); // aabbbconsole.log(newNode.nodeValue); // ccc console.log(element.childNodes.length); // 2瀏覽器支持的程度有IE，firefox,chrome都支持；理解DOM操作—動態插入腳本我們動態插入JS腳本，常見的寫法有如下代碼即可插入：var script = document.createElement("script");script.type ="text/javascript";script.src = 'a.js';document.body.appendChild(script);即可在body最后面動態插如a.js，此動態插入不會堵塞瀏覽器加載；我們為了更加擴張性，我們也可以封裝一個函數，如下代碼：function loadScript(url) {var script = document.createElement("script");script.type = "text/javascript";script.src = url;document.body.appendChild(script);}loadScript("a.js");當頁面有多個js需要動態插入的話，可以依次調用loadScript函數即可；但是假如我們現在有這么一個需求，動態加載JS完后，我想在這后面做點事情，我們都知道，動態加載也可以理解為異步加載，不會堵塞瀏覽器，但是我們需要如何知道動態JS已經加載完了呢？我們之前講過一篇文章是 “Javascript事件總結”中有判斷JS動態加載完后使用load事件來監聽js是否動態加載完，現在我們再來復習下load事件；Javascript中最常用的一個事件是load，當頁面加載完后(包括所有的圖片，javascript文件，css文件等外部資源)。就會觸發window上面的load事件；目前可以有2種觸發load事件，一種是直接放在body上面觸發；比如如下代碼：第二種是通過JS來觸發，如下代碼：EventUtil.addHandler(window,’load’,function(event){alert(1);});上面的EventUtil.addHandler 是我們之前在javascript事件總結中封裝的JS函數，現在我們直接拿過來使用，如下代碼：var EventUtil = {addHandler: function(element,type,handler) {if(element.addEventListener) {element.addEventListener(type,handler,false);}else if(element.attachEvent) {element.attachEvent("on"+type,handler);}else {element["on" +type] = handler;}},removeHandler: function(element,type,handler){if(element.removeEventListener) {element.removeEventListener(type,handler,false);}else if(element.detachEvent) {element.detachEvent("on"+type,handler);}else {element["on" +type] = null;}},getEvent: function(event) {return event ? event : window.event;},getTarget: function(event) {return event.target || event.srcElement;},preventDefault: function(event){if(event.preventDefault) {event.preventDefault();}else {event.returnValue = false;}},stopPropagation: function(event) {if(event.stopPropagation) {event.stopPropagation();}else {event.cancelBubble = true;}}};下面我們來看看如何使用JS事件來判斷JS是否加載完成的代碼，我們可以使用load事件來監聽，如下代碼：EventUtil.addHandler(window,'load',function(){var script = document.createElement("script");EventUtil.addHandler(script,'load',function(event){console.log(script.src);});script.src = 'a.js';document.body.appendChild(script);});如上代碼，script元素也會觸發load事件，以便可以確定動態加載jS是否加載完成，上面的代碼指定src屬性和指定的事件處理程序的事件可以調換位置，先后順序不重要，如上代碼，我們也可以這樣寫，如下代碼：EventUtil.addHandler(window,'load',function(){var script = document.createElement("script");script.src = 'a.js';document.body.appendChild(script);EventUtil.addHandler(script,'load',function(event){console.log(script.src);}); });目前只有IE9+，Firefox，opera，chrome和safari3+支持，IE8及以下不支持該load事件，因此我們需要針對IE8及以下做處理；理解readystatechange事件IE為DOM文檔中的某些部分提供了readystatechange事件，這個事件的目的提供與文檔或元素的加載的狀態有關信息，此事件提供了下面5個值中的一個；uninitialized（未初始化）：對象存在但尚未初始化；loading(正在加載)：對象正在加載數據；loaded(加載完畢):對象加載數據完成；interactive(交互)：可以操作對象了，但沒有完全加載；complete(完成)：對象已經加載完成；（在IE和opera）中和(僅IE中)元素也會觸發readystatechange事件，可以用來確定外部的javascript和css文件是否已經加載完成，基于元素觸發的readystatechange事件，即readyState屬性無論等于”loaded”還是”complete”都可以表示資源已經可用；如下針對IE的判斷javascript是否已經加載完成的方案：EventUtil.addHandler(window,'load',function(){var script = document.createElement("script");EventUtil.addHandler(script,'readystatechange',function(event){event = EventUtil.getEvent(event);var target = EventUtil.getTarget(event);if (target.readyState == "loaded" || target.readyState == "complete"){EventUtil.removeHandler(target, "readystatechange", arguments. callee);alert(script.src);}});script.src = 'a.js';document.body.appendChild(script); });下面我們可以使用javascript客戶端檢測技術來判斷是否是IE和其他標準瀏覽器做一個簡單的封裝；如下代碼：var ua = navigator.userAgent.toLowerCase();EventUtil.addHandler(window,'load',function(){var script = document.createElement("script");if(/msie ([^;]+)/.test(ua) || "ActiveXObject" in window) {// IE 瀏覽器EventUtil.addHandler(script,'readystatechange',function(event){event = EventUtil.getEvent(event);var target = EventUtil.getTarget(event);if (target.readyState == "loaded" || target.readyState == "complete"){EventUtil.removeHandler(target, "readystatechange", arguments. callee);console.log("javascript已經加載完成");}});}else {// 除IE之外的標準瀏覽器EventUtil.addHandler(script,'load',function(event){console.log("javascript已經加載完成");});}script.src = 'a.js';document.body.appendChild(script);});上面的是針對所有的主要的瀏覽器進行封裝來判斷動態加載的JS是否已經加載完成！理解動態加載行內JS方式另一種加載javascript代碼的方式是行內方式，如下代碼：function sayHi(){alert(1);}從理論來講，下面的代碼應該是有效的；var script = document.createElement('script');script.type = 'text/javascript';script.appendChild(document.createTextNode("function sayHi(){alert(1);} sayHi()"));document.body.appendChild(script);