 |
VOOZH | about |
|
VOOZH | about |
接下來正式進入DOM的學習
第三章 DOM
D代表document（文檔），O代表object（對象），M代表model（模型），簡單的說DOM把一份文檔表示成一顆「樹」（數學上的概念）.
節點(node),它表示一個網絡的連接點。一個網絡就是由一些節點構成的集合。DOM也是同樣的情況，文檔是由節點構成的集合.
1.元素節點(element node)
<html>、<head>、<body>、<p>、<ul>等標籤的名字就是元素的名字，比如文本段落元素名字是「p」
2.文本節點(text node) 一般文本節點包含在元素節點裡面
3.屬性節點(attribute node) 屬性節點也包含在元素節點裡，比如最常見的class,id
每個節點都是一個對象
獲取元素的方法
1.document.getElementById
2.document.getElementsByTagName
3.document.getElementsByClassName
第一種方法比較簡單，第二種方法需要注意的是得到的結果是一個數組，第三個方法比較新，舊的瀏覽器版本沒有支持，但可以用原有的方法實現，代碼如下
tips:indexOf方法可返回某個指定的字符串值在字符串中首次出現的位置。沒有則為-1。
獲取和設置屬性（兩者只能作用於元素節點）
1.getAttribute使用方法：object.getAttribute(attribute)
2.setAttribute使用方法：object.setAttribute(attribute,value)
第四章 案例研究：javascript圖片庫
1.setAttribute可以用其他方法代替，直接設置：element.value = "the new value"，相當於element.setAttribute("value","the new value")
2.childNodes屬性
在一顆節點樹上，childNodes屬性可以用來獲取任何一個元素的所有子元素，它是一個包含這個元素全部子元素的數組.
由childNodes屬性返回元素所有類型的節點，不僅僅是元素節點。幾乎每一種東西都會成為一個節點，甚至空格和換行都會被解釋為節點。
3.nodetype屬性
可以用node.nodeType獲取節點的nodeType屬性
元素節點的nodetype屬性值是1，屬性節點的nodetype屬性值是2，文本節點的nodetype屬性值是3,注釋節點的nodetype屬性值是8,文檔節點的nodetype屬性值是9
4.nodevalue屬性
如果想改變一個文本節點的值，用nodeValue屬性，方法node.nodeValue
5.firstChild和lastChild屬性
分別對應childNodes[0]和childNodes[childNodes.length-1]
第5章 最佳實踐
主要講了寫JS代碼的幾個需要重點注意的東西：
平穩退化、漸進增強、向後兼容、提高性能。
仔細閱讀，在平常做項目時運用。