JS系列 -- JavaScript DOM API

概述

  1. DOM（Document Object Model）文檔對(duì)象模型，指的是 XML 文檔，需要說(shuō)明的是，HTML 是 XML 的衍生品，如果要操作 HTML 可以使用關(guān)于 XML 的文檔 DOM。

  2. JS 中的對(duì)象繼承自 Object ，頁(yè)面中的對(duì)象繼承自 Node 函數(shù)。
    Model 將頁(yè)面中的 Document（html、head、body）和內(nèi)存中的 Object 一一映射。

  3. DOM 就是把文檔變成對(duì)象的一種模型。

  4. 內(nèi)存中的 Object 是一個(gè)個(gè) node （構(gòu)造函數(shù)），其包括：

    • Element Node（元素節(jié)點(diǎn)）
    • Text Node（文本節(jié)點(diǎn)）
    • Comment Node（注釋節(jié)點(diǎn)）
    • Document Node（文檔節(jié)點(diǎn)）

  5. DOM 功能：頁(yè)面中的節(jié)點(diǎn)通過構(gòu)造函數(shù)構(gòu)造出對(duì)應(yīng)的對(duì)象

    Element.__proto__ === Node.prototype
Document.__proto__ === Node.prototype

API

Node 接口

Node 派生自O(shè)bject
Node是一個(gè)接口，許多DOM類型從這個(gè)接口繼承，并允許類似地處理（或測(cè)試）這些各種類型。

屬性

  • .childNodes ==> 返回包含指定節(jié)點(diǎn)的子節(jié)點(diǎn)的集合，該集合為即時(shí)更新的集合（live collection）

  • .firstChild ==> 只讀屬性返回樹中節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)，如果節(jié)點(diǎn)是無(wú)子節(jié)點(diǎn)，則返回 null

  • .lastChild ==> 只讀屬性，返回當(dāng)前節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)。如果沒有子節(jié)點(diǎn)，則返回 null

  • .nextSibling ==> 只讀屬性，返回其父節(jié)點(diǎn)的 childNodes 列表中緊跟在其后面的節(jié)點(diǎn)，如果指定的節(jié)點(diǎn)為最后一個(gè)節(jié)點(diǎn)，則返回 null。可能會(huì)獲取到文本節(jié)點(diǎn)

  • .previouSibling ==> 返回當(dāng)前節(jié)點(diǎn)的前一個(gè)兄弟節(jié)點(diǎn),沒有則返回null。可能會(huì)獲取到文本節(jié)點(diǎn)

  • .nodeName ==> 返回當(dāng)前節(jié)點(diǎn)的節(jié)點(diǎn)名稱（svg 標(biāo)簽返回小寫字母，其余返回大寫字母）

  • .nodeValue ==> 返回或設(shè)置當(dāng)前節(jié)點(diǎn)的值

  • .nodeType ==> 只讀屬性，表示的是該節(jié)點(diǎn)的類型

    • 元素節(jié)點(diǎn)（Node.ELEMENT_NODE） ==> nodeType === 1
    • 文本節(jié)點(diǎn)（Node.TEXT_NODE） ==> nodeType === 3
    • 注釋節(jié)點(diǎn)（Node.COMMENT_NODE） ==> nodeType === 8
    • 文檔節(jié)點(diǎn)（Node.DOCUMENT_NODE） ==> nodeType === 9
    • 描述文檔類型的 DocumentType節(jié)點(diǎn)（Node.DOCUMENT_TYPE_NODE） ==> nodeType === 10
    • 一個(gè) DocumentFragment 節(jié)點(diǎn)（Node.DOCUMENT_FRAGMENT_NODE） ==> nodeType === 11（使用 DocumentFragment 進(jìn)行性能優(yōu)化）

  • .parentElement ==> 返回當(dāng)前節(jié)點(diǎn)的父元素節(jié)點(diǎn),如果該元素沒有父節(jié)點(diǎn),或者父節(jié)點(diǎn)不是一個(gè)元素節(jié)點(diǎn).則 返回null

  • .parentNode ==> 返回指定的節(jié)點(diǎn)在DOM樹中的父節(jié)點(diǎn)

  • .innerText ==> 表示一個(gè)節(jié)點(diǎn)及其后代的“渲染”文本內(nèi)容的屬性

  • .textContent ==> 表示一個(gè)節(jié)點(diǎn)及其后代的文本內(nèi)容
    說(shuō)明：.innerText 和 .textContent 的區(qū)別

    • textContent 會(huì)獲取所有元素的內(nèi)容，包括 <script> 和 <style>元素，然而 **innerText **不會(huì)
    • innerText意識(shí)到樣式，并且不會(huì)返回隱藏元素的文本，而textContent會(huì)
    • 由于 innerText 受 CSS 樣式的影響，它會(huì)觸發(fā)重排（reflow），但textContent 不會(huì)
