element原理

1. Element 的基本结构

Element 接口继承了 Node 接口和 EventTarget 接口，因此可以：

• 使用 Node 的方法来操作 DOM 树，比如 appendChild、removeChild 等。
• 使用 EventTarget 的方法来处理事件，比如 addEventListener。

2. Element 的常见属性

Element 提供了以下常用的属性：

• tagName：返回元素的标签名，例如 "DIV"、"P" 等。
• id：获取或设置元素的 id。
• className：获取或设置元素的类名字符串。
• children：返回一个 HTMLCollection，包含元素的子元素。
• attributes：返回元素所有属性的列表。
• style：返回一个对象，允许直接访问元素的内联样式。
• innerHTML：获取或设置元素的 HTML 内容。
• outerHTML：获取或设置元素的 HTML 内容和标签本身。

3. 常见方法

• getAttribute(name) ：获取指定属性的值。
• setAttribute(name, value) ：设置指定属性的值。
• removeAttribute(name) ：删除指定属性。
• querySelector 和 querySelectorAll：查找元素或元素列表。
• classList：操作类名列表，提供 add、remove、toggle、contains 等方法。

4. Element 与 HTMLElement

在 HTML 文档中，Element 具体表现为 HTMLElement。HTMLElement 是 Element 的子类，增加了一些专用于 HTML 的属性和方法，例如 innerText、hidden、focus() 等，用于控制用户界面交互。

5. Element 的应用

Element 接口及其子接口在 DOM 操作中非常常用，几乎所有页面元素都依赖它们。常见操作有：

• 动态更新内容：通过 innerHTML 或 textContent 修改节点内容。
• 事件绑定：通过 addEventListener 给元素绑定交互事件。
• 修改样式：直接修改 style 属性或使用 classList。
• 节点操作：通过 appendChild 或 removeChild 插入或删除元素。

通过 Element，JavaScript 能轻松控制页面的结构和样式，使得现代网页的交互性和动态性成为可能。