JavaScript:DOM編程1

JavaScript:DOM編程1


JavaScript:DOM編程
1.節點及其類型
1)元素節點
2)屬性節點：元素的屬性，通常情況下, 操作屬性節點直接通過 "元素節點.屬性名稱" 的方式來讀寫屬性值
3)文本節點：是元素的子節點，其內容為文本
例

donot forget me

element node : p
attribute node : title="name"
text node :donot forget me

2.js在html中的位置
在中，寫在window.onload = function(){ // js代碼 };
window.onload事件，在文檔載入完成後執行，故在這裡可以獲得任何元素。

3.如何擷取元素節點
Element getElementById(String elementId):根據id屬性擷取對應的單個節點
NodeList getElementByTagName(String tagName):根據標籤名擷取指定節點的集合
NodeList getElementByName(String elementName):根據節點的name屬性擷取節點的集合
但IE的實現方式和W3C標準有差別：在html文檔中，若某個節點(例如li)沒有name屬性，則IE使用getElementByName()不能擷取到節點，但是Firefox可以

4.擷取屬性節點
1)**可以通過Node.id(節點.屬性)的方式來擷取和設定屬性節點的值
2）通過元素節點getAttributeNode(name)方法來擷取屬性節點，然後再通過nodeValue來讀寫屬性值

5.擷取元素節點的子節點(**只有元素節點才有子節點!!)
1)childNodes屬性擷取全部的子節點，但方法不實用。因為如果要擷取指定的節點的指定子節點的結合，可以直接調用元素節點的getElementByTagName()方法來擷取
2)firstChild屬性擷取第一個子節點
3)lastChild屬性最後一個子節點
4)parentNode屬性擷取父節點

6.擷取文本節點：
1)步驟：元素節點-->擷取元素節點的子節點
2)若元素節點只有一個文本節點一個子節點
例如

北京

可以先擷取到指定的元素節點eleNode，然後利用eleNode.forstChild.nodeValue的方法來讀寫其文本節點的值

7.節點屬性(nodeType、nodeName、nodeValue)
nodeType、nodeName、nodeValue是每個Node都有的屬性，像id、name是具體某個節點所具有的屬性
1)nodeName：代表當前節點的名字，唯讀屬性。**如果給定節點是一個文本節點，nodeName是#text
2)nodeType:返回一個整數，這個數值代表給定節點是類型。唯讀屬性。1--元素節點，2--屬性節點，3--文本節點
**3)nodeValue：返回給定節點的當前值(字串)。可讀寫屬性
①元素節點，返回值是null
②屬性節點，返回值是這個屬性的值
③文本節點，返回值是這個文本節點的內容
8.建立一個元素節點
1).createElement(String elementName):按照給定的標籤名建立一個新的元素節點。
方法只有一個參數：被建立的元素節點的名字，是一個字串。
方法的返回值：是一個指向建立節點的引用指標，返回值是一個元素節點，所以它的nodeType屬性值等於1
**新元素節點不會自動添加到文檔裡，它只是一個存在於JavaScript內容相關的對象
9.建立一個文本節點
1).createTextNode(String textValue):建立一耳光包含著給定文本的新文本節點，返回值是一個指向新文本節點的引用指標
方法只有一個參數：建立文本節點鎖包含的文本字串，新元素節點不會自動添加到文檔整裡。
10.為元素節點添加子節點
1)appendChild(Node node)
var reference = element.appendChild(newChild);
給定子節點newChild將成為給定元素節點element的最後一個子節點
方法的返回值是一個指向新增子節點的引用指標
11.節點的替換
1).replaceChild()：把一個給定父元素裡的一個子節點替換為另外一個子節點
var reference = element.replaceChild(newChild,lodChild)
返回值是一個指向已被替換的那個子節點的引用指標
2).該節點除了替換功能以外還有移動的功能
3).該方法只能完成單向替換，若需要使用雙向替換，需要自訂函數
12.刪除節點
1).removeChild()：從一個指定元素裡刪除一個子節點
var reference = element.removeChild(node)
返回值是一個指向已被刪除的子節點的引用指標，某個節點被removeChild()方法刪除時，這個節點所包含的所有子節點將同時被刪除
如果刪除某個節點，但不知道其父節點，可以通過parentNode屬性擷取
13.插入節點
1).insertBefore()：把一個給定節點插入到一個給定元素節點的給定子節點的前面
var reference = element.insertBefore(newNode,targetNode)
節點newNode將被插入到元素節點element中並出現在targetNode的前面
節點targetNode必須是element元素的一個子節點
14.innerHTML 屬性
1).瀏覽器幾乎都支援該屬性，但不是DOM標準的組成部分
innerHTML 屬性可以用來讀寫某個給定元素裡的HTML內容
15.其他屬性
parentNode屬性：擷取給定元素的父節點
nextSibling屬性：擷取給定元素的上一個元素
previousSibling屬性：擷取給定元素的下一個元素