js常用DOM操作有哪些？

.選取了DOM操作中實用且常用的部分，省略了實用但有明顯相容性的部分
2.DOM屬性和方法的型別歸屬可能不完全準確
3.某些一般相容性和特點做了標識(主要是ie8-9上下)

節點類型

##屬性節點(Attr )2文字節點(Text)#3##CDATA節點(CDATASetion)實體參考節點(EntityReference)實體節點(Entity)處理指令節點(ProcessingInstruction)註解節點(Comment)文件節點(Document)文件類型節點(DocumentType)文檔片段節點(DocumentFragment)DTD宣告節點(Notation)Node類型

節點類型	#節點值
標籤節點(Element)	#1
4
5
6
#7
8
9
10
11
12

#屬性#nodeType節點類型nodeName節點名稱nodeValue節點值childNodes子節點parentNode#父節點ownerDocument文件節點previousSibling##上一個節點下一個節點第一個子節點最後一個子節點

說明
	nextSibling
	#firstChild
	#lastChild

#Document類型##屬性說明documentElementhtml標籤head[相容性不夠]head標籤bodybody標籤URL目前頁urlreferrer來源頁url#domain[可修改]頁面網域名稱images所有圖片集合#cookiecookie訊息title頁面標題activeElement#目前焦點元素documentMode文檔模式readyState文檔狀態doctype文檔類型聲明scripts腳本集合#formsform標籤集合children元素類型的子節點集合defaultViewdocument關聯的window物件 #方法說明#getElementById()傳回對應id的元素getElementsByName()#傳回對應名稱元素集合##getElementsByTagName()getElementsByClassName()querySelector( )querySelectorAll()createElement()#createTextNode()##createAttribute()建立屬性節點#createComment()建立註解節點

傳回對應標籤名稱元素集合
傳回指定類別名稱的元素集合
傳回符合選擇器的第一個元素
#傳回符合選擇器的元素集合
建立元素節點
建立文字節點

#createDocumentFragment()建立空的DocumentFragment 物件matchesSelector()[相容性不夠，需要前綴]該選擇器是否符合元素匹配write()[輸出後遊標不換行]#文件文字寫入Element類型屬性 #ididclassName類別名稱##titlestyle#innerHTMLouterHTML[包含自己]

##writeIn()[輸出後遊標換行]	文件文字寫入
implementation.hasFeature(特性,版本)	特性監測
#說明
標題
設定或傳回元素的樣式屬性
設定或傳回元素的內容

設定或傳回元素的內容############textContent[ie-innerText]## ####設定或傳回文字內容############contentEditable######設定或傳回元素的可編輯狀態###########isContentEditable# #####是否可編輯############childElementCount######子元素節點個數############firstElementChild###### #第一個子元素節點############lastElementChild######最後一個子元素節點############previousElementSibling#######上一個元素節點############nextElementSibling######下一個元素節點##############被取代節點## cloneNode(布林值)#importNode(節點,布林值)#contains(節點)hasFocus()hasChildNodes()isDefaultNamespace(url)isEqualNode(節點)isSupported(特性，版本)Attr型別

方法	說明	返回
focus()	設定焦點
blur()	失去焦點
appendChild(節點)	在子節點清單之後插入	新增節點
insertBefore(節點,參考節點)	在參考節點之前插入節點	插入節點
#removeChild(節點)	節點刪除	被刪除節點
replaceChild(節點,被取代的節點)	節點取代
複製節點	複製節點
從A文件中取得a節點，將其導入B文檔(類似cloneNode方法)
該節點是否為呼叫節點的子等級	布林值
#是否獲得了焦點	布林值
是否存在子節點	布林值
是否指定了名稱空間	布林值
兩個元素是否相等	布林值
是否支援某特性	布林值

屬性#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()合併相鄰文字節點，並刪除空的文字節點屬性方法說明caption caption元素指標tbody集合##tFoottfoot集合tHeadthead元素#rows表格所有行集合建立 元素，將其放到表格中，返回引用

表格運算	table元素
	tBodies
	createTHead()

createTFoot()#建立 元素，將其放到表格中，返回引用#建立caption元素，將其放到表格中，返回引用

	createCaption()
deleteTHead()	刪除thead元素
#deleteTFoot()	刪除tfoot元素
#deleteCaption()	刪除caption元素

#deleteRow(pos)

刪除指定位置的行##tbody元素屬性方法說明#rowstbody所有行集合deleteRow(pos)

#insertRow(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##clientLeft內邊距邊緣與邊框邊緣的距離(左邊框)clientTop內邊距邊緣與邊框邊緣的距離(上邊框)scrollWidth元素寬度(視覺內容區+捲動內容區+內邊距)##scrollHeight

#告訴
	##元素寬度(視覺內容區+內邊距)
clientHeight	元素高度(視覺內容區+內邊距)

#元素高度(可視內容區+捲動內容區+內邊距)

scrollLeft

#隱藏的捲動寬度(待捲動寬度)

######scrollTop######隱藏的捲動高度(待捲動寬度)###############相容性######clientWidth/ clientHeight和scrollWidth/scrollHeight有遊覽器差異#########學習過程中遇到什麼問題或是想取得學習資源的話，歡迎加入學習交流群######

以上是js常用DOM操作有哪些？的詳細內容。更多資訊請關注PHP中文網其他相關文章！