JavaScript之DOM編程

2014/09/11 來源：紅黑聯盟

1. 節點及其類型:

1). 元素節點

2). 屬性節點: 元素的屬性, 可以直接通過屬性的方式來操作.

3). 文本節點: 是元素節點的子節點, 其內容為文本.

2. 在 html 文檔的什麼位置編寫 js 代碼?

0). 直接在 html 頁面中書寫代碼.

缺點:

①. js 和 html 強耦合, 不利用代碼的維護

②. 若 click 相應函數是比較複雜的, 則需要先定義一個函數, 然後再在 onclick 屬性中完成對函數的引用, 比較麻煩

1). 一般地, 不能在 body 節點之前來直接獲取 body 內的節點, 因為此時 html 文檔樹還沒有加載完成,

獲取不到指定的節點:

<script type="text/javascript"> var cityNode = document.getElementById("city"); //列印結果為 null. alert(cityNode); </script> ......

2). 可以在整個 html 文檔的最後編寫類似代碼, 但這不符合習慣

3). 一般地, 在 body 節點之前編寫 js 代碼, 但需要利用 window.onload 事件,

該事件在當前文檔完全加載之後被觸發, 所以其中的代碼可以獲取到當前文檔的任何節點.

<script type="text/javascript"> window.onload = function{ var cityNode = document.getElementById("city"); alert(cityNode); }; </script> ......3. 如何來獲取元素節點:

1). **document.getElementById: 根據 id 屬性獲取對應的單個節點

2). **document.getElementsByTagName:

根據標籤名獲取指定節點名字的數組, 數組對象 length 屬性可以獲取數組的長度

3). document.getElementsByName:

根據節點的 name 屬性獲取符合條件的節點數組,

但 ie 的實現方式和 W3C 標準有差別:

在 html 文檔中若某節點(li)沒有 name 屬性,

則 ie 使用 getElementsByName 不能獲取到節點數組, 但火狐可以.

4). 其它的兩個方法,ie 根本就不支持, 所以不建議使用

4. 獲取屬性節點:

1). **可以直接通過 cityNode.id 這樣的方式來獲取和設置屬性節點的值

2). 通過元素節點的 getAttributeNode 方法來獲取屬性節點,

然後在通過 nodeValue 來讀寫屬性值

5. 獲取元素節點的子節點(**只有元素節點才有子節點!!):

1). childNodes 屬性獲取全部的子節點, 但該方法不實用. 因為如果要獲取指定的節點

的指定子節點的集合, 可以直接調用元素節點的 getElementsByTagName 方法來獲取.

2). firstChild 屬性獲取第一個子節點

3). lastChild 屬性獲取最後一個子節點

6. 獲取文本節點:

1). 步驟: 元素節點 --> 獲取元素節點的子節點

2). 若元素節點只有文本節點一個子節點,

例如

可以先獲取到指定的元素節點 eleNode,

然後利用 eleNode.firstChild.nodeValue 的方法來讀寫其文本節點的值

1). nodeName: 代表當前節點的名字. 只讀屬性.

如果給定節點是一個文本節點, nodeName 屬性將返回內容為 #text 的字符串

2). nodeType：返回一個整數, 這個數值代表著給定節點的類型.

只讀屬性. 1 -- 元素節點, 2 -- 屬性節點, 3 -- 文本節點

3). nodeValue：返回給定節點的當前值(字符串). 可讀寫的屬性

①. 元素節點, 返回值是 null.

②. 屬性節點: 返回值是這個屬性的值

③. 文本節點: 返回值是這個文本節點的內容

8. 創建一個元素節點:

1). createElement: 按照給定的標籤名創建一個新的元素節點. 方法只有一個參數：被創建的元素節點的名字, 是一個字符串.

方法的返回值：是一個指向新建節點的引用指針. 返回值是一個元素節點, 所以它的 nodeType 屬性值等於 1.

**新元素節點不會自動添加到文檔里, 它只是一個存在於 JavaScript 上下文的對象.

9. 創建一個文本節點:

1). createTextNode: 創建一個包含著給定文本的新文本節點. 這個方法的返回值是一個指向新建文本節點引用指針. 它是一個文本節點, 所以它的 nodeType 屬性等於 3. 方法只有一個參數：新建文本節點所包含的文本字符串. 新元素節點不會自動添加到文檔里

10. 為元素節點添加子節點:

1). appendChild: var reference = element.appendChild(newChild): 給定子節點 newChild 將成為給定元素節點 element 的最後一個子節點.方法的返回值是一個指向新增子節點的引用指針.

11. 節點的替換:

1). replaceChild: 把一個給定父元素里的一個子節點替換為另外一個子節點

var reference = element.replaceChild(newChild,oldChild);

返回值是一個指向已被替換的那個子節點的引用指針

2). 該節點除了替換功能以外還有移動的功能.

3). 該方法只能完成單向替換, 若需要使用雙向替換, 需要自定義函數:

/** * 互換 aNode 和 bNode * @param {Object} aNode * @param {Object} bNode */ function replaceEach(aNode, bNode){ if(aNode == bNode){ return; } var aParentNode = aNode.parentNode; //若 aNode 有父節點 if(aParentNode){ var bParentNode = bNode.parentNode; //若 bNode 有父節點 if(bParentNode){ var tempNode = aNode.cloneNode(true); bParentNode.replaceChild(tempNode, bNode); aParentNode.replaceChild(bNode, aNode); } } }12. 插入節點:

1). insertBefore: 把一個給定節點插入到一個給定元素節點的給定子節點的前面

var reference = element.insertBefore(newNode,targetNode);

節點 newNode 將被插入到元素節點 element 中並出現在節點 targetNode 的前面. 節點 targetNode 必須是 element 元素的一個子節點。

2). 自定義 insertAfter 方法

/** * 將 newChild 插入到 refChild 的後邊 * @param {Object} newChild * @param {Object} refChild */ function insertAfter(newChild, refChild){ var refParentNode = refChild.parentNode; //判斷 refChild 是否存在父節點 if(refParentNode){ //判斷 refChild 節點是否為其父節點的最後一個子節點 if(refChild == refParentNode.lastChild){ refParentNode.appendChild(newChild); }else{ refParentNode.insertBefore(newChild, refChild.nextSibling); } } }13. 刪除節點:

1). removeChild: 從一個給定元素里刪除一個子節點

var reference = element.removeChild(node);

返回值是一個指向已被刪除的子節點的引用指針. 某個節點被 removeChild 方法刪除時, 這個節點所包含的所有子節點將同時被刪除.

如果想刪除某個節點, 但不知道它的父節點是哪一個, parentNode 屬性可以幫忙。

14. innerHTML屬性:

1).瀏覽器幾乎都支持該屬性, 但不是 DOM 標準的組成部分. innerHTML 屬性可以用來讀, 寫某給定元素里的 HTML 內容

15. 其它屬性, 參看 API: nsextSibling, previousSibling 等

免責聲明：本文內容來源于紅黑聯盟，文章觀點不代表壹讀立場，如若侵犯到您的權益，或涉不實謠言，敬請向我們提出檢舉。