一个完备的HTML对象有哪些样的，怎样生成？

对html对象，第一要先提到Node节点，Node是一个接口，很多DOM类型从这个接口继承，并允许相似地处置（或测试）这些各品种型。有那些接口重Node继承其办法和属性？先看看本文章吧。apachephpmysql 对html对象，第一要先提到Node节点，Node是一个接口，很多DOM类型从这个接口继承，并允许相似地处置（或测试）这些各品种型。有那些接口重Node继承其办法和属性？先看看本文章吧。apache php mysql

为什么写这篇文章？

你可能做Web开发已经有一段工夫，你可否有想过以下题目呢？
为何p元素甚至是所有的html元素都可以运用addEventListener来增加事件呢？
为何每个DOM节点都有parentNode、firstChild、nodeType等属性呢？
为何每个DOM元素都有className、classList、innerHTML等属性呢？
为何有些DOM元素有accessKey、contentEditable、isContentEditable等属性呢？
为何每个DOM元素都有onclick、ondblclick、ondrag等属性？
本文就是来解答这些简略而又不“简略”的题目。

EventTarget

定义

EventTarget 是一个由可以接收事件的对象实现的接口，而且可认为它们新建侦听器。

作用

Element，document 和 window 是最常见的事件指标，但是其他对象也可以是事件指标，比方XMLHttpRequest，AudioNode，AudioContext 等等。
很多事件指标（包含元素，文档和 window）还支撑通过 onXXX（如onclick） 属性和属性设定事件处置程序。

该接口的办法

EventTarget.addEventListener()

在EventTarget上注册特定事件类型的事件处置程序。

EventTarget.removeEventListener()

EventTarget中删除事件侦听器。

EventTarget.dispatchEvent()

将事件分派到此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 < 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：在办法和属性不相干的特定状况下，这些接口可能返回null。它们可能会抛出异样 - 例如，当将子节点增加到不允许子节点存在的节点时。

接口相干的属性和办法

属性

Node.baseURI

返回一个表示base URL的DOMString。不一样说话中的base URL的概念都不同。 在HTML中，base URL表示协定和域名，以及不断到最后一个'/'以前的文件名目。

Node.childNodes

返回一个包括了该节点所有子节点的实时的NodeList。NodeList 是“实时的”意思是，要是该节点的子节点产生了变化，NodeList对象就会主动更新。

Node.firstChild

返回该节点的首先个子节点，要是该节点没有子节点则返回null。

Node.lastChild

返回该节点的最后一个子节点，要是该节点没有子节点则返回null。
此处省去若干Node接口属性，更多属性查看这里。

办法

那么重点来了！
重点：从其父类EventTarget继承了addEventListener、removeEventListener、dispatchEvent等办法。

Node.appendChild()

将一个节点增加到指定父节点的子节点列表末尾。

Node.contains()

返回的是一个布尔值，来表示传入的节点可否为该节点的后代节点。

Node.cloneNode()

返回调取该办法的节点的一个副本。
此处省去若干Node接口办法，更多办法查看这里。

Element

注明

Element是非常通用的基类，所有 Document对象下的对象都继承它。这个接口描述了所有雷同品种的元素所普遍拥有的办法和属性。 这些继承自Element而且添加了一些额外功能的接口描述了概括的行为。
PS：HTMLElement 接口是所有HTML元素的根基接口， 而 SVGElement 接口是所有SVG元素的根本接口。
在web之外的说话，像 XUL 可以通过 XULElement 的API，也能实现它。

属性

所有属性继承至它的先人接口 Node, 和它所扩展的接口 EventTarget, 而且从下列局部继承了属性ParentNode, ChildNode, NonDocumentTypeChildNode, 和Animatable.

Element.assignedSlot

返回元素对应的 HTMLSlotElement 接口

Element.attributes

返回一个与该元素相干的所有属性汇合NamedNodeMap

Element.classList

返回该元素包括的class属性是一个DOMTokenList.

Element.className

它是一个 DOMString 表示这个元素的class.
此处省去若干Element接口属性，更多办法查看这里。

办法

那么重点来了！
从它的父类（Node）和它父类的父类（EventTarget）继承办法，并实现parentNode、ChildNode、NonDocumentTypeChildNode、Animatable。
此处省去若干Element接口办法，更多办法查看这里。

Element.closest()

办法用来猎取匹配特定选中器且离目前元素比来的先人元素（也可以是目前元素自身）。要是匹配不到，则返回 null。

Element.getAttribute()

返回元素上一个指定的属性值。要是指定的属性不存在，则返回 null 或 "" （空字符串）。

Element.getElementsByClassName()

参数中给出类的列表，返回一个动态的 HTMLCollection ，这里面包括了所有持有这些类的后代元素。
此处省去若干Element接口办法，更多办法查看这里。

HTMLElement

作用

HTMLElement 接口表示所有的 HTML 元素。一些HTML元素直接实现了HTMLElement接口，其它的间接实现HTMLElement接口。

属性

那么重点来了！
继承自父接口Element和 GlobalEventHandlers的属性。
HTMLElement.accessKey DOMString 猎取/设定元素拜访的快捷键
HTMLElement.accessKeyLabel DOMString 返回一个包括元素拜访的快捷键的字符串（只读）
HTMLElement.contentEditable DOMString 猎取/设定元素的可编纂状态
HTMLElement.isContentEditable Boolean 表白元素的内容可否可编纂（只读）
此处省去若干HTMLElement接口属性，更多办法查看这里。

Event handlers

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

办法

HTMLElement.blur() void 元素失去焦点
HTMLElement.click() void 触发元素的点击事件
HTMLElement.focus() void 元素获得焦点
HTMLElement.forceSpellCheck() void

GlobalEventHandlers

定义

GlobalEventHandlers接口描述了事件处置程序像HTMLElement常见的几个接口,文件,窗口,或WorkerGlobalScope Web Workers。这些接口可以实现更多的事件处置程序。

属性

GlobalEventHandlers.onabort

中止事件。

GlobalEventHandlers.onblur

失去焦点事件。

GlobalEventHandlers.onfocus

猎取焦点事件。
此处省去若干GlobalEventHandlers接口属性，更多办法查看这里。

元素接口

该接口用于新建对应的元素。
如：
HTMLpElement 接口供给了一些特别属性（它也继承了平常的 HTMLElement 接口）来操纵p元素。
HTMLFormElement接口可以新建或者修改

对象;它继承了HTMLElement接口的办法和属性。
HTMLAnchorElement 接口表示超链接元素，并供给一些特殊的属性和办法（除了那些继承自普通 HTMLElement对象接口的以外）以用于操纵这些元素的布局和显示。
......

答复前面题目

通过上面的见识，我们理解到：
HTMLpElement（其他元素接口） 继承 HTMLElement 和 GlobalEventHandlers 接口。
HTMLElement 继承 Element 接口。
Element 继承 Node 接口。
Node 继承 EventTarget 接口。
那么重点来了！

end：只要通过上面的继承关系，我们得到的 DOM 元素才是一个完备的 HTML 对象，我们才干为它设定/猎取属性、绑定事件、增加样式类等操纵。

相干文章：

怎样推断出一个js对象可否一个dom对象

数据库完备性有哪些概念？

相干视频：

HTML5 完备版手册

以上就是一个完备的HTML对象有哪些样的，怎样生成？的细致内容，更多请关注 百分百源码网 其它相干文章！