JavaScript學習（一）
1. 節點及其類型:
1). 元素節點
2). 屬性節點: 元素的屬性, 可以直接通過屬性的方式來操作.
3). 文本節點: 是元素節點的子節點, 其內容為文本.
2. 在 html 文檔的什麽位置編寫 js 代碼?
0). 直接在 html 頁面中書寫代碼.
<button id="button" onclick="alert(‘hello world‘);">Click Me!</button>
缺點:
①. js 和 html 強耦合, 不利用代碼的維護
②. 若 click 相應函數是比較復雜的, 則需要先定義一個函數, 然後再在 onclick 屬性中完成對函數的引用, 比較麻煩
1). 一般地, 不能在 body 節點之前來直接獲取 body 內的節點, 因為此時 html 文檔樹還沒有加載完成,
獲取不到指定的節點:
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> var cityNode = document.getElementById("city"); //打印結果為 null.alert(cityNode); </script> </head> <body> ......
2). 可以在整個 html 文檔的最後編寫類似代碼, 但這不符合習慣
3). 一般地, 在 body 節點之前編寫 js 代碼, 但需要利用 window.onload 事件,
該事件在當前文檔完全加載之後被觸發, 所以其中的代碼可以獲取到當前文檔的任何節點.
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> window.onload= function(){ var cityNode = document.getElementById("city"); alert(cityNode); }; </script> </head> <body> ......
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). 若元素節點只有文本節點一個子節點,
例如 <li id="bj" name="BeiJing">北京</li>, <p>你喜歡哪個城市?</p>,
可以先獲取到指定的元素節點 eleNode,
然後利用 eleNode.firstChild.nodeValue 的方法來讀寫其文本節點的值
7. 節點的屬性:
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 等
JavaScript學習（一）