怎么生成一個完整的HTML對象

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

創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的平陰網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

EventTarget

定義

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

作用

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

該接口的方法

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元素的基礎(chǔ)接口，而 SVGElement 接口是所有SVG元素的基本接口。
在web以外的語言，像 XUL 可以通過 XULElement 的API，也能實現(xiàn)它。

屬性

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

Element.assignedSlot

返回元素對應(yīng)的 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 獲取/設(shè)置元素訪問的快捷鍵
HTMLElement.accessKeyLabel DOMString 返回一個包含元素訪問的快捷鍵的字符串（只讀）
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 元素失去焦點
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)建對應(yīng)的元素。
如：
HTMLpElement 接口提供了一些特殊屬性（它也繼承了通常的 HTMLElement 接口）來操作p元素。
HTMLFormElement接口可以創(chuàng)建或者修改<form>對象;它繼承了HTMLElement接口的方法和屬性。
HTMLAnchorElement 接口表示超鏈接元素，并提供一些特別的屬性和方法（除了那些繼承自普通 HTMLElement對象接口的之外）以用于操作這些元素的布局和顯示。
......

回答前面問題

通過上面的知識，我們了解到：
HTMLpElement（其他元素接口）繼承 HTMLElement 和 GlobalEventHandlers 接口。
HTMLElement 繼承 Element 接口。
Element 繼承 Node 接口。
Node 繼承 EventTarget 接口。
怎么生成一個完整的HTML對象為什么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：只有通過上面的繼承關(guān)系，我們得到的 DOM 元素才是一個完整的 HTML 對象，我們才能為它設(shè)置/獲取屬性、綁定事件、添加樣式類等操作。

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

新聞名稱：怎么生成一個完整的HTML對象
分享鏈接：http://bm7419.com/article44/ipogee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站、品牌網(wǎng)站建設(shè)、外貿(mào)建站、營銷型網(wǎng)站建設(shè)、微信公眾號

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容