1.抽取了DOM操作中常用的部分
2.DOM屬性和方法的對象歸屬可能并不完全準(zhǔn)確
3.某些兼容性和特點(diǎn)做了標(biāo)識(絕大部分的兼容性是ie8~9上下)
節(jié)點(diǎn)類型
節(jié)點(diǎn)類型 節(jié)點(diǎn)值
標(biāo)簽節(jié)點(diǎn)(Element) 1
屬性節(jié)點(diǎn)(Attr) 2
文本節(jié)點(diǎn)(Text) 3
CDATA節(jié)點(diǎn)(CDATASetion) 4
實(shí)體引用節(jié)點(diǎn)(EntityReference) 5
實(shí)體節(jié)點(diǎn)(Entity) 6
處理指令節(jié)點(diǎn)(ProcessingInstruction) 7
注釋節(jié)點(diǎn)(Comment) 8
文檔節(jié)點(diǎn)(Document) 9
文檔類型節(jié)點(diǎn)(DocumentType) 10
文檔片段節(jié)點(diǎn)(DocumentFragment) 11
DTD聲明節(jié)點(diǎn)(Notation) 12
Node類型
屬性 說明
nodeType 節(jié)點(diǎn)類型
nodeName 節(jié)點(diǎn)名
nodeValue 節(jié)點(diǎn)值
childNodes 子節(jié)點(diǎn)
parentNode 父節(jié)點(diǎn)
ownerDocument 文檔節(jié)點(diǎn)
previousSibling 上一個(gè)節(jié)點(diǎn)
nextSibling 下一個(gè)節(jié)點(diǎn)
firstChild 第一個(gè)子節(jié)點(diǎn)
lastChild 最后一個(gè)子節(jié)點(diǎn)
Document類型
屬性 說明
documentElement html標(biāo)簽
head[兼容性不夠] head標(biāo)簽
body body標(biāo)簽
URL 當(dāng)前頁url
referrer 來源頁url
domain[可修改] 頁面域名
images 所有圖片集合
cookie cookie信息
title 頁面標(biāo)題
activeElement 當(dāng)前焦點(diǎn)元素
documentMode 文檔模式
readyState 文檔狀態(tài)
doctype 文檔類型聲明
scripts 腳本集合
forms form標(biāo)簽集合
children 元素類型的子節(jié)點(diǎn)集合
defaultView document關(guān)聯(lián)的window對象
方法 說明
getElementById() 返回對應(yīng)id的元素
getElementsByName() 返回對應(yīng)名稱元素集合
getElementsByTagName() 返回對應(yīng)標(biāo)簽名元素集合
getElementsByClassName() 返回指定類名的元素集合
querySelector() 返回符合選擇器的第一個(gè)元素
querySelectorAll() 返回符合選擇器的元素集合
createElement() 創(chuàng)建元素節(jié)點(diǎn)
createTextNode() 創(chuàng)建文本節(jié)點(diǎn)
createAttribute() 創(chuàng)建屬性節(jié)點(diǎn)
createComment() 創(chuàng)建注釋節(jié)點(diǎn)
createDocumentFragment() 創(chuàng)建空的 DocumentFragment 對象
matchesSelector()[兼容性不夠，需要前綴] 該選擇器是否符合元素匹配
write()[輸出后光標(biāo)不換行] 文檔文本寫入
writeIn()[輸出后光標(biāo)換行] 文檔文本寫入
Element類型
屬性 說明
id id
className 類名
title 標(biāo)題
style 設(shè)置或返回元素的樣式屬性
innerHTML 設(shè)置或者返回元素的內(nèi)容
outerHTML[包含自身] 設(shè)置或者返回元素的內(nèi)容
textContent[ie-innerText] 設(shè)置或返回文本內(nèi)容
contentEditable 設(shè)置或返回元素的可編輯狀態(tài)
isContentEditable 是否可編輯
childElementCount 子元素節(jié)點(diǎn)個(gè)數(shù)
firstElementChild 第一個(gè)元素節(jié)點(diǎn)
lastElementChild 最后一個(gè)元素節(jié)點(diǎn)
previousElementSibling 上一個(gè)元素節(jié)點(diǎn)
nextElementSibling 下一個(gè)元素節(jié)點(diǎn)
方法 說明 返回
focus() 設(shè)置焦點(diǎn)
blur() 去除焦點(diǎn)
appendChild(節(jié)點(diǎn)) 在子節(jié)點(diǎn)列表之后插入 新增節(jié)點(diǎn)
insertBefore(節(jié)點(diǎn),參照節(jié)點(diǎn)) 在參照節(jié)點(diǎn)之前插入節(jié)點(diǎn) 插入節(jié)點(diǎn)
removeChild(節(jié)點(diǎn)) 節(jié)點(diǎn)刪除 被刪節(jié)點(diǎn)
replaceChild(節(jié)點(diǎn),被替換的節(jié)點(diǎn)) 節(jié)點(diǎn)替換 被替換節(jié)點(diǎn)
cloneNode(布爾值) 復(fù)制節(jié)點(diǎn) 克隆節(jié)點(diǎn)
importNode(節(jié)點(diǎn),布爾值) 從A文檔中取得a節(jié)點(diǎn)咪笑，將其導(dǎo)入B文檔(類似cloneNode方法)
contains(節(jié)點(diǎn)) 該節(jié)點(diǎn)是否為調(diào)用節(jié)點(diǎn)的子級 布爾值
hasFocus() 是否獲得了焦點(diǎn) 布爾值
hasChildNodes() 是否存在子節(jié)點(diǎn) 布爾值
isDefaultNamespace(url) 是否指定了名稱空間 布爾值
isEqualNode(節(jié)點(diǎn)) 兩個(gè)元素是否相等 布爾值
isSupported(特性，版本) 是否支持某特性 布爾值
Attr類型
屬性 說明
name 屬性名
value 屬性值
isId 是否為id類型
specified 屬性是否被指定
length 屬性長度
attributes 屬性集合
方法 說明
getAttribute() 獲取屬性值
getAttributeNode() 獲取屬性節(jié)點(diǎn)
setAttribute() 設(shè)置屬性值
setAttributeNode() 設(shè)置屬性節(jié)點(diǎn)
removeAttribute() 刪除屬性
removeAttributeNode()[ie不支持] 刪除屬性節(jié)點(diǎn)
hasAttribute() 是否存在指定的屬性
hasAttributes() 是否存在屬性
Text類型
方法 說明
appendData(文本) 將text添加到節(jié)點(diǎn)的末尾
deleteData(位置,數(shù)量) 從指定位置開始刪除n個(gè)字符
insertData(位置,文本) 從指定位置插入文本
replaceData(位置,數(shù)量,文本) 用text替換從offset位置開始到offset+count為止處的文本
splitText(位置) 從指定位置將當(dāng)前文本節(jié)點(diǎn)分裂成兩個(gè)文本節(jié)點(diǎn)
substringData(位置,數(shù)量) 截取從offset位置開始到offset+count為止處的字符串
normalize() 合并相鄰文本節(jié)點(diǎn)，并刪除空的文本節(jié)點(diǎn)
樣式操作
訪問元素樣式
DOM樣式——js通過dom.style只能訪問直接樣式屬性，不能訪問嵌入樣式表和外部樣式表
屬性方法(dom.style) 說明
cssText 返回style特性中所有樣式的字符串形式
length 返回元素中CSS屬性數(shù)量
parentRule 返回CSS信息的CSSRule對象
getPropertyCSSValue(name) 返回屬性值的CSSValue對象(包含cssText和cssValueType)
getPropertyPriority(name) 是否使用了!important屬性
getPropertyValue(name) 返回給定屬性的字符串值
removeProperty(name) 從樣式中刪除給定屬性
setProperty(name,value,優(yōu)先級) 將給定屬性設(shè)置為相應(yīng)的值并加上優(yōu)先級
計(jì)算樣式——樣式層疊后實(shí)際起用的樣式
屬性方法 說明
document.defaultView.getComputedStyle(dom,偽元素字符串)[ie不支持] 返回當(dāng)前元素所有計(jì)算后的樣式
dom.currentStyle[ie支持] 返回當(dāng)前元素所有計(jì)算后的樣式
操作樣式表
document.styleSheets——應(yīng)用于文檔的所有樣式表
屬性(document.styleSheet) 說明
cssRules[ie不支持] 單個(gè)樣式表中的所有樣式規(guī)則
rules[ie支持] 單個(gè)樣式表中的所有樣式規(guī)則
document.styleSheets[n].cssRules/rules下
屬性 說明
cssText[ie不支持] 整條樣式規(guī)則的字符串
selectorText 樣式選擇符
style 具體樣式對象
大小和偏移
屬性 說明
offsetParent 偏移的父容器
getBoundingClientRect() 獲取頁面元素實(shí)際位置和寬高(返回屬性對象)
offsetWidth 元素寬度(可視內(nèi)容區(qū)+滾動(dòng)條+內(nèi)邊距+邊框)
offsetHeight 元素高度(可視內(nèi)容區(qū)+滾動(dòng)條+內(nèi)邊距+邊框)
offsetLeft 與相鄰父級的左距離
offsetTop 與相鄰父級的上距離
clientWidth 元素寬度(可視內(nèi)容區(qū)+內(nèi)邊距)
clientHeight 元素高度(可視內(nèi)容區(qū)+內(nèi)邊距)
clientLeft 內(nèi)邊距邊緣與邊框邊緣的距離(左邊框)
clientTop 內(nèi)邊距邊緣與邊框邊緣的距離(上邊框)
scrollWidth 元素寬度(可視內(nèi)容區(qū)+滾動(dòng)內(nèi)容區(qū)+內(nèi)邊距)
scrollHeight 元素高度(可視內(nèi)容區(qū)+滾動(dòng)內(nèi)容區(qū)+內(nèi)邊距)
scrollLeft 隱藏的滾動(dòng)寬度(待滾動(dòng)寬度)
scrollTop 隱藏的滾動(dòng)高度(待滾動(dòng)寬度)
兼容性
clientWidth/clientHeight和scrollWidth/scrollHeight存在游覽器差異
