首頁 > 開發者 > JavaScript
標籤：刪除 簽名 數組 style attribute 功能 htm 節點 font
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 不能擷取到節點數組, 但Firefox可以.
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學習（一）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
