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

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

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

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

EventTarget中刪除事件偵聽器。

將事件分派到此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 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 i++) { stack[i].call(this, event); return !event.defaultPrevented;};

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

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í)。

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

返回一個(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)更新。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

中斷事件。

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

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

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

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

相關(guān)文章：

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

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

相關(guān)視頻：

HTML5 完整版手冊(cè)

以上就是一個(gè)完整的HTML對(duì)象是什么樣的，如何生成？的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。