DOM

1 DOM概述

1.1 什麼是DOM

文檔對象模型 Document Object Model

文檔對象模型 是表示和操做 HTML和XML文檔內容的基礎API

文檔對象模型，是W3C組織推薦的處理可擴展標誌語言的標準編程接口

1.3 DOM分類

核心 DOM - 針對任何結構化文檔的標準模型

XML DOM - 針對XML文檔的標準模型

HTML DOM - 針對HTML 文檔的標準模型

1.3 DOM分級

1級dom

1級DOM在1998年10月份成爲W3C的提議，由DOM核心與DOM HTML兩個模塊組成。DOM核心能映射以XML爲基礎的文檔結構，容許獲取和操做文檔的任意部分。DOM HTML經過添加HTML專用的對象與函數對DOM核心進行了擴展。

2級dom

2級DOM經過對象接口增長了對鼠標和用戶界面事件、範圍、遍歷（重複執行DOM文檔）和層疊樣式表（CSS）的支持。

3級dom

3級DOM經過引入統一方式載入和保存文檔和文檔驗證方法對DOM進行進一步擴展，DOM3包含一個名爲「DOM載入與保存」的新模塊，DOM核心擴展後可支持XML1.0的全部內容，包括XML Infoset、 XPath、和XML Base。

1.4 DOM樹

 

2 節點

2.1 什麼是節點

文檔中每個部分都是節點，包過document　元素　屬性　文本...

2.2 節點的分類

Document Element 元素 Attr 屬性

Text 文本

Comment 註釋

2.3 節點屬性

nodeName 節點名字

document :  #document
element : 標籤名
attr : 屬性名
text : #text
comment : #comment

nodeValue 節點值

document : null
element : null
attr : 屬性值
text : 文本內容
comment : 註釋內容

nodeType 節點類型

document : 9
element : 1
attr : 2
text : 3
coment : 8

3 獲取元素對象

經過ID獲取元素

document.getElementById()
id屬性可自動成爲被腳本訪問的全局變量

經過name值獲取元素

document.getElementsByName()
    IE9+和標準瀏覽器認爲 全部的元素都有name
    IE9- 認爲只有個別元素有name
        表單和表單控件
        img iframe  embed object ....

docuemnt會爲某些元素建立以元素name爲名字的屬性
    <form>
    <img>
    .......

經過標籤名獲取元素

document.getElementsByTagName()
element.getElementsByTagName()
document.images    全部img的引用
document.forms    全部表單的引用
document.links    全部超連接的引用
docuent.anchors    全部錨點的引用

經過類名選取元素（IE9+）

document.getElementsByClassName()
element.getElementsByClassName()

經過CSS選擇器選取元素

document.querySelectorAll()
document.querySelector()
element.querySelectorAll()
element.querySelector()

獲取全部的元素

document.all

4 文檔結構和遍歷文檔

4.1 節點關係

父節點 父元素

子節點 子元素

同輩節點 同輩元素

祖先節點 祖先元素

後代節點 後代元素

4.2 做爲節點樹的文檔

parentNode 父節點

childNodes 全部子節點的集合

firstChild 第一個子節點

lastChild 最後一個子節點

nextSibling 下一個兄弟節點

previousSibling 上一個兄弟節點

4.3 做爲元素樹的文檔

parentElement 父元素 大部分狀況下 parentElement 等同於 parentNode

children 全部子元素的集合

firstElementChild IE9+ 第一個子元素

lastElementChild IE9+ 最後一個子元素

nextElementSibling IE9+ 下一個兄弟元素

previousSibling IE9+  上一個兄弟元素

childElementCount IE9+ 子元素的數量

ownerDocument 返回元素所屬的文檔對象

5 屬性

5.1 HTML標籤的屬性和元素對象的屬性

HTMLElement對象映射了元素的HTML屬性

5.2 獲取和設置非標準的HTML屬性

getAttribute(attrname)獲取自定義或內置屬性的值

setAttribute(attrname,value) 設置自定義或內置屬性

hasAttribute(attrname) 判斷是否存在該屬性

removeAttribute() 移出自定義或內置的屬性

5.3 做爲Attr節點的

attibutes 屬性

setAttributeNode()

getAttributeNode()

document.createAttribute() 建立屬性節點

6 元素的內容

6.1 做爲HTML的元素內容

