JavaScript入門（四）：JS的DOM操作

JS的DOM操作
- DOM簡介
DOM，全稱 Document Object Model 文檔對象模型
- 文檔
文檔表示的就是整個的HTML網頁文檔
- 對象
對象表示將網頁中的每一個部分都轉換爲了一個對象
- 模型
使用模型來表示對象之間的關係，這樣方便我們獲取對象
- 節點 Node
節點是構成我們網頁的最基本的組成部分，網頁中的每一個部分都可以稱爲是一個節點
節點對象的類型：
-. 文檔節點：整個HTML文檔
-. 元素節點：HTML文檔中的HTML標籤
-. 屬性節點：HTML標籤的屬性
-. 文本節點：HTML標籤中的文本內容
節點的屬性
-. nodeName
-. nodeType
-. nodeValue
- 事件 event
事件，指的是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。JavaScript 與 HTML 之間的交互就是通過事件實現的
- 綁定事件的響應函數：
1. 在元素的標籤內部的指定的事件屬性中，設置JS代碼
我是一個按鈕
2. 通過爲元素的指定事件屬性設置響應函數來處理事件
點我一下

var btn = document.getElementById("btn");
btn.onclick = function() {
....
};

- 文檔的加載
瀏覽器在加載一個網頁時，是從上至下一行一行加載的
因此如果我們將JS代碼寫在頁面的上邊，在JS代碼執行時，頁面還沒有加載完畢將會導致我們無法正常獲取到DOM對象
- 爲了解決這個問題，我們有兩種方式：
1. 將JS代碼編寫在body的結束標籤之前
2. 將JS代碼編寫到window.onload = function(){}中，window的onload事件在頁面加載完成之後纔會觸發
- DOM的查詢方法
- 通過document調用
1. 根據元素的id屬性值查找一個元素節點對象
document.getElementById(“id屬性值”);
2. 根據標籤名查找一組元素節點對象
document.getElementsByTagName(“標籤名”);
3. 根據元素的name屬性值查找一組元素節點對象
document.getElementsByName(“標籤的name屬性值”);
- 通過具體的元素節點調用
- 元素.getElementsByTagName(“標籤名”);
- 根據標籤名查找當前元素的後代元素
- 元素.childNodes
- 獲取當前元素的所有的子節點
- 元素.children
- 獲取當前元素的所有的子元素節點
- 元素.firstChild
- 獲取當前元素的第一個子節點
- 元素.lastChild
- 獲取當前元素的最後一個子節點
- 元素.parentNode
- 獲取當前元素的父元素節點
- 元素.previousSibling
- 獲取當前元素的前一個兄弟節點
- 元素.nextSibling
- 獲取當前元素的後一個兄弟節點
- 讀取&修改元素中的屬性
- 讀取的語法：元素.屬性名
- 修改的語法：元素.屬性名 = 屬性值
- innnerHTML 和 innerText
- innerHTML 可以讀取或設置元素內部的HTML代碼
- innerText 可以讀取或設置元素內部的文本內容
- 讀取元素內部的文本內容：
1. 元素.innerHTML
2. 元素.innerText
3. 元素.firstChild.nodeValue
- 其他的DOM查詢方法
- document.documentElement
- 獲取頁面的根元素（html元素）
- document.body
- 獲取body元素
- document.getElementsByTagName(“body”)[0]
- document.all
- 獲取頁面中的所有元素
- document.getElementsByTagName(“*”)
- document.getElementsByClassName(“元素的class屬性值”)
- 根據元素的class屬性查詢一組元素節點對象
- 不兼容IE8及以下的瀏覽器
- document.querySelector()
- 根據CSS選擇器查詢頁面中的一個對象
- document.querySelectorAll()
- 根據CSS選擇器查詢頁面中的一組對象
- 這兩個方法使用方式一樣，都是需要一個選擇器的字符串作爲參數，將會根據該選擇器去頁面中查詢元素。
querySelector()只會找到第一個符合條件的元素，它的返回值是一個元素
querySelectorAll()會找到所有符合條件的元素，它的返回值是一個數組，即使只有一個符和條件它也會返回一個數組
- DOM的修改方法
- 通過document創建節點對象
- 創建一個元素節點
- document.createElement(“標籤名”)
- 創建一個文本節點
- document.createTextNode(“文本內容”)
- 通過父節點添加、替換和刪除子節點
- 添加子節點
- 父節點.appendChild(子節點)
- 將新的子節點插入到指定子節點的前邊
- 父節點.insertBefore(前節點, 後節點)
- 使用新節點替換已有節點
- 父節點.replaceChild(新節點, 舊節點)
- 刪除子節點
- 父節點.removeChild(子節點)
- 子節點.parentNode.removeChild(子節點)
- 樣式的操作
- 操作內聯樣式【可讀可寫】
- 讀取內聯樣式
- 語法：元素.style.樣式名
- 修改內聯樣式
- 語法: 元素.style.樣式名 = “樣式值”
注意：樣式名就是CSS中的樣式名，但是如果樣式名帶有-，則需要將樣式名修改爲駝峯命名法，
　　　即將“-”去掉，“-”後的字母改大寫。
　　　例如：background-color –> backgroundColor
- 讀取元素當前的樣式【只讀】
- 正常的瀏覽器
/**
* 注意：該函數爲window的方法，並且它的返回值是一個Object類型
*/
getComputedStyle(元素, 僞類) //一般情況下，第二個
- IE8及以下
元素.currentStyle
- 這兩個都不能兼容所有的瀏覽器，所以我們可以自定義一個函數來處理兼容問題
例如：
function getStyle(obj , name) {
if(window.getComputedStyle) {
return getComputedStyle(obj,null)[name];
} else {
return obj.currentStyle[name];
}
}
- 異常處理（try…catch…finally）
語法：
try {
//可能出現異常的語句
} catch(e) {
//出現異常以後執行的語句
} finally {
//一定會執行的語句
}
- 其他樣式相關的屬性
clientHeight
clientWidth
- 獲取元素的可見高度和寬度
- 包括元素的內容區和內邊距
offsetHeight
offsetWidth
- 獲取元素的可見框的高度和寬度
- 包括元素的內容區、內邊距和邊框
offsetParent
- 獲取當前元素的定位父元素
- 離當前元素最近的開啓了定位的祖先元素，如果都沒有開啓則返回body
offsetTop
offsetLeft
- 當前元素和定位父元素的偏移量
scrollHeight
scrollWidth
- 當前元素的滾動高度和寬度
scrollTop
scrollLeft
- 滾動條滾動的距離
- 判斷滾動條是否滾動到底：
1.垂直滾動條
scrollHeight - scrollTop = clientHeight
2.水平滾動條
scrollWidth - scrollLeft = clientWidth
- 事件
- 事件對象
- 事件的響應函數在被調用時，每次都會有一個實參被傳遞進函數，這個實參就是事件的對象，在事件的對象中封裝了當前事件的相關信息
比如：鼠標的座標，鼠標的按鍵，鍵盤的按鍵，目標元素。。。
- 獲取事件對象的相關信息
1. 我們可以在事件的響應函數中定義一個形參對事件對象進行引用
2. 但是在IE8中並沒有將事件對象作爲實參傳遞，而是作爲window對象的屬性保存
- 例子：
button.onclick = function(event) {
event = event || window.event
};
- 事件的冒泡【&捕獲】
- 事件的冒泡指的是事件的向上傳播，當元素上的事件被觸發時，其祖先元素上的相同事件也會被觸發。
- 取消冒泡
通過事件對象的cancelBubble屬性設置爲true，即可取消冒泡
- 捕獲&冒泡
1. 事件的捕獲階段
從祖先元素向目標元素進行事件的捕獲，但是此時不會觸發事件
2. 目標階段
目標元素捕獲到這一事件
3. 事件的冒泡階段
從目標事件向祖先元素進行事件的冒泡，並且在此階段觸發事件
- 事件的綁定
- addEventListener()
通過該方法也可以爲一個元素綁定響應函數，而且它可以同時爲一個元素的同一個事件綁定多個響應函數
- 參數：
1. 事件類型的字符串 eventStr（不要 on）
2. 事件的回調函數 callback
3. 是否在捕獲階段觸發事件，一般情況下，我們傳入false
- 需要注意：該函數不支持IE8及以下的瀏覽器
- attachEvent()
- 作用和上述方法一致，兼容IE瀏覽器
- 參數：
1. 事件類型的字符串（要 on）
2. 事件的回調函數