偷影子的人

# DOM

DOM (opens new window) 是 HTML 和 XML 文档的编程接口。

文档对象模型 (opens new window)提供了对文档的结构化表述，并定义了一种方式从程序中对该结构进行访问，从而改变文档的结构，样式和内容。

# 一、事件

在整个 Web 中，事件 (opens new window)被分派到对象以表示事件的发生，例如网络活动或用户交互。

这些对象实现了 EventTarget (opens new window) 接口，因此可以通过调用 addEventListener() (opens new window) 添加事件监听器来观察事件。

# Event

Event (opens new window) 接口表示在 DOM 中出现的事件，它允许发出发生了什么的信号，例如，图像已完成下载。

实例属性：

实例方法：

# EventTarget

EventTarget (opens new window) 接口由可以接收事件、并且可以创建侦听器的对象实现。

DOM 节点的事件操作，都定义在 EventTarget (opens new window) 接口。

所有节点对象都实现了这个接口，其他一些需要事件通信的浏览器内置对象，比如，XMLHttpRequest、AudioNode、AudioContext 也实现了这个接口。

每个 EventTarget (opens new window) 对象都有一个关联的事件侦听器列表，它最初是空列表。

实例方法：

# 二、节点

# Node

Node (opens new window) 是一个接口，各种类型的 DOM API 对象会从这个接口继承。

实例方法：

  • node.appendChild (opens new window)()

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

    let a = document.createElement('a');
a.textContent = 'Click here to visit example.com';
a.href = 'https://www.baidu.com/';

document.body.appendChild(a);

  • node.removeChild (opens new window)()

    从 DOM 中移除一个子节点，并返回移除的节点。

    document.body.removeChild(a);

# Element

Element (opens new window) 是最通用的基类，Document (opens new window) 中的所有元素对象都继承自它。

实例方法：

  • element.getAttribute (opens new window)(attributeName)

    返回元素上指定的属性值。如果指定的属性不存在，则返回 null 或 ""。

    let attribute = element.getAttribute(attributeName);

  • element.setAttribute (opens new window)(name, value)

    设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。

    element.setAttribute(name, value);

# Document

Document (opens new window) 接口表示浏览器中加载的任何网页，并充当进入 DOM 树的入口。

实例方法：

# ParentNode

在 DOM 中，ParentNode (opens new window) 是一个混入（mixin），它包含了一些方法和属性，这些方法和属性对所有可以拥有子节点的 Node 对象都是通用的。

具体来说，ParentNode (opens new window) 由三个对象实现：Element 对象、Document 对象和 DocumentFragment 对象。

任何可以包含子节点的对象都会具有 ParentNode 中定义的那些方法和属性。

例如，像 children (opens new window)、firstElementChild (opens new window)、lastElementChild (opens new window) 这样的属性，以及像 append (opens new window)、prepend (opens new window) 这样的操作子节点的方法，都是 ParentNode 提供的。

实例方法：