javascript程式設計-DOM的應用技巧

DOM屬性：

1、firstChild firstElementChild

1.1、firstChild : 在IE9+和其他标準浏覽器中，div與p之間的空白區域被認為是第一個子節點為空白節點（即文本節點），div顯示數字3

1.2、firstElementChild 可以把空白部厘清空，讀取正确的節點位置值

2、nodeName、nodeValue、nodeType

2.1、在文檔對象模型 (DOM) 中，每個節點都是一個對象。DOM 節點有三個重要的屬性 ：

nodeName : 節點的名稱

nodeValue ：節點的值

nodeType ：節點的類型

一、nodeName 屬性: 節點的名稱，是隻讀的。

1. 元素節點的 nodeName 與标簽名相同

2. 屬性節點的 nodeName 是屬性的名稱

3. 文本節點的 nodeName 永遠是 #text

4. 文檔節點的 nodeName 永遠是 #document

二、nodeValue 屬性：節點的值

1. 元素節點的 nodeValue 是 undefined 或 null

2. 文本節點的 nodeValue 是文本自身

3. 屬性節點的 nodeValue 是屬性的值

三、nodeType 屬性: 節點的類型，是隻讀的。以下常用的幾種結點類型:

元素類型 節點類型

元素 1

屬性 2

文本 3

注釋 8

文檔 9

3、getAttribute()方法 和getAttributeNode() 方法

定義： 通過元素節點的屬性名稱擷取屬性的值。如：title、id、class等值；

3.1、 var text=con[i].getAttribute("title")與var text=con[i].title 有什麼差別嗎？

答：title點操作符和getAttribute擷取到的屬性值沒差別。點操作符 隻能對html裡面本身就有的标簽操作getAttribute能跟點操作符一樣擷取操作，還能對自定義标簽節點操作。比如<div title= "1" abcd="5"></div>這個标簽裡面的title兩個都能擷取操作。而abcd隻能getAttribute擷取操作，點操作符擷取不到。

4、setAttribute()方法

定義：增加一個指定名稱和值的新屬性，或者把一個現有的屬性設定為指定的值 ，elementNode.setAttribute(name,value)

如：var Lists=document.getElementsByTagName("li"); ///标簽名可能有多個，傳回數組；

Lists[i].setAttribute("title","Web前端技術");

注1：在增加屬的“事件響應”時必須用setAttribute方法，直接采用 elementNode.type="XXX"建立事務響應無效；

注2：通過setAttribute建立樣式：

firefox等可以使用

var dom=document.getElementById("name");

dom.setAttribute("style","width:10px;height:10px;border:solid 1px red;") ;

IE中則必須使用style.cssText

dom1.style.cssText = "width:10px;height:10px;border:solid 1px red;";

補充一下，目前style.cssText類似innerHTML了，已經成為一個web開發的事實标準。是以測試顯示firefox浏覽器也支援這種方式。

5、innerHTML和innerText 的應用和差別

innerHTML傳回的是标簽内的 html内容，包含html标簽。

innerText傳回的是标簽内的文本值，不包含html标簽。

6、innerHTML和createTextNode的差別：

都可以把一段内容添加到一個節點中，差別是如果這段内容中有html标簽（如例子中的<strong></strong>）時表現就不同了，在createTextNode中會當作文本處理，不會被浏覽器解析，但用innerHTML就會被當作HTML代碼處理（如你的例子中Hello會被加粗顯示）。

7、innerHTML和createTextNode的差別

var body =document.body;

var pment=document.createElement("p");

pment.className="message";

pment.innerHTML="I Love you!";

body.appendChild(pment);

或 var textNode =document.createTextNode("I Love you!");

pment.appendChild(textNode);

注：createTextNode 需要appendChild配合插入；

而innerHTML 直接指派；

8、視窗與滾動條的位置：

scrollLeft:設定或擷取位于給定對象左邊界與視窗中目前可見内容的最左端之間的距離 ，即左邊灰色的内容。（如：div1橫向滾動條滾動的距離）

scrollTop:設定或擷取位于對象最頂端與視窗中可見内容的最頂端之間的距離 ，即上邊灰色的内容。（如：div1縱向滾動條滾動的距離）

offsetLeft:擷取指定對象相對于版面或由 offsetParent 屬性指定的父坐标的計算左側位置 。（如：div距離螢幕左部的距離） 。

offsetTop:擷取指定對象相對于版面或由 offsetParent 屬性指定的父坐标的計算頂端位置（如：div距離螢幕頂部的距離） 。

9、for裡的XX[i]與this為什麼不能混用：

主要還從執行順序來看：

for循環先執行,為每一個元素對象綁定事件;//每個元素綁定了事件,并未執行

for循環結束後,i的值變為length;//是以this不能替換為trs[i],此時的trs[i]為trs[length],不存在,undefined

觸發事件,執行方法體.//因為此時的元素對象才都綁定了事件,是以可以執行.

注：this若在某個為windows下的函數内時，其實是指向windows而不是當時對象； 如setTimerout，是windows下的函數内時。

10、setTimeout 和 setInterval 定時器的差別：

10.1、setTimeout: 此為逾時調用，即時間到後才調用裡面的函數方法；

格式： XX=setTimeout(function(){},時間毫秒)；

或 setTimeout(function(){});

10.2、setInterval() 方法會不停地調用函數，直到clearInterval()被調用或視窗被關閉；

由setInterval()傳回的ID值，可用作clearInterval()方法的參數；