一：Node類型DOM1級(jí)定義了一個(gè)Node接口打瘪，該接口是由DOM中的所有節(jié)點(diǎn)類型實(shí)現(xiàn)友鼻。每個(gè)節(jié)點(diǎn)都有一個(gè)nodeType屬性，用于表明節(jié)點(diǎn)的類型闺骚，節(jié)點(diǎn)類型在Node類型中有以下幾種：Node.ELEMENT_NODE(1);元素節(jié)點(diǎn)Node.ATTRIBUTE_NODE(2);屬性節(jié)點(diǎn)Node.TEXT_NODE(3);文本節(jié)點(diǎn)Node.DOCUMENT_NODE(9);文檔節(jié)點(diǎn)其實(shí)還有很多種桃移，但是那些都不是很常用，所以就來理解這其中4種就可以了葛碧，我們先來看看節(jié)點(diǎn)類型借杰，比如如下代碼：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如上代碼在所有的瀏覽器都支持，通過判斷該元素是不是元素節(jié)點(diǎn)进泼，然后在執(zhí)行后續(xù)操作蔗衡；不是元素節(jié)點(diǎn)都會(huì)過濾掉纤虽，因此返回的長度都為3；理解Text類型Text節(jié)點(diǎn)具有以下特征：nodeType的值為3绞惦；nodeName的值為”#text”;nodeValue的值為節(jié)點(diǎn)所包含的文本逼纸；parentNode是一個(gè)Element；沒有子節(jié)點(diǎn)济蝉；創(chuàng)建文本節(jié)點(diǎn)杰刽；可以使用document.createTextNode()創(chuàng)建新文本節(jié)點(diǎn)，這個(gè)方法需要一個(gè)參數(shù)王滤，即要插入的文本贺嫂，如下代碼：var element = document.createElement("div");var text = document.createTextNode("aa");element.appendChild(text); document.body.appendChild(element);2. 分割文本節(jié)點(diǎn)splitText(offset);從offset指定的位置將當(dāng)前的文本節(jié)點(diǎn)分成2個(gè)文本節(jié)點(diǎn)；如下代碼：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操作—?jiǎng)討B(tài)插入腳本我們動(dòng)態(tài)插入JS腳本，常見的寫法有如下代碼即可插入：var script = document.createElement("script");script.type ="text/javascript";script.src = 'a.js';document.body.appendChild(script);即可在body最后面動(dòng)態(tài)插如a.js踱稍，此動(dòng)態(tài)插入不會(huì)堵塞瀏覽器加載曲饱；我們?yōu)榱烁訑U(kuò)張性，我們也可以封裝一個(gè)函數(shù)珠月，如下代碼：function loadScript(url) {var script = document.createElement("script");script.type = "text/javascript";script.src = url;document.body.appendChild(script);}loadScript("a.js");當(dāng)頁面有多個(gè)js需要?jiǎng)討B(tài)插入的話扩淀，可以依次調(diào)用loadScript函數(shù)即可；但是假如我們現(xiàn)在有這么一個(gè)需求啤挎，動(dòng)態(tài)加載JS完后驻谆，我想在這后面做點(diǎn)事情，我們都知道侵浸，動(dòng)態(tài)加載也可以理解為異步加載，不會(huì)堵塞瀏覽器氛谜，但是我們需要如何知道動(dòng)態(tài)JS已經(jīng)加載完了呢掏觉？我們之前講過一篇文章是 “Javascript事件總結(jié)”中有判斷JS動(dòng)態(tài)加載完后使用load事件來監(jiān)聽js是否動(dòng)態(tài)加載完，現(xiàn)在我們?cè)賮韽?fù)習(xí)下load事件值漫；Javascript中最常用的一個(gè)事件是load澳腹，當(dāng)頁面加載完后(包括所有的圖片，javascript文件杨何，css文件等外部資源)酱塔。就會(huì)觸發(fā)window上面的load事件；目前可以有2種觸發(fā)load事件危虱，一種是直接放在body上面觸發(fā)羊娃；比如如下代碼：第二種是通過JS來觸發(fā)，如下代碼：EventUtil.addHandler(window,’load’,function(event){alert(1);});上面的EventUtil.addHandler 是我們之前在javascript事件總結(jié)中封裝的JS函數(shù)埃跷，現(xiàn)在我們直接拿過來使用蕊玷，如下代碼：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事件來監(jiān)聽，如下代碼：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元素也會(huì)觸發(fā)load事件延届，以便可以確定動(dòng)態(tài)加載jS是否加載完成，上面的代碼指定src屬性和指定的事件處理程序的事件可以調(diào)換位置贸诚，先后順序不重要方庭，如上代碼，我們也可以這樣寫酱固，如下代碼：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+械念，F(xiàn)irefox，opera媒怯，chrome和safari3+支持订讼，IE8及以下不支持該load事件，因此我們需要針對(duì)IE8及以下做處理扇苞；理解readystatechange事件IE為DOM文檔中的某些部分提供了readystatechange事件欺殿，這個(gè)事件的目的提供與文檔或元素的加載的狀態(tài)有關(guān)信息，此事件提供了下面5個(gè)值中的一個(gè)鳖敷；uninitialized（未初始化）：對(duì)象存在但尚未初始化脖苏；loading(正在加載)：對(duì)象正在加載數(shù)據(jù)；loaded(加載完畢):對(duì)象加載數(shù)據(jù)完成定踱；interactive(交互)：可以操作對(duì)象了棍潘，但沒有完全加載；complete(完成)：對(duì)象已經(jīng)加載完成崖媚；（在IE和opera）中和(僅IE中)元素也會(huì)觸發(fā)readystatechange事件亦歉，可以用來確定外部的javascript和css文件是否已經(jīng)加載完成，基于元素觸發(fā)的readystatechange事件畅哑，即readyState屬性無論等于”loaded”還是”complete”都可以表示資源已經(jīng)可用肴楷；如下針對(duì)IE的判斷javascript是否已經(jīng)加載完成的方案：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客戶端檢測(cè)技術(shù)來判斷是否是IE和其他標(biāo)準(zhǔn)瀏覽器做一個(gè)簡單的封裝；如下代碼：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已經(jīng)加載完成");}});}else {// 除IE之外的標(biāo)準(zhǔn)瀏覽器EventUtil.addHandler(script,'load',function(event){console.log("javascript已經(jīng)加載完成");});}script.src = 'a.js';document.body.appendChild(script);});上面的是針對(duì)所有的主要的瀏覽器進(jìn)行封裝來判斷動(dòng)態(tài)加載的JS是否已經(jīng)加載完成荠呐！理解動(dòng)態(tài)加載行內(nèi)JS方式另一種加載javascript代碼的方式是行內(nèi)方式赛蔫，如下代碼：function sayHi(){alert(1);}從理論來講，下面的代碼應(yīng)該是有效的泥张；var script = document.createElement('script');script.type = 'text/javascript';script.appendChild(document.createTextNode("function sayHi(){alert(1);} sayHi()"));document.body.appendChild(script);