方法

  • .appendChild( ); ==> 添加子元素

  • .cloneNode( deep ); ==> 返回調(diào)用該方法的節(jié)點(diǎn)的一個(gè)副本
    參數(shù)deep 表示是否采用深度克隆，如果為 true，則該節(jié)點(diǎn)的所有后代節(jié)點(diǎn)也都會(huì)被克隆，如果為 false，則只克隆該節(jié)點(diǎn)本身。默認(rèn)為 false。

  • Node.contains() ==> 返回一個(gè)布爾值，表示傳入的節(jié)點(diǎn)是否為該節(jié)點(diǎn)的后代節(jié)點(diǎn)。

  • .insertBefore( newDiv, currentDiv ); ==> 在元素前插入元素

  • .removeChild( child ); ==> 移除一個(gè)節(jié)點(diǎn)（在頁(yè)面中移除，但是仍在內(nèi)存中）

  • .replace( newChild, oldChild ); ==> 用指定的節(jié)點(diǎn)替換當(dāng)前節(jié)點(diǎn)的一個(gè)子節(jié)點(diǎn)，并返回被替換掉的節(jié)點(diǎn)。

  • .hasChildNodes( ); ==> 返回一個(gè)布爾值,表明當(dāng)前節(jié)點(diǎn)是否包含有子節(jié)點(diǎn)

  • .isEqualNode( ); ==> 可以判斷兩個(gè)節(jié)點(diǎn)是否相等

  • .normalize() ==> 將當(dāng)前節(jié)點(diǎn)和它的后代節(jié)點(diǎn)”規(guī)范化“（normalized）。在一個(gè)"規(guī)范化"后的DOM樹中，不存在一個(gè)空的文本節(jié)點(diǎn)，或者兩個(gè)相鄰的文本節(jié)點(diǎn)

Document 接口

Document 接口提供了一些在瀏覽器服務(wù)中作為頁(yè)面內(nèi)容入口點(diǎn)而加載的一些頁(yè)面，也就是 DOM 樹