innerHTML

outerHTML

6.2 做爲純文本的元素內容

textContent IE9+

inner Text 會忽略多餘空白

6.3 做爲Text節點的元素內容

文本節點的方法

appendData()    向文本節點追加內容
deleteData()    刪除文本節點的一部份內容
insertData()    向文本節點中插入內容
replaceData()    替換內容
substringData()    截取內容

 建立文本節點

document.createTextNode()

7 建立、插入、刪除節點

7.1 建立節點

document.createElement()

7.2 插入節點

appendChild()    在元素的最後追加一個子元素
insertBefore()    在元素指定的位置插入一個子元素

7.3 刪除節點

removeChild()

7.4 替換節點

replaceChild(new_node, old_node)

7.5 克隆節點

cloneNode()
    參數
    true    克隆元素以及全部的厚點節點
    false    僅僅克隆節點自己

7.6 DocumentFragment

document.createDocumentFragment()能夠建立該對象

DocumentFragment 接口表示文檔的一部分（或一段）。更確切地說，它表示一個或多個鄰接的 Document 節點和它們的全部子孫節點。

DocumentFragment 節點不屬於文檔樹，繼承的 parentNode 屬性老是 null。

請求把一個 DocumentFragment 節點插入文檔樹時，插入的不是 DocumentFragment 自身，而是它的全部子孫節點。這使得 DocumentFragment 成了有用的佔位符，暫時存放那些一次插入文檔的節點

8 元素的尺寸、位置、滾動

8.1 元素座標

offsetLeft    距離左邊的距離, 相對規則同 css 的定位
offsetTop    距離上邊的距離, 相對規則同 css 的定位
offsetParent    獲得第必定位的祖先元素
clientLeft    沒卵用 就是邊框寬
clientTop    沒卵用 就是邊框寬
getBoundingClientRect()        返回對象 包含位置信息 大小信息

8.2 查詢元素的幾何尺寸

getBoundingClientRect()
getClientRects()
offsetWidth
offsetHeight
clientWidth
clientHeight
scrollWidth
scrollHeight

8.3 斷定某個元素在某點

document.elementFromPoint()

8.4 滾動

scrollLeft
scrollTop

9 Document對象

每一個載入瀏覽器的 HTML 文檔都會成爲Document 對象。Document 對象使咱們能夠從腳本中對 HTML頁面中全部元素進行訪問

9.1 屬性

URL        獲取當前頁面的url 只讀
domain        獲取域名
referrer        獲取上一個頁面的地址 只讀
title        
location    
lastModified    
cookie

9.2 方法

write()        
writeln()

10 HTML表單中相關對象

10.1 from對象

屬性

elements    全部表單控件組成的集合

方法

submit()    讓表單提交
reset()        讓表單重置

10.2 按鈕（button submit reset)對象

方法

focus()    得到焦點
blur()    使失去焦點
click()    使按鈕比被單擊

10.3 單選複選

方法

focus()    得到焦點
blur()    失去焦點
click()    被單擊

10.4 文本（input textarea)

方法

focus()    獲取焦點
blur()    失去焦點
select()    所有被選中

10.5 select對象

屬性

options
selectedIndex
length    選項的數量

方法

add()    添加選項
remove()    移出選項, 參數是option的索引
focus()    獲取焦點
blur()    失去焦點

11 Table中相關對象

11.1 table對象

屬性

cells    返回包含表格中全部單元格的一個數組。
rows     返回包含表格中全部行的一個數組。

方法

createCaption()    爲表格建立一個 caption 元素。
deleteCaption()    從表格刪除 caption 元素以及其內容。
createTHead()    在表格中建立一個空的 tHead 元素。
deleteTHead()    從表格刪除 tHead 元素及其內容。
createTFoot()    在表格中建立一個空的 tFoot 元素。
deleteTFoot()    從表格刪除 tFoot 元素及其內容。
insertRow()    在表格中插入一個新行。
deleteRow()    從表格刪除一行。

11.2 tr對象

屬性

cells    返回包含行中全部單元格的一個數組。
rowIndex    返回該行在表中的位置。

方法

deleteCell()    刪除行中的指定的單元格。
insertCell()    在一行中的指定位置插入一個空的 <td> 元素。
​

11.3 td對象、th對象

屬性

cellIndex    返回單元格在某行的單元格集合中的位置。