JS文檔對象模型操作總結


定義:文檔對象模型DOM(DocumentObjectModel)定義訪問和處理HTML文檔的標准方法。DOM
將HTML文檔呈現為帶有元素、屬性和文本的樹結構(節點樹)。

一、獲取節點
document.getElementById
語法:document.getElementById(元素ID);
功能:通過元素ID獲取節點

document.getElementsByName
語法:document.getElementsByName(元素name屬性)
功能:通過元素的name屬性獲取節點

document.getElementsByTagName()
語法:document.getElementsByTagName(元素標簽)
功能:通過元素名獲取節點


節點指針
firstChild
語法:父節點.firstChild
功能:獲取元素的首個子節點

lastChild
語法:父節點.lastChild
功能:獲取元素的最后一個子節點

childNodes
語法:父節點.childNodes
功能:獲取元素子節點列表

previousSibling
語法:兄弟節點.previousSibling
功能:獲取已知節點的上一個節點

nextSibling
語法:兄弟節點.nextSibling
功能:獲取已知節點的下一個節點

parentNode
語法:子節點.parentNode
功能:獲取已知節點的父節點


二、操作節點
創建節點
createElement
語法:document.createElement(元素標簽)
功能:創建元素節點

createAttribute
語法:document.createAttribute(元素屬性)
功能:創建屬性節點

createTextNode
語法:document.createTextNode(文本內容)
功能:創建文本節點

插入節點
appendChild
語法:appendChild(添加的新節點)
功能:向節點的子節點列表的末尾添加新的子節點

inaertBefore
語法:insertBefore(要添加的新節點,已知節點)
功能:在已知的節點前插入新的節點

替換節點
replaceChild
語法:replaceChild(要插入的新元素,將被替換的老元素)
功能:將某個子節點替換為另一個

復制節點
cloneNode
語法:需要復制的節點.cloneNode(true/false)
功能:創建指定節點副本
參數:true復制當前節點及其子節點
false緊復制當前節點

刪除節點
removeChild
語法:removeChild(要刪除的節點)
功能:刪除指定節點


三、操作屬性
獲取屬性getAttribute
語法:元素節點.getAttribute(元素屬性名)
功能:獲取元素節點中指定屬性的屬性值

設置屬性setAttribute
語法:元素節點.setAttribute(屬性名,屬性值)
功能:創建或改變元素節點的屬性

刪除屬性
語法:元素節點.removeAttribute(屬性名)
功能:刪除元素中指定屬性


四、文本操作
insertData(offset,String)從offset指定的位置插入string
appendData(string)將string插入到文本節點的末尾處
deleteData(offset,count)從offset起刪除count個字符
replaceData(off,count,string)從off將cuont個字符用string替換
splitData(offset)從offset起將文本節點分成兩個節點
substring(offset,count)返回由offset起的count個節點


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM