DOM 的标准规范中提供了 Element 对象,该对象提供了 HTML 页面中所有元素所具有的属性和方法。
我们都知道 DOM 标准规范中提供了 Node 对象,主要是依靠 DOM 节点树结构访问和更新 HTML 页面的内容。而 DOM 标准规范中提供了 Element 对象,主要是依靠 DOM 元素树结构访问和更新 HTML 页面的内容。
> **值得注意的是:** 所有的 HTML 页面的元素都是 HTMLElement 对象,而这个对象又是继承于 Element 对象的。
## Element 对象的作用
HTML 页面中的标签,既是元素节点,又是元素。
如果我们将 HTML 页面中的标签当做元素节点的话,就是利用 DOM 节点树结构进行解析和操作。但是,有些情况利用 Node 对象实现比较复杂,例如属性节点的操作,而使用 Element 对象提供的属性和方法相对会简单一些。
我们可以简单地理解 Element 对象是 Node 对象的补充。当然,这种理解并不准确!
通过 Element 对象,我们可以实现遍历元素、属性操作等操作。而这些操作也正是我们要学习 Element 对象的属性和方法。
## 测试 Element 对象
由于 Element 对象是 DOM 底层封装的对象,所以我们并不能通过直接打印 Element 对象来查看其属性或方法。
而是要通过打印 Element 对象的 prototype 原型属性来查看其属性或方法。
```javascript
console.log(Element.prototype)
```
运行 HTML 页面后,打开 **开发者工具**,我们可以看到以下内容:
![](https://box.kancloud.cn/e89621d1ae1e49738a3885c2ea103efd_594x669.png)
> 上面运行后的结果只是部分内容,并不是全部内容。请自行测试!
- 关于
- 第一章 DOM 是什么
- 第一节 DOM 介绍
- 第二节 DOM 树结构
- 第二章 Document 对象
- 第一节 Document 对象介绍
- 第二节 定位页面元素
- 第三节 创建页面元素
- 第三章 Node 对象
- 第一节 Node 对象介绍
- 第二节 判断节点类型
- 第三节 遍历节点
- 第四节 插入节点
- 第五节 删除节点
- 第六节 替换节点
- 第七节 复制节点
- 第八节 textContent 属性
- 第四章 Element 对象
- 第一节 Element 对象介绍
- 第二节 DOM 元素树
- 第三节 定位页面元素
- 第四节 遍历元素
- 第五节 属性操作
- 第六节 innerHTML 属性
- 第五章 样式操作
- 第一节 获取内联样式
- 第二节 获取外联样式表
- 第三节 获取 class 属性
- 第四节 获取当前有效样式
- 第五节 设置内联样式
- 第六节 设置 class 属性
- 第七节 Element 对象的样式属性
- 第六章 事件
- 第一节 什么是事件
- 第二节 注册事件
- 第三节 移除注册事件
- 第四节 Event 事件对象
- 第五节 获取目标元素
- 第六节 阻止默认行为
- 第七节 获取鼠标坐标
- 第八节 事件流
- 第九节 事件委托
- 第七章 表单操作
- 第一节 获取表单
- 第二节 表单操作
- 第三节 表单验证
- 第四节 表单提交
- 第八章 BOM
- 第一节 BOM 是什么
- 第二节 Window 对象
- 第三节 Navigator 对象
- 第四节 History 对象
- 第五节 Location 对象
- 第六节 定时器