屬性

  • .body ==> 返回當(dāng)前文檔的 <body> 元素

  • .characterSet ==> 只讀屬性返回當(dāng)前文檔的字符編碼

  • .childElementCount ==> 只讀屬性，返回一個(gè)無(wú)符號(hào)長(zhǎng)整型數(shù)字，表示給定元素的子元素?cái)?shù)

  • .children ==> 只讀屬性，返回 一個(gè)Node的子elements ，是一個(gè)動(dòng)態(tài)更新的 HTMLCollection

  • .documentElement 是一個(gè)會(huì)返回文檔對(duì)象（document）的根元素（如HTML文檔的 <html> 元素）

  • .domain ==> 獲取/設(shè)置當(dāng)前文檔的原始域部分, 用于同源策略

  • .firstElementChild ==> 只讀屬性，返回對(duì)象的第一個(gè)孩子 Element， 如果沒有子元素，則為null

  • .lastElementChild ==> 只讀屬性，返回對(duì)象的最后一個(gè)孩子Element，如果沒有子元素，則返回null

  • .readyState ==> 描述了文檔的加載狀態(tài)

  • .referrer ==> 返回跳轉(zhuǎn)或打開到當(dāng)前頁(yè)面的那個(gè)頁(yè)面的URI

  • .onkeypress ==> 用來(lái)獲取或設(shè)置當(dāng)前元素的keypress事件的事件處理函數(shù)

  • .onclick ==> 返回當(dāng)前元素的 click 事件句柄代碼

  • .onmouseover ==> 當(dāng)指針設(shè)備移動(dòng)到存在監(jiān)聽器的元素或其子元素的時(shí)候，mouseover事件就會(huì)被觸發(fā)。（冒泡）

  • .onmouseout ==> 當(dāng)指針設(shè)備移出存在監(jiān)聽器的元素或其子元素的時(shí)候，mouseover事件就會(huì)被觸發(fā)。（冒泡）

  • .onmouseenter ==> 當(dāng)定點(diǎn)設(shè)備（通常指鼠標(biāo)）移動(dòng)到元素上時(shí)就會(huì)觸發(fā) mouseenter 事件.類似 mouseover ，它們兩者之間的差別是 mouseenter不會(huì)冒泡

  • .onmouseleave ==> 當(dāng)定點(diǎn)設(shè)備（通常指鼠標(biāo)）移出元素時(shí)就會(huì)觸發(fā) mouseleave 事件.類似 mouseout ，它們兩者之間的差別是mouseleave `不會(huì)冒泡

PC端：

  • .onmousedown ==> 用來(lái)獲取或設(shè)置當(dāng)前元素的mousedown事件的事件處理函數(shù)

  • .onmousemove ==> 用來(lái)獲取或設(shè)置當(dāng)前元素的mousemove事件的事件處理函數(shù)。（當(dāng)用戶在當(dāng)前元素上移動(dòng)鼠標(biāo)時(shí)會(huì)觸發(fā)mousemove事件.）。mdn上有 1.顯示"提示層"時(shí)onmousemove的用法. 2.在進(jìn)行拖拽操作時(shí)onmousemove的用法

  • .onmouseup ==> 用來(lái)獲取或設(shè)置當(dāng)前元素的mouseup事件的事件處理函數(shù)

移動(dòng)端：

  • .ontouchstart ==> 當(dāng)觸點(diǎn)與觸控設(shè)備表面接觸時(shí)觸發(fā) ontouchstart 事件

  • .ontouchmove ==> 當(dāng)觸點(diǎn)與觸控設(shè)備表面移動(dòng)時(shí)觸發(fā) ontouchstart 事件

  • .ontouchend ==> 當(dāng)觸點(diǎn)離開觸控平面時(shí)觸發(fā)touchend事件.
    特性檢測(cè)：如果設(shè)備不支持 touch 事件，那么元素的 ontouchstart 為undefined ，表示未定義。如果設(shè)備支持 touch 事件，那么元素的 onstarttouch 為 null ，表示初始化了

  • .onerror ==> 錯(cuò)誤(error)事件的一個(gè)事件處理程序(event handler)。針對(duì)各種目標(biāo)的不同類型的錯(cuò)誤觸發(fā)了 Error 事件：

    • 當(dāng)JavaScript運(yùn)行時(shí)錯(cuò)誤（包括語(yǔ)法錯(cuò)誤）發(fā)生時(shí)，window會(huì)觸發(fā)一個(gè)ErrorEvent接口的error事件，并執(zhí)行window.onerror()。
     window.onerror = function(message, source, lineno, colno, error) { ... }
    • 當(dāng)一項(xiàng)資源（如<img>或<script>）加載失敗，加載資源的元素會(huì)觸發(fā)一個(gè)Event接口的error事件，并執(zhí)行該元素上的onerror()處理函數(shù)。這些error事件不會(huì)向上冒泡到window，不過（至少在Firefox中）能被單一的window.addEventListener捕獲。
    element.onerror = function(event) { ... }

  • onscroll ==> 當(dāng)用戶滾動(dòng)某個(gè)元素的內(nèi)容時(shí) scroll 事件將會(huì)被觸發(fā)

  • scrollTo ==> 滾動(dòng)到文檔中的某個(gè)坐標(biāo)

方法

  • .querySelectorAll() ==> 返回與指定的選擇器組匹配的文檔中的元素列表 (使用深度優(yōu)先的先序遍歷文檔的節(jié)點(diǎn))。返回的對(duì)象是 NodeList

  • .querySelector() ==> 返回文檔中匹配指定的選擇器組的第一個(gè)元素(使用深度優(yōu)先先序遍歷文檔的節(jié)點(diǎn) | 并且通過文檔標(biāo)記中的第一個(gè)元素，并按照子節(jié)點(diǎn)數(shù)量的順序迭代順序節(jié)點(diǎn))。 如果沒有找到匹配元素，則返回 null，如果找到多個(gè)匹配元素，則返回第一個(gè)匹配到的元素。CSS 偽類不會(huì)返回任何元素 //直接可以傳入帶有 # 的 href ，也會(huì)返回正確的標(biāo)簽。參數(shù)是一個(gè)字符串，包含一個(gè)或是多個(gè) CSS 選擇器 ，多個(gè)則以逗號(hào)分隔

  • .getElementById() ==>

  • .getElementsByName() ==>

  • .getElementsByClassName() ==>

  • .getElementsByTagName() ==>

  • .createElement(); ==> 創(chuàng)建由tagName 指定的HTML元素

  • .createTextNode(); ==> 創(chuàng)建一個(gè)新的文本節(jié)點(diǎn)

  • .open() ==> 打開一個(gè)要寫入的文檔。

  • .write() ==> 將一個(gè)文本字符串寫入由 document.open() 打開的一個(gè)文檔流。
    注意： 因?yàn)?document.write 寫入文檔流，在關(guān)閉(已加載)的文檔上調(diào)用 document.write 會(huì)自動(dòng)調(diào)用 document.open，這將清除該文檔

  • .close() ==> 關(guān)閉向當(dāng)前文檔的數(shù)據(jù)寫入

Element 接口

Element（元素）接口是 Document 的一個(gè)對(duì)象. 這個(gè)接口描述了所有相同種類的元素所普遍具有的方法和屬性

屬性

  • .clientHeight ==> 只讀屬性，表示元素的內(nèi)部高度，以像素計(jì)。該屬性包括內(nèi)邊距，但不包括垂直滾動(dòng)條（如果有）、邊框和外邊距

  • .clientWidth ==> 只讀屬性，表示元素的內(nèi)部寬度，以像素計(jì)。該屬性包括內(nèi)邊距，但不包括垂直滾動(dòng)條（如果有）、邊框和外邊距

  • .clientLeft ==> 只讀屬性，表示一個(gè)元素的左邊框的寬度，以像素表示。不包括左外邊距和左內(nèi)邊距

  • .clientTop ==> 只讀屬性，表示一個(gè)元素頂部邊框的寬度，以像素表示。不包括頂部外邊距或內(nèi)邊距

  • .innerHTML ==> 設(shè)置或獲取描述元素后代的HTML語(yǔ)法

  • .scrollHeight ==> 只讀屬性，表示一個(gè)元素的內(nèi)容高度，包括由于溢出導(dǎo)致的視圖中不可見內(nèi)容。包括元素的padding，但不包括元素的border和margin

  • .scrollWidth ==> 只讀屬性，表示一個(gè)元素的內(nèi)容寬度，包括由于溢出導(dǎo)致的視圖中不可見內(nèi)容。包括元素的padding，但不包括元素的border和margin

  • .scrollLeft ==> 讀取或設(shè)置元素滾動(dòng)條到元素左邊的距離

  • .scrollTop ==> 讀取或設(shè)置元素滾動(dòng)條到元素頂部的距離

  • Element.className ==> 獲取并設(shè)置指定元素的class屬性的值?？梢允怯?strong>空格分隔的多個(gè)class屬性值

Element.classList：只讀屬性，返回一個(gè)元素的類屬性的實(shí)時(shí) DOMTokenList集合。
方法：

  • .add() ==> 添加指定的類值。如果這些類已經(jīng)存在于元素的屬性中，那么它們將被忽略。
  • remove() ==> 刪除指定的類值。
  • contains() ==> 檢查元素的類屬性中是否存在指定的類值。
  • item( Number ) ==> 按集合中的索引返回類值。
  • toggle( String ) ==> 當(dāng)只有一個(gè)參數(shù)時(shí)：切換 class value; 即如果類存在，則刪除它并返回false，如果不存在，則添加它并返回true。 
    // div是具有class =“foo bar”的<div>元素的對(duì)象引用
div.classList.remove("foo");

// 如果visible被設(shè)置則刪除它，否則添加它
div.classList.toggle("visible");

//添加或刪除多個(gè)類
div.classList.add("foo","bar");
方法

  • .getAttribute() ==> 返回元素上一個(gè)指定的屬性值。如果指定的屬性不存在，則返回 null 或 "" （空字符串）
    注意：

    1. a.href ==> 獲取 a 的 href，帶有 http://，是被瀏覽器處理過了
    2. a.getAttribute() ==> 獲取 a 的 href ，不帶有 http://，用戶的寫入

  • .setAttribute() ==> 設(shè)置指定元素上的一個(gè)屬性值。如果屬性已經(jīng)存在，則更新該值; 否則將添加一個(gè)新的屬性用指定的名稱和值。

  • .removeAttribute() ==> 從指定的元素中刪除一個(gè)屬性。

HTMLElement 接口

HTMLElement 接口表示所有的 HTML 元素。一些 HTML 元素直接實(shí)現(xiàn)了 HTMLElement 接口，其它的間接實(shí)現(xiàn) HTMLElement 接口

屬性

  • HTMLElement.offsetHeight ==> 只讀屬性，它返回該元素的像素高度，包含該元素的垂直內(nèi)邊距（padding）和邊框（border）

  • HTMLElement.offsetWidth ==> 只讀屬性，它返回該元素的像素寬度，包含該元素的垂直內(nèi)邊距（padding）和邊框（border）

  • HTMLElement.offsetTop ==> 為只讀屬性，它返回當(dāng)前元素相對(duì)于其 offsetParent 元素的頂部的距離

  • HTMLElement.offsetLeft ==> 為只讀屬性，返回當(dāng)前元素左上角相對(duì)于 HTMLElement.offsetParent 節(jié)點(diǎn)的左邊界偏移的像素值。

  • HTMLElement.offsetParent ==> 只讀屬性，返回一個(gè)指向最近的包含該元素的定位元素。

方法

  • HTMLElement.blur() ==> 移除當(dāng)前元素所獲得的鍵盤焦點(diǎn)

  • HTMLElement.click ==> 模擬鼠標(biāo)左鍵單擊一個(gè)元素

  • HTMLElement.focus ==> 設(shè)置指定元素獲取焦點(diǎn)

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容