12 - 文件物件模型（DOM）
12 - 文件物件模型（DOM）
DOM（Document Object Model），是瀏覽器提供給JavaScript操控HTML網頁的介面，可以理解為是HTML文件的JavaScript形態
根據DOM會將HTML轉換成一系列的節點，呈樹狀結構（DOM Tree），我們能夠通過DOM提供的各種API來實現對HTML文件的，增，刪，查，改等各種操作
12.01 - DOM 的結構
DOM 樹結構圖
節點（Node）
節點是DOM 中最基本的單位，像一顆樹中的每根樹枝。通過節點與節點之間的關係可以分為：
- 父節點 2. 子節點 3. 兄弟節點
而 document 物件中包含了所有的節點代表了整個DOM樹的最上層，其下只有一個根節點（rootnode）和一個文件型別節點<!doctype html>（DocumentType）
-
節點的型別
節點的類別可以通過 node.nodeType 屬性得知其返回值對應如下的節點
- 元素節點（element）：1
- 屬性節點（attr）：2
- 文字節點（text）：3
- 註釋節點（Comment）：8
- 文件節點（document）：9
- 文件型別節點（DocumentType）：10
12.02 - DOM相關
文件結構的載入順序
解析HTML結構 ==> 載入外部的樣式和指令碼檔案 ==> 解析並執行指令碼程式碼 ==> 構鍵HTML DOM模型（觸發DOMContentLoaded事件） ==> 載入圖片等外部檔案 ==> 介面載入完畢（觸發load事件）
12.03 - Node的屬性與方法
所有的節點都有一些屬性和方法有的是共同有的是單獨的，我們可以通過這些屬性和方法進行對DOM的一系列操作
屬性
- nodeType：節點的型別，返回一個整數
- nodeName：節點的名稱
- 文件節點（document）：
#document - 元素節點（element）：大寫的標籤名
- 屬性節點（attr）：屬性的名稱
- 文字節點（text）：
#text - 文件型別節點（DocumentType）：文件的型別
- 註釋節點（Comment）：
#comment
- 文件節點（document）：
- parentNode：返回元素的父節點
通過這種方式返回的父節點，肯能是
元素節點，文件節點
- parentElement：返回元素文件節點父節點
方法
- appendChild(node)：將node作為其最後一個子節點插入
- cloneNode([boolean])：克隆節點
布林值引數代表是否需要同時克隆子節點
但是會失去所有繫結的事件
- insertBefore(newNode, referenceNode)：在referenceNode節點前插入newNode
referenceNode必須是父節點中的子節點
referenceNode如果為null則插入的元素的最後 但是不能省略元素
<div id="box">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<p id="addElement">new</p>
<script>
box.insertBefore(addElement,box.firstChild);// 新增到最前面
</script>- removeChild(childNode)：移除子節點，並且返回被移除的節點
此方法需要在父級節點上呼叫然後找到自己再進行刪除
<div id="box">
<p>1</p>
<p>2</p>
<p id="rmChild">3</p>
<p>4</p>
</div>
<script>
rmChild.parentNode.removeChild(rmChild);// 移除第三個p標籤
</script>- replaceChild(newNode, oldChild)：將oldChild替換為newNode，返回oldChild
oldChild 必須是元素的子節點
<div id="box">
<p>1</p>
<p>2</p>
<p id="rmChild">3</p>
<p>4</p>
</div>
<p id="addElement">new</p>
<script>
box.replaceChild(addElement,rmChild);// 將box 裡面的第三個p標籤替換為 addElement
</script>- contains(node)：檢測node是否為元素的後代節點，返回一個布林值
12.04 - 元素節點的屬性與方法
屬性
- children：獲取元素的所有元素子節點，類似與css的 > 選擇器
- firstElementChild / lastElementChild：返回元素的（第一個 / 最後一個）
- nextElementSibling / previousElementSibling：距離最近的前後同級元素節點
- childElementCount：返回擁有的子節點數
- tagName：元素的標籤名
- innerHTML：元素包含的HTML內容
- outerHTML：元素自身以及包含的HTML內容
- offsetParent：獲取元素的定位父級節點
方法
- append(node[, node ...]) / prepend(node[, node ...])：往前 / 後，新增一個或者多個
子節點 - before(node[, node ...]) / after(node[, node ...])：往前 / 後，新增一個或者多個
兄弟節點 - remove()：從dom中刪除自己
- replaceWith(child)：替換當前節點
寬高位置相關屬性
- clientWidth / clientHeight：元素自身的
可視寬度 / 高度 （content+padding）
寬度不包括滾動條的寬度，不計算超出內容的寬度
- offsetWidth / offsetHeight：元素自身的
總寬度 / 高度 （content+padding+border）
寬度包括滾動條的寬度，不計算超出內容的寬度，同時需要獲取整個網頁的高度，需要從 document.documentElement （HTML物件）上獲取
- scrollWidth / scrollHeight：元素以及超出內容的
總寬度 / 高度（content+padding）
寬度包括滾動條的寬度，計算超出內容的寬度
- scrollTop / scrollLeft：元素垂直 / 水平 滾動條滾動的距離
一般結合 scroll 事件使用，同時需要獲取整個網頁的滾動高度，需要從 document.documentElement （HTML物件）上獲取
- offsetLeft / offsetTop：獲取元素相對與定位父級的水平 / 垂直 距離
// 獲取元素相對整個網頁的位置
function getElePosition(ele){
var x,y,p;
do{
x = ele.offsetLeft,y = ele.offsetTop;
p = ele.offsetParent;
}while(p !== null);
return {x:x,y:y};
}- Element.getBoundingClientRect()：方法返回元素的大小及其相對於視口的位置。
12.05 - document物件
document 物件為整個文件的最上層的物件，DOM中所有的節點都是document物件的子節點，並且包含了許多與DOM相關的方法與屬性
屬性
- doctype：返回文件的文件申明
- documentElement：返回根元素( HTML )
- baseURI：當前網頁的絕對路徑
方法
- createElement(nodeName)：建立一個元素節點，引數為標籤名
var newDiv = document.createElement('div');
newDiv.innerHTML = 'hello DOM!';
document.body.append(newDiv);- createTextNode(text)：建立一個文字節點，引數為需要建立的文字的字串
此方法與innerHTML新增的區別在於，不會影響到原有節點的屬性或者方法的繫結，而innerHTML相當於重新添加了所有元素，將會失去事件的繫結
- write()