常見的js中的DOM操做

節點類型

節點類型 節點值
標籤節點(Element) 1
屬性節點(Attr) 2
文本節點(Text) 3
CDATA節點(CDATASetion) 4
實體引用節點(EntityReference) 5
實體節點(Entity) 6
處理指令節點(ProcessingInstruction) 7
註釋節點(Comment) 8
文檔節點(Document) 9
文檔類型節點(DocumentType) 10
文檔片斷節點(DocumentFragment) 11
DTD聲明節點(Notation) 12
Node類型

屬性 說明
nodeType 節點類型
nodeName 節點名
nodeValue 節點值
childNodes 子節點
parentNode 父節點
ownerDocument 文檔節點
previousSibling 上一個節點
nextSibling 下一個節點
firstChild 第一個子節點
lastChild 最後一個子節點
Document類型

屬性 說明
documentElement html標籤
head[兼容性不夠] head標籤
body body標籤
URL 當前頁url
referrer 來源頁url
domain[可修改] 頁面域名
images 全部圖片集合
cookie cookie信息
title 頁面標題
activeElement 當前焦點元素
documentMode 文檔模式
readyState 文檔狀態
doctype 文檔類型聲明
scripts 腳本集合
forms form標籤集合
children 元素類型的子節點集合
defaultView document關聯的window對象
方法 說明
getElementById() 返回對應id的元素
getElementsByName() 返回對應名稱元素集合
getElementsByTagName() 返回對應標籤名元素集合
getElementsByClassName() 返回指定類名的元素集合
querySelector() 返回符合選擇器的第一個元素
querySelectorAll() 返回符合選擇器的元素集合
createElement() 建立元素節點
createTextNode() 建立文本節點
createAttribute() 建立屬性節點
createComment() 建立註釋節點
createDocumentFragment() 建立空的 DocumentFragment 對象
matchesSelector()[兼容性不夠，須要前綴] 該選擇器是否符合元素匹配
write()[輸出後光標不換行] 文檔文本寫入
writeIn()[輸出後光標換行] 文檔文本寫入
implementation.hasFeature(特性,版本) 特性監測
Element類型

屬性 說明
id id
className 類名
title 標題
style 設置或返回元素的樣式屬性
innerHTML 設置或者返回元素的內容
outerHTML[包含自身] 設置或者返回元素的內容
textContent[ie-innerText] 設置或返回文本內容
contentEditable 設置或返回元素的可編輯狀態
isContentEditable 是否可編輯
childElementCount 子元素節點個數
firstElementChild 第一個子元素節點
lastElementChild 最後一個子元素節點
previousElementSibling 上一個元素節點
nextElementSibling 下一個元素節點
方法 說明 返回
focus() 設置焦點
blur() 失去焦點
appendChild(節點) 在子節點列表以後插入 新增節點
insertBefore(節點,參照節點) 在參照節點以前插入節點 插入節點
removeChild(節點) 節點刪除 被刪節點
replaceChild(節點,被替換的節點) 節點替換 被替換節點
cloneNode(布爾值) 複製節點 克隆節點
importNode(節點,布爾值) 從A文檔中取得a節點，將其導入B文檔(相似cloneNode方法)
contains(節點) 該節點是否爲調用節點的子級 布爾值
hasFocus() 是否得到了焦點 布爾值
hasChildNodes() 是否存在子節點 布爾值
isDefaultNamespace(url) 是否指定了名稱空間 布爾值
isEqualNode(節點) 兩個元素是否相等 布爾值
isSupported(特性，版本) 是否支持某特性 布爾值
Attr類型

屬性 說明
name 屬性名
value 屬性值
isId 是否爲id類型
specified 屬性是否被指定
length 屬性長度
attributes 屬性集合
方法 說明
getAttribute() 獲取屬性值
getAttributeNode() 獲取屬性節點
setAttribute() 設置屬性值
setAttributeNode() 設置屬性節點
removeAttribute() 刪除屬性
removeAttributeNode()[ie不支持] 刪除屬性節點
hasAttribute() 是否存在指定的屬性
hasAttributes() 是否存在屬性
Text類型

