DOM 操作 HTML

DOM Document Object Model，文檔對(duì)象模型，用js操作文檔對(duì)象

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

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

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

獲取元素節(jié)點(diǎn)

• getElementById()
• getElementsByName()：返回類數(shù)組對(duì)象
• getElementsByTagName()：返回類數(shù)組對(duì)象
• innerHTML；文本節(jié)點(diǎn)
• innerText：文本節(jié)點(diǎn)，沒標(biāo)簽

---

通過具體元素調(diào)用：

• childNodes:所有子節(jié)點(diǎn)
• firstChild：第一個(gè)子節(jié)點(diǎn)
• lastChild：最后一個(gè)子節(jié)點(diǎn)
• children：所有子元素
• parentNode:獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)
• previousSibling:前一個(gè)兄弟節(jié)點(diǎn)
• nextSibling:后一個(gè)兄弟節(jié)點(diǎn)

**注意:**標(biāo)簽間的空白也會(huì)被當(dāng)成節(jié)點(diǎn),可以使用一下幾個(gè)獲取子元素，但不兼容IE8及以下瀏覽器

• firstElementChild:
• lastElementChild:
• previousElementSibling:前一個(gè)兄弟元素
• nextElementSibling:后一個(gè)兄弟元素

操作元素節(jié)點(diǎn)

• createElement(): 創(chuàng)建元素節(jié)點(diǎn)對(duì)象，傳入標(biāo)簽名的字符串
• createTextNode():創(chuàng)建文本節(jié)點(diǎn)對(duì)象，傳入文本
• appendChild():向父節(jié)點(diǎn)添加一個(gè)子節(jié)點(diǎn)
• insertBefore():在父節(jié)點(diǎn)的指定子節(jié)點(diǎn)前插一個(gè)新節(jié)點(diǎn)

fatherNode.insertBefore(childNode,newNode);

• replaceChild():用新節(jié)點(diǎn)替換子節(jié)點(diǎn)

fatherNode.replaceChild(newNode,oldNode);

• removeChild()：刪除當(dāng)前節(jié)點(diǎn)的指定子節(jié)點(diǎn)

完整版

屬性 / 方法描述

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。