Document Object Model 文檔對(duì)象模型

查

查看元素節(jié)點(diǎn)

document 代表整個(gè)文檔
document.getElementsByTagName() 標(biāo)簽名
document.getElementsByName() 需注意，只有部分標(biāo)簽name可生效（表單，表單元素，img，iframe）
document.getElementsByClassName() 類(lèi)名，IE8和IE8以下的版本無(wú)效，可以多個(gè)class一起
document.getElementById() 元素id在IE8以下的瀏覽器，不區(qū)分id大小寫(xiě)，而且也返回匹配name屬性的元素。
document.querySelector() CSS選擇器 在IE7及IE7以下無(wú)效。
document.querySelectorAll() CSS選擇器 在IE7及IE7以下無(wú)效。

遍歷節(jié)點(diǎn)樹(shù)

parentNode 父節(jié)點(diǎn)（最頂端的parentNode為#document）
childNode 子節(jié)點(diǎn)們
firstChild 第一個(gè)子節(jié)點(diǎn)
lastChild 最后一個(gè)子節(jié)點(diǎn)
nextSibling 后一個(gè)兄弟節(jié)點(diǎn)
previousSibling 前一個(gè)兄弟節(jié)點(diǎn)

基于元素節(jié)點(diǎn)樹(shù)的遍歷

parentElement 返回當(dāng)前元素的父元素節(jié)點(diǎn)（IE不兼容）
children 只返回當(dāng)前元素的元素子節(jié)點(diǎn)
node.childElementCount === node.children.length 當(dāng)前元素節(jié)點(diǎn)的子元素個(gè)數(shù) （IE不兼容）
firstElementChild 返回的是第一個(gè)元素節(jié)點(diǎn)（IE不兼容）
lastElementChild 返回的是最后一個(gè)元素節(jié)點(diǎn)（IE不兼容）
nextElementSibling / previousElementSibling 返回后一個(gè) / 前一個(gè)兄弟元素節(jié)點(diǎn)（IE不兼容）

節(jié)點(diǎn)的四個(gè)屬性

nodeName 元素的標(biāo)簽名，以大寫(xiě)形式表示，只讀
nodeValue Text節(jié)點(diǎn)或Comment節(jié)點(diǎn)的文本內(nèi)容，可讀寫(xiě)
nodeType 該節(jié)點(diǎn)的類(lèi)型，只讀
attributes Element節(jié)點(diǎn)的屬性集合

節(jié)點(diǎn)的一個(gè)方法

Node.hasChildNodes()

節(jié)點(diǎn)的類(lèi)型

1. 元素節(jié)點(diǎn) *
2. 文本節(jié)點(diǎn)
3. 屬性節(jié)點(diǎn) *
4. 注釋節(jié)點(diǎn)
5. 文檔節(jié)點(diǎn)

DOM Tree

增

document.createElement() 創(chuàng)建元素節(jié)點(diǎn)
document.createTextNode() 創(chuàng)建文字節(jié)點(diǎn)
document.createComment() 創(chuàng)建注釋節(jié)點(diǎn)
document.createDocumentFragment()

插

ParentNode.appendChild() 在最后面插入，和數(shù)組的push很像
ParentNode.insertBefore(a, b) 在a的前面插入b

刪

parent.removeChild()
child.remove()

替換

parent.replaceChild(new, origin) 用new替換origin

Element屬性

innerHTML 改變?cè)貎?nèi)的內(nèi)容。
innerText 改變?cè)貎?nèi)的文本

Element方法

ele.setAttribute("屬性名", "屬性值") 設(shè)置一個(gè)屬性
ele.getAttribute("屬性名")

獲取窗口屬性

查看滾動(dòng)條的滾動(dòng)距離

window.pageXOffset/pageYOffset IE8及以下瀏覽器不兼容

document.body.scrollLeft/scrollTop
document.documentElement.scrollLeft/scrollTop 兼容性混亂，在IE8及以下版本用時(shí)取兩個(gè)值相加。并且，兩個(gè)值不會(huì)同時(shí)有值，一個(gè)有值，另一個(gè)值為零。

document.body.scrollLeft + document.documentElement.scrollLeft

可視區(qū)窗口的尺寸

window.innerWidth/innerHeight IE8及以下瀏覽器不兼容

document.documentElement.clientWidth/clientHeight 標(biāo)準(zhǔn)模式下，任何瀏覽器都兼容

document.body.clientWidth/clientHeight 適用于怪異/混雜模式下的瀏覽器

查看元素的尺寸

ele.offsetWidth/offsetHeight

查看元素的位置

1. ele.offsetLeft/offsetTop
   對(duì)于無(wú)定位的父級(jí)元素，返回相對(duì)于文檔的坐標(biāo)。
   對(duì)于有定位的父級(jí)元素，返回相對(duì)于有定位的父元素的坐標(biāo)。

2. ele.offsetParent
   返回最近有定位的父級(jí)元素，如無(wú)返回body
body的offsetParent返回null

讓滾動(dòng)條滾動(dòng)

window上有三個(gè)方法

1. scroll(x, y)/scrollTo(x, y) 兩種用法相同，用誰(shuí)都行。
2. scrollBy(x, y)

x: 為橫軸
y: 為縱軸
三個(gè)方法功能類(lèi)似，用法都是將x, y坐標(biāo)傳入。即實(shí)現(xiàn)讓滾動(dòng)條滾動(dòng)到當(dāng)前位置。

區(qū)別：scrollBy()會(huì)在之前的數(shù)據(jù)基礎(chǔ)之上做累加

腳本化CSS

讀寫(xiě)元素CSS屬性

dom.style.prop

1. 可讀寫(xiě)行間樣式，沒(méi)有兼容性問(wèn)題，碰到float這樣的保留字屬性，前面應(yīng)該加css
   eg: float => cssFloat
2. 復(fù)合屬性必須拆解，組合單詞變成小駝峰式寫(xiě)法
3. 寫(xiě)入的值必須是字符串格式

dom.style.color = "red"
dom.style.fontSize = "12px"

查詢(xún)計(jì)算樣式

1. window.getComputedStyle(ele, null)或后面跟.[prop]
null這個(gè)參數(shù)是調(diào)取元素偽類(lèi)用的。
   
   參數(shù)null是干嘛用的
   
   第一條是獲取div寬度，第二條是獲取div偽類(lèi)的寬度
2. 計(jì)算樣式只讀，不可修改
3. 返回的計(jì)算樣式的值都是絕對(duì)值，沒(méi)有相對(duì)單位
4. IE8及以下不兼容

查詢(xún)樣式

1. ele.currentStyle
2. 計(jì)算樣式只讀，不可修改
3. 返回的計(jì)算樣式的值不是經(jīng)過(guò)轉(zhuǎn)換的絕對(duì)值
4. IE獨(dú)有的屬性