JS系列 -- JavaScript DOM API

概述

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

  2. JS 中的對象繼承自 Object ，頁面中的對象繼承自 Node 函數。
    Model 將頁面中的 Document（html、head、body）和內存中的 Object 一一映射。

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

  4. 內存中的 Object 是一個個 node （構造函數），其包括：

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

  5. DOM 功能：頁面中的節(jié)點通過構造函數構造出對應的對象

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

API

Node 接口

Node 派生自Object
Node是一個接口，許多DOM類型從這個接口繼承，并允許類似地處理（或測試）這些各種類型。

屬性

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

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

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

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

  • .previouSibling ==> 返回當前節(jié)點的前一個兄弟節(jié)點,沒有則返回null。可能會獲取到文本節(jié)點

  • .nodeName ==> 返回當前節(jié)點的節(jié)點名稱（svg 標簽返回小寫字母，其余返回大寫字母）

  • .nodeValue ==> 返回或設置當前節(jié)點的值

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

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

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

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

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

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

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

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

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

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

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

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

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

  • .hasChildNodes( ); ==> 返回一個布爾值,表明當前節(jié)點是否包含有子節(jié)點

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

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

Document 接口

Document 接口提供了一些在瀏覽器服務中作為頁面內容入口點而加載的一些頁面，也就是 DOM 樹

屬性

  • .body ==> 返回當前文檔的 <body> 元素

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

  • .childElementCount ==> 只讀屬性，返回一個無符號長整型數字，表示給定元素的子元素數

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

  • .documentElement 是一個會返回文檔對象（document）的根元素（如HTML文檔的 <html> 元素）

  • .domain ==> 獲取/設置當前文檔的原始域部分, 用于同源策略

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

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

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

  • .referrer ==> 返回跳轉或打開到當前頁面的那個頁面的URI

  • .onkeypress ==> 用來獲取或設置當前元素的keypress事件的事件處理函數

  • .onclick ==> 返回當前元素的 click 事件句柄代碼

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

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

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

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

PC端：

  • .onmousedown ==> 用來獲取或設置當前元素的mousedown事件的事件處理函數

  • .onmousemove ==> 用來獲取或設置當前元素的mousemove事件的事件處理函數。（當用戶在當前元素上移動鼠標時會觸發(fā)mousemove事件.）。mdn上有 1.顯示"提示層"時onmousemove的用法. 2.在進行拖拽操作時onmousemove的用法

  • .onmouseup ==> 用來獲取或設置當前元素的mouseup事件的事件處理函數

移動端：

  • .ontouchstart ==> 當觸點與觸控設備表面接觸時觸發(fā) ontouchstart 事件

  • .ontouchmove ==> 當觸點與觸控設備表面移動時觸發(fā) ontouchstart 事件

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

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

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

  • onscroll ==> 當用戶滾動某個元素的內容時 scroll 事件將會被觸發(fā)

  • scrollTo ==> 滾動到文檔中的某個坐標

方法

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

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

  • .getElementById() ==>

  • .getElementsByName() ==>

  • .getElementsByClassName() ==>

  • .getElementsByTagName() ==>

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

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

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

  • .write() ==> 將一個文本字符串寫入由 document.open() 打開的一個文檔流。
    注意： 因為 document.write 寫入文檔流，在關閉(已加載)的文檔上調用 document.write 會自動調用 document.open，這將清除該文檔

  • .close() ==> 關閉向當前文檔的數據寫入

Element 接口

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

屬性

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

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

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

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

  • .innerHTML ==> 設置或獲取描述元素后代的HTML語法

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

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

  • .scrollLeft ==> 讀取或設置元素滾動條到元素左邊的距離

  • .scrollTop ==> 讀取或設置元素滾動條到元素頂部的距離

  • Element.className ==> 獲取并設置指定元素的class屬性的值。可以是由空格分隔的多個class屬性值

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

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

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

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

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

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

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

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

HTMLElement 接口

HTMLElement 接口表示所有的 HTML 元素。一些 HTML 元素直接實現了 HTMLElement 接口，其它的間接實現 HTMLElement 接口

屬性

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

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

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

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

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

方法

  • HTMLElement.blur() ==> 移除當前元素所獲得的鍵盤焦點

  • HTMLElement.click ==> 模擬鼠標左鍵單擊一個元素

  • HTMLElement.focus ==> 設置指定元素獲取焦點

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容