DOM 核心

EventTarget (继承事件)  --> Node 对象　　　　-->  Document

[addEventListener]　　　　  [baseURI]　　　　　　  DocumentFragment

 

[removeEventListener]　　   [isConnected]　　　　  Characterdata


[dispatchEvent]　　　         [textContent]　　　　        Text

　　　　　　　　　　　　    [nodeName]　　　　　      Attr

　　　　　　　　　　　　　 [nodeType]　　　　　       CDATASection

　　　　　　　　　　　　    [nodeValue]                     Comment

　　　　　　　　　　　　　 ......              　　　　   Notification

　　　　　　　　　　　　　　　　　　　　　　　　  Element　　　　　　　　-->  HTMLElement　　-->  HTMLInputElement

　　　　　　　　　　　　　　　　　　　　　　　　　　　[classlist]　　　　　　　  SVGElement　　　　　HTMLImageElement

　　　　　　　　　　　　　　　　　　　　　　　　　　　[attributes]　　　　　　　　　　　　　　　　　  创建对象 API document.createElement(element.tagName)

　　　　　　　　　　　　　　　　　　　　　　　　　　   [className]　　　　　　  　　　　　　　　　　  ......

　　　　　　　　　　　　　　　　　　　　　　　　　　   [innerHTML]

　　　　　　　　　　　　　　　　　　　　　　　　　　   [outerHTML]

　　　　　　　　　　　　　　　　　　　　　　　　　　　[scrollTop]

　　　　　　　　　　　　　　　　　　　　　　　　　　　[shadowRoot]

　　　　　　　　　　　　　　　　　　　　　　　　　　　......

　　　　　　　　　　　　　　　　　　　　　　　　　　　e_onfullscreenchange

　　　　　　　　　　　　　　　　　　　　　　　　　　　e_getBoundingClientRect

　　　　　　　　　　　　　　　　　　　　　　　　　　　......

 

上述呈现的是 DOM继承关系, 可以看出:

　　HTMLELement 对象 ->  Element 对象 -> Node对象 -> EventTarget 对象;

　　

举例来说, 一个 HTMLInputElement 输入框

除开本身拥有的 setRangeText(), accept/disabled ... 等一些私有的属性/方法之外,

　　继承了 HTMLElement对象的方法, 比如: click(),  offsetLeft/style ... 等等


　　　　而 HTMLElement对象又继承了 Element对象, 因此可以使用 scrollTo(), tagName/scrollTop/classlist ... 这些属性或方法

　　　　　　Element对象又继承了 Node对象, 因此可以使用 appendChild(), nodeType/nodeValue/textContent ... 这些属性或方法

　　　　　　　　Node对象继承了 EventTarget, 因此可以接受事件, 或创建事件侦听

 

DOM (Document Object Model)——文档对象模型, 是用来呈现以及与任意 HTML 或 XML文档交互的API。

它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容. 

 

 

 

参考: https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget

　　  https://developer.mozilla.org/zh-CN/docs/Web/API/Node

　　  https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLInputElement

　　  https://developer.mozilla.org/zh-CN/docs/Glossary/DOM

　　  https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model

　　  https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduction