小編給大家分享一下怎么生成一個完整的HTML對象，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

十載的保靖網(wǎng)站建設經(jīng)驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設備顯示端的尺寸不同，自動調(diào)整保靖建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)從事“保靖網(wǎng)站設計”,“保靖網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

EventTarget

定義

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

作用

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

該接口的方法

EventTarget.addEventListener()

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

EventTarget.removeEventListener()

EventTarget中刪除事件偵聽器。

EventTarget.dispatchEvent()

將事件分派到此EventTarget。

我們自己實現(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是一個接口，許多DOM類型從這個接口繼承，并允許類似地處理（或測試）這些各種類型。Node是一個接口，許多DOM類型從這個接口繼承，并允許類似地處理（或測試）這些各種類型。

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

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

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

屬性

Node.baseURI

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

Node.childNodes

返回一個包含了該節(jié)點所有子節(jié)點的實時的NodeList。NodeList 是“實時的”意思是，如果該節(jié)點的子節(jié)點發(fā)生了變化，NodeList對象就會自動更新。

Node.firstChild

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

Node.lastChild

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

方法

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

Node.appendChild()

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

Node.contains()

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

Node.cloneNode()

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

Element

說明

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

屬性

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

Element.assignedSlot

返回元素對應的 HTMLSlotElement 接口

Element.attributes

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

Element.classList

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

Element.className

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

方法

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

Element.closest()

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

Element.getAttribute()

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

Element.getElementsByClassName()

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

HTMLElement

作用

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

屬性

那么重點來了！
繼承自父接口Element和 GlobalEventHandlers的屬性。  
HTMLElement.accessKey   DOMString   獲取/設置元素訪問的快捷鍵
HTMLElement.accessKeyLabel   DOMString   返回一個包含元素訪問的快捷鍵的字符串（只讀）
HTMLElement.contentEditable   DOMString   獲取/設置元素的可編輯狀態(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   元素失去焦點
HTMLElement.click()   void   觸發(fā)元素的點擊事件
HTMLElement.focus()   void   元素獲得焦點
HTMLElement.forceSpellCheck()   void

GlobalEventHandlers

定義

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

屬性

GlobalEventHandlers.onabort

中斷事件。

GlobalEventHandlers.onblur

失去焦點事件。

GlobalEventHandlers.onfocus

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

元素接口

該接口用于創(chuàng)建對應的元素。
如：
HTMLpElement 接口提供了一些特殊屬性（它也繼承了通常的 HTMLElement 接口）來操作p元素。
HTMLFormElement接口可以創(chuàng)建或者修改

對象;它繼承了HTMLElement接口的方法和屬性。
HTMLAnchorElement 接口表示超鏈接元素，并提供一些特別的屬性和方法（除了那些繼承自普通 HTMLElement對象接口的之外）以用于操作這些元素的布局和顯示。
......

回答前面問題

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

end：

看完了這篇文章，相信你對怎么生成一個完整的HTML對象有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

標題名稱：怎么生成一個完整的HTML對象-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://weahome.cn/article/dsgiji.html