方法 說明
appendData(文本) 將text添加到節點的末尾
deleteData(位置,數量) 從指定位置開始刪除n個字符
insertData(位置,文本) 從指定位置插入文本
replaceData(位置,數量,文本) 用text替換從offset位置開始到offset+count爲止處的文本
splitText(位置) 從指定位置將當前文本節點分裂成兩個文本節點
substringData(位置,數量) 截取從offset位置開始到offset+count爲止處的字符串
normalize() 合併相鄰文本節點，並刪除空的文本節點
表格操做

table元素

屬性方法 說明
caption caption元素指針
tBodies tbody集合
tFoot tfoot集合
tHead thead元素
rows 表格全部行集合
createTHead() 建立 元素，將其放到表格中，返回引用
createTFoot() 建立 元素，將其放到表格中，返回引用
createCaption() 建立caption元素，將其放到表格中，返回引用
deleteTHead() 刪除thead元素
deleteTFoot() 刪除tfoot元素
deleteCaption() 刪除caption元素
deleteRow(pos) 刪除指定位置的行
insertRow(pos) 向行集合中的指定位置插入一行
tbody元素

屬性方法 說明
rows tbody全部行集合
deleteRow(pos) 刪除指定位置的行
insertRow(pos) 向行集合中的指定位置插入一行，返回引用
tr元素

屬性方法 說明
cells tr全部單元格集合
deleteCell(pos) 刪除指定位置的單元格
insertCell(pos) 向單元格集合中的指定位置插入一個單元格，返回引用
樣式操做

訪問元素樣式

DOM樣式——js經過dom.style只能訪問直接樣式屬性，不能訪問嵌入樣式表和外部樣式表
屬性方法(dom.style) 說明
cssText 返回style特性中全部樣式的字符串形式
length 返回元素中CSS屬性數量
parentRule 返回CSS信息的CSSRule對象
getPropertyCSSValue(name) 返回屬性值的CSSValue對象(包含cssText和cssValueType)
getPropertyPriority(name) 是否使用了!important屬性
getPropertyValue(name) 返回給定屬性的字符串值
removeProperty(name) 從樣式中刪除給定屬性
setProperty(name,value,優先級) 將給定屬性設置爲相應的值並加上優先級
計算樣式——樣式層疊後實際起用的樣式
屬性方法 說明
document.defaultView.getComputedStyle(dom,僞元素字符串)[ie不支持] 返回當前元素全部計算後的樣式
dom.currentStyle[ie支持] 返回當前元素全部計算後的樣式
操做樣式表

document.styleSheets——應用於文檔的全部樣式表
屬性(document.styleSheet[n]) 說明
cssRules[ie不支持] 單個樣式表中的全部樣式規則
rules[ie支持] 同上
insertRule(rule,index)[ie不支持] 向cssRules集合中指定位置插入rule字符串
addRule(rule,index)[ie支持] 同上
deleteRule(index)[ie不支持] 刪除cssRules集合中指定位置的規則
removeRule(index)[ie支持] 同上
document.styleSheets[n].cssRules/rules下
屬性 說明
cssText[ie不支持] 整條樣式規則的字符串
selectorText 樣式選擇符
style 具體樣式對象
大小和偏移

屬性 說明 offsetParent 偏移的父容器 getBoundingClientRect() 獲取頁面元素實際位置和寬高(返回屬性對象) offsetWidth 元素寬度(可視內容區+滾動條+內邊距+邊框) offsetHeight 元素高度(可視內容區+滾動條+內邊距+邊框) offsetLeft 與相鄰父級的左距離 offsetTop 與相鄰父級的上距離 clientWidth 元素寬度(可視內容區+內邊距) clientHeight 元素高度(可視內容區+內邊距) clientLeft 內邊距邊緣與邊框邊緣的距離(左邊框) clientTop 內邊距邊緣與邊框邊緣的距離(上邊框) scrollWidth 元素寬度(可視內容區+滾動內容區+內邊距) scrollHeight 元素高度(可視內容區+滾動內容區+內邊距) scrollLeft 隱藏的滾動寬度(待滾動寬度) scrollTop 隱藏的滾動高度(待滾動寬度)