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()