dom 文档树的节点类型

参考 lib.dom.d.ts，与 Dom 树相关的节点类型

• Element
• Document
• Node
• NodeList
• 其他类型

类型关系

1. Node (继承EventTarget)

node 组成了文档树。

interface Node extends EventTarget {
  // 核心属性
    // nodeName
    // nodeType
    // nodeValue
    // childNodes
}

1.1 nodeType

节点类型		nodeName 返回	nodeValue 返回
1	Element	元素名	null
2	Attr	属性名称	属性值
3	Text	#text	节点的内容
4	CDATASection	#cdata-section	节点的内容
5	EntityReference	实体引用名称	null
6	Entity	实体名称	null
7	ProcessingInstruction	target	节点的内容
8	Comment	#comment	注释文本
9	Document	#document	null
10	DocumentType	文档类型名称	null
11	DocumentFragment	#document 片段	null
12	Notation	符号名称	null

2. EventTarget

• addEventListener
• removeEventListener
• dispatchEvent

/** EventTarget is a DOM interface implemented by objects that can receive events and may have listeners for them. */
interface EventTarget {
    /**
     * Appends an event listener for events whose type attribute value is type. The callback argument sets the callback that will be invoked when the event is dispatched.
     *
     * The options argument sets listener-specific options. For compatibility this can be a boolean, in which case the method behaves exactly as if the value was specified as options's capture.
     *
     * When set to true, options's capture prevents callback from being invoked when the event's eventPhase attribute value is BUBBLING_PHASE. When false (or not present), callback will not be invoked when event's eventPhase attribute value is CAPTURING_PHASE. Either way, callback will be invoked if event's eventPhase attribute value is AT_TARGET.
     *
     * When set to true, options's passive indicates that the callback will not cancel the event by invoking preventDefault(). This is used to enable performance optimizations described in § 2.8 Observing event listeners.
     *
     * When set to true, options's once indicates that the callback will only be invoked once after which the event listener will be removed.
     *
     * The event listener is appended to target's event listener list and is not appended if it has the same type, callback, and capture.
     */
    addEventListener(type: string, listener: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions): void;
    /**
     * Dispatches a synthetic event event to target and returns true if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise.
     */
    dispatchEvent(event: Event): boolean;
    /**
     * Removes the event listener in target's event listener list with the same type, callback, and options.
     */
    removeEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean): void;
}

3. HTMLElement (继承 Element)

是所有的 html 元素的类型定义，其他具体的 html 元素继承这个类。比如：

• HTMLDivElement div
• HTMLCanvasElement canvas
• HTMLSpanElement span
• HTMLUListElement ul
• 等等其他的 html 标签

interface HTMLElement extends Element, DocumentAndElementEventHandlers, ElementCSSInlineStyle, ElementCSSInlineStyle, ElementContentEditable, GlobalEventHandlers, HTMLOrSVGElement {
}

4. Element (继承 Node)

interface Element extends Node, Animatable, ChildNode, InnerHTML, NonDocumentTypeChildNode, ParentNode, Slottable {
}

5. Document (继承 Node)

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问，其 documentElement 属性指向文档的 root node。

interface Document extends Node, DocumentAndElementEventHandlers, DocumentOrShadowRoot, GlobalEventHandlers, NonElementParentNode, ParentNode, XPathEvaluatorBase {
    /**
     * Gets a reference to the root node of the document.
     */
    readonly documentElement: HTMLElement;
    // other prop 
}