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。
它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容.
DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合
DOM由开始和JavaScript交织在一起的,演变成了与特定编程语言相独立的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