為何寫(xiě)這篇文章？

你可能做Web開(kāi)發(fā)已經(jīng)有一段時(shí)間，你是否有想過(guò)下列問(wèn)題呢？
為什么p元素甚至是所有的html元素都可以使用addEventListener來(lái)添加事件呢？
為什么每個(gè)DOM節(jié)點(diǎn)都有parentNode、firstChild、nodeType等屬性呢？
為什么每個(gè)DOM元素都有className、classList、innerHTML等屬性呢？
為什么有些DOM元素有accessKey、contentEditable、isContentEditable等屬性呢？
為什么每個(gè)DOM元素都有onclick、ondblclick、ondrag等屬性？
本文就是來(lái)解答這些簡(jiǎn)單而又不“簡(jiǎn)單”的問(wèn)題。

EventTarget

定義

EventTarget 是一個(gè)由可以接收事件的對(duì)象實(shí)現(xiàn)的接口，并且可以為它們創(chuàng)建偵聽(tīng)器。

作用

Element，document 和 window 是最常見(jiàn)的事件目標(biāo)，但是其他對(duì)象也可以是事件目標(biāo)，比如XMLHttpRequest，AudioNode，AudioContext 等等。
許多事件目標(biāo)（包括元素，文檔和 window）還支持通過(guò) onXXX（如onclick） 屬性和屬性設(shè)置事件處理程序。

該接口的方法

EventTarget.addEventListener()

在EventTarget上注冊(cè)特定事件類(lèi)型的事件處理程序。

EventTarget.removeEventListener()

EventTarget中刪除事件偵聽(tīng)器。

EventTarget.dispatchEvent()

將事件分派到此EventTarget。

我們自己實(shí)現(xiàn)EventTarget

var EventTarget = function() {
  this.listeners = {};
};

EventTarget.prototype.listeners = null;
EventTarget.prototype.addEventListener = function(type, callback) {
  if (!(type in this.listeners)) {
    this.listeners[type] = [];
  }
  this.listeners[type].push(callback);
};

EventTarget.prototype.removeEventListener = function(type, callback) {
  if (!(type in this.listeners)) {
    return;
  }
  var stack = this.listeners[type];
  for (var i = 0, l = stack.length; i < l; i++) {
    if (stack[i] === callback){
      stack.splice(i, 1);
      return;
    }
  }
};

EventTarget.prototype.dispatchEvent = function(event) {
  if (!(event.type in this.listeners)) {
    return true;
  }
  var stack = this.listeners[event.type].slice();

  for (var i = 0, l = stack.length; i < l; i++) {
    stack[i].call(this, event);
  }
  return !event.defaultPrevented;
};

Node

定義

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

有那些接口重Node繼承其方法和屬性？

Document, Element, CharacterData (which Text, Comment, and CDATASection inherit), ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference
PS：在方法和屬性不相關(guān)的特定情況下，這些接口可能返回null。它們可能會(huì)拋出異常 - 例如，當(dāng)將子節(jié)點(diǎn)添加到不允許子節(jié)點(diǎn)存在的節(jié)點(diǎn)時(shí)。

接口相關(guān)的屬性和方法

屬性

Node.baseURI

返回一個(gè)表示base URL的DOMString。不同語(yǔ)言中的base URL的概念都不一樣。 在HTML中，base URL表示協(xié)議和域名，以及一直到最后一個(gè)'/'之前的文件目錄。

Node.childNodes

返回一個(gè)包含了該節(jié)點(diǎn)所有子節(jié)點(diǎn)的實(shí)時(shí)的NodeList。NodeList 是“實(shí)時(shí)的”意思是，如果該節(jié)點(diǎn)的子節(jié)點(diǎn)發(fā)生了變化，NodeList對(duì)象就會(huì)自動(dòng)更新。

Node.firstChild

返回該節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)，如果該節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)則返回null。

Node.lastChild

返回該節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)，如果該節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)則返回null。
此處省略若干Node接口屬性，更多屬性查看這里。

方法

那么重點(diǎn)來(lái)了！
重點(diǎn)：從其父類(lèi)EventTarget繼承了addEventListener、removeEventListener、dispatchEvent等方法。

Node.appendChild()

將一個(gè)節(jié)點(diǎn)添加到指定父節(jié)點(diǎn)的子節(jié)點(diǎn)列表末尾。

Node.contains()

返回的是一個(gè)布爾值，來(lái)表示傳入的節(jié)點(diǎn)是否為該節(jié)點(diǎn)的后代節(jié)點(diǎn)。

Node.cloneNode()

返回調(diào)用該方法的節(jié)點(diǎn)的一個(gè)副本。
此處省略若干Node接口方法，更多方法查看這里。

Element

說(shuō)明

Element是非常通用的基類(lèi)，所有 Document對(duì)象下的對(duì)象都繼承它。這個(gè)接口描述了所有相同種類(lèi)的元素所普遍具有的方法和屬性。 這些繼承自Element并且增加了一些額外功能的接口描述了具體的行為。
PS：HTMLElement 接口是所有HTML元素的基礎(chǔ)接口， 而 SVGElement 接口是所有SVG元素的基本接口。
在web以外的語(yǔ)言，像 XUL 可以通過(guò) XULElement 的API，也能實(shí)現(xiàn)它。

屬性

所有屬性繼承至它的祖先接口 Node, 和它所擴(kuò)展的接口 EventTarget, 并且從以下部分繼承了屬性ParentNode, ChildNode, NonDocumentTypeChildNode, 和Animatable.

