DOM 操作 HTML

DOM Document Object Model，文檔對象模型，用js操作文檔對象

[外鏈圖片轉存失敗(img-Dygj4uK9-1562680086020)(image/domtree.gif)]

• 節點：構成網頁最基本的部分，網頁的每一部分都是一個節點
  • 文檔節點：
  • 元素節點：
  • 屬性節點：
  • 文本節點：
• 事件：用戶與瀏覽器的交互行為
  • 操作事件的兩種辦法：
  • 在屬性中添加js代碼，高耦合，不推薦
  • 綁定事件響應函數
• 文檔的加載: 自頂向下，讀一行，加載一行，所以dom應該寫在body最后面，或者用onload聲明整個頁面加載完后再執行

<script>window.onload = function(){// jsCode} </script>

獲取元素節點

• getElementById()
• getElementsByName()：返回類數組對象
• getElementsByTagName()：返回類數組對象
• innerHTML；文本節點
• innerText：文本節點，沒標簽

---

通過具體元素調用：

• childNodes:所有子節點
• firstChild：第一個子節點
• lastChild：最后一個子節點
• children：所有子元素
• parentNode:獲取當前節點的父節點
• previousSibling:前一個兄弟節點
• nextSibling:后一個兄弟節點

**注意:**標簽間的空白也會被當成節點,可以使用一下幾個獲取子元素，但不兼容IE8及以下瀏覽器

• firstElementChild:
• lastElementChild:
• previousElementSibling:前一個兄弟元素
• nextElementSibling:后一個兄弟元素

操作元素節點

• createElement(): 創建元素節點對象，傳入標簽名的字符串
• createTextNode():創建文本節點對象，傳入文本
• appendChild():向父節點添加一個子節點
• insertBefore():在父節點的指定子節點前插一個新節點

fatherNode.insertBefore(childNode,newNode);

• replaceChild():用新節點替換子節點

fatherNode.replaceChild(newNode,oldNode);

• removeChild()：刪除當前節點的指定子節點

完整版

屬性 / 方法描述

element.accessKey	設置或返回元素的快捷鍵。
element.appendChild()	向元素添加新的子節點，作為最后一個子節點。
element.attributes	返回元素屬性的 NamedNodeMap。
element.childNodes	返回元素子節點的 NodeList。
element.className	設置或返回元素的 class 屬性。
element.clientHeight	返回元素的可見高度。
element.clientWidth	返回元素的可見寬度。
element.cloneNode()	克隆元素。
element.compareDocumentPosition()	比較兩個元素的文檔位置。
element.contentEditable	設置或返回元素的文本方向。
element.dir	設置或返回元素的內容是否可編輯。
element.firstChild	返回元素的首個子。
element.getAttribute()	返回元素節點的指定屬性值。
element.getAttributeNode()	返回指定的屬性節點。
element.getElementsByTagName()	返回擁有指定標簽名的所有子元素的集合。
element.getFeature()	返回實現了指定特性的 API 的某個對象。
element.getUserData()	返回關聯元素上鍵的對象。
element.hasAttribute()	如果元素擁有指定屬性，則返回true，否則返回 false。
element.hasAttributes()	如果元素擁有屬性，則返回 true，否則返回 false。
element.hasChildNodes()	如果元素擁有子節點，則返回 true，否則 false。
element.id	設置或返回元素的 id。
element.innerHTML	設置或返回元素的內容。
element.insertBefore()	在指定的已有的子節點之前插入新節點。
element.isContentEditable	設置或返回元素的內容。
element.isDefaultNamespace()	如果指定的 namespaceURI 是默認的，則返回 true，否則返回 false。
element.isEqualNode()	檢查兩個元素是否相等。
element.isSameNode()	檢查兩個元素是否是相同的節點。
element.isSupported()	如果元素支持指定特性，則返回 true。
element.lang	設置或返回元素的語言代碼。
element.lastChild	返回元素的最后一個子元素。
element.namespaceURI	返回元素的 namespace URI。
element.nextSibling	返回位于相同節點樹層級的下一個節點。
element.nodeName	返回元素的名稱。
element.nodeType	返回元素的節點類型。
element.nodeValue	設置或返回元素值。
element.normalize()	合并元素中相鄰的文本節點，并移除空的文本節點。
element.offsetHeight	返回元素的高度。
element.offsetWidth	返回元素的寬度。
element.offsetLeft	返回元素的水平偏移位置。
element.offsetParent	返回元素的偏移容器。
element.offsetTop	返回元素的垂直偏移位置。
element.ownerDocument	返回元素的根元素（文檔對象）。
element.parentNode	返回元素的父節點。
element.previousSibling	返回位于相同節點樹層級的前一個元素。
element.removeAttribute()	從元素中移除指定屬性。
element.removeAttributeNode()	移除指定的屬性節點，并返回被移除的節點。
element.removeChild()	從元素中移除子節點。
element.replaceChild()	替換元素中的子節點。
element.scrollHeight	返回元素的整體高度。
element.scrollLeft	返回元素左邊緣與視圖之間的距離。
element.scrollTop	返回元素上邊緣與視圖之間的距離。
element.scrollWidth	返回元素的整體寬度。
element.setAttribute()	把指定屬性設置或更改為指定值。
element.setAttributeNode()	設置或更改指定屬性節點。
element.setIdAttribute()
element.setIdAttributeNode()
element.setUserData()	把對象關聯到元素上的鍵。
element.style	設置或返回元素的 style 屬性。
element.tabIndex	設置或返回元素的 tab 鍵控制次序。
element.tagName	返回元素的標簽名。
element.textContent	設置或返回節點及其后代的文本內容。
element.title	設置或返回元素的 title 屬性。
element.toString()	把元素轉換為字符串。
nodelist.item()	返回 NodeList 中位于指定下標的節點。
nodelist.length	返回 NodeList 中的節點數。

總結

以上是生活随笔為你收集整理的JS_12 DOM的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。