Element.assignedSlot

返回元素對(duì)應(yīng)的 HTMLSlotElement 接口

Element.attributes

返回一個(gè)與該元素相關(guān)的所有屬性集合NamedNodeMap

Element.classList

返回該元素包含的class屬性是一個(gè)DOMTokenList.

Element.className

它是一個(gè) DOMString 表示這個(gè)元素的class.
此處省略若干Element接口屬性，更多方法查看這里。

方法

那么重點(diǎn)來(lái)了！
從它的父類(lèi)（Node）和它父類(lèi)的父類(lèi)（EventTarget）繼承方法，并實(shí)現(xiàn)parentNode、ChildNode、NonDocumentTypeChildNode、Animatable。
此處省略若干Element接口方法，更多方法查看這里。

Element.closest()

方法用來(lái)獲取匹配特定選擇器且離當(dāng)前元素最近的祖先元素（也可以是當(dāng)前元素本身）。如果匹配不到，則返回 null。

Element.getAttribute()

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

Element.getElementsByClassName()

參數(shù)中給出類(lèi)的列表，返回一個(gè)動(dòng)態(tài)的 HTMLCollection ，這里面包含了所有持有這些類(lèi)的后代元素。
此處省略若干Element接口方法，更多方法查看這里。

HTMLElement

作用

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

屬性

那么重點(diǎn)來(lái)了！
繼承自父接口Element和 GlobalEventHandlers的屬性。
HTMLElement.accessKey DOMString 獲取/設(shè)置元素訪(fǎng)問(wèn)的快捷鍵
HTMLElement.accessKeyLabel DOMString 返回一個(gè)包含元素訪(fǎng)問(wèn)的快捷鍵的字符串（只讀）
HTMLElement.contentEditable DOMString 獲取/設(shè)置元素的可編輯狀態(tài)
HTMLElement.isContentEditable Boolean 表明元素的內(nèi)容是否可編輯（只讀）
此處省略若干HTMLElement接口屬性，更多方法查看這里。

Event handlers

HTMLElement.onTouchStart
HTMLElement.onTouchEnd
HTMLElement.onTouchMove
HTMLElement.onTouchEnter
HTMLElement.onTouchLeave
HTMLElement.onTouchCancel

方法

HTMLElement.blur() void 元素失去焦點(diǎn)
HTMLElement.click() void 觸發(fā)元素的點(diǎn)擊事件
HTMLElement.focus() void 元素獲得焦點(diǎn)
HTMLElement.forceSpellCheck() void

GlobalEventHandlers

定義

GlobalEventHandlers接口描述了事件處理程序像HTMLElement常見(jiàn)的幾個(gè)接口,文件,窗口,或WorkerGlobalScope Web Workers。這些接口可以實(shí)現(xiàn)更多的事件處理程序。

屬性

GlobalEventHandlers.onabort

中斷事件。

GlobalEventHandlers.onblur

失去焦點(diǎn)事件。

GlobalEventHandlers.onfocus

獲取焦點(diǎn)事件。
此處省略若干GlobalEventHandlers接口屬性，更多方法查看這里。

元素接口

該接口用于創(chuàng)建對(duì)應(yīng)的元素。
如：
HTMLpElement 接口提供了一些特殊屬性（它也繼承了通常的 HTMLElement 接口）來(lái)操作p元素。
HTMLFormElement接口可以創(chuàng)建或者修改<form>對(duì)象;它繼承了HTMLElement接口的方法和屬性。
HTMLAnchorElement 接口表示超鏈接元素，并提供一些特別的屬性和方法（除了那些繼承自普通 HTMLElement對(duì)象接口的之外）以用于操作這些元素的布局和顯示。
......

回答前面問(wèn)題

通過(guò)上面的知識(shí)，我們了解到：
HTMLpElement（其他元素接口） 繼承 HTMLElement 和 GlobalEventHandlers 接口。
HTMLElement 繼承 Element 接口。
Element 繼承 Node 接口。
Node 繼承 EventTarget 接口。
為什么p元素甚至是所有的html元素都可以使用addEventListener來(lái)添加事件呢？
回答：從 EventTarget 接口中繼承而來(lái)。
為什么每個(gè)DOM節(jié)點(diǎn)都有parentNode、firstChild、nodeType等屬性呢？
回答：從 Node 接口中繼承而來(lái)。
為什么每個(gè)DOM元素都有className、classList、innerHTML等屬性呢？
回答：從 Element 接口中繼承而來(lái)。
為什么有些DOM元素有accessKey、contentEditable、isContentEditable等屬性呢？
回答：從 HTMLElement 接口中繼承而來(lái)。
為什么每個(gè)DOM元素都有onclick、ondblclick、ondrag等屬性？
回答：從 GlobalEventHandlers 接口中繼承而來(lái)。
那么重點(diǎn)來(lái)了！

end：只有通過(guò)上面的繼承關(guān)系，我們得到的 DOM 元素才是一個(gè)完整的 HTML 對(duì)象，我們才能為它設(shè)置/獲取屬性、綁定事件、添加樣式類(lèi)等操作。

相關(guān)文章：

如何判斷出一個(gè)js對(duì)象是否一個(gè)dom對(duì)象

數(shù)據(jù)庫(kù)完整性是什么概念？

相關(guān)視頻：

HTML5 完整版手冊(cè)

以上就是一個(gè)完整的HTML對(duì)象是什么樣的，如何生成？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！