【EASYDOM系列教程】之 Element 对象

jeyhan 发布于2019-08-21 11:55 / 686人阅读

摘要：而标准规范中提供了对象，主要是依靠元素树结构访问和更新页面的内容。值得注意的是所有的页面的元素都是对象，而这个对象又是继承于对象的。我们可以简单地理解对象是对象的补充。本教程采用知识共享署名非商业性使用禁止演绎国际许可协议进行许可。

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 原型属性来查看其属性或方法。

console.log(Element.prototype)

运行 HTML 页面后，打开 开发者工具，我们可以看到以下内容:

上面运行后的结果只是部分内容，并不是全部内容。请自行测试！

本教程免费开源，任何人都可以免费学习、分享，甚至可以进行修改。但需要注明作者及来源，并且不能用于商业。

本教程采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

idc机房托管私有云系列之系列之二架构之坑系列 linux系列教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87287.html

【EASYDOM系列教程】之属性操作

摘要：对象提供了一些方法实现元素的属性操作，这种操作要比对象提供的方法操作属性节点要更便捷。值得注意的是如果指定的属性不存在，则返回或空字符串。如果删除的属性不存在的话，不会引发任何异常。 Element 对象提供了一些方法实现 HTML 元素的属性操作，这种操作要比 Node 对象提供的方法操作属性节点要更便捷。获取指定元素的属性 Element 对象提供了 getAttribute()...

BigNerdCoding 2019-08-21 11:59 评论0 收藏0
【EASYDOM系列教程】之获取内联样式

摘要：回顾什么是内联样式所谓内联样式，就是通过页面元素的属性为当前元素定义样式。对象提供的属性和方法可以帮助我们获取样式的具体内容。遍历对象由于对象具有属性，返回该对象的属性的数量。方法通过获取的样式属性名，这种方式也可以通过方式进行替换。回顾什么是内联样式所谓内联样式，就是通过 HTML 页面元素的 style 属性为当前元素定义 CSS 样式。以下代码示例，就是通过 style 属...

xiaodao 2019-08-22 11:05 评论0 收藏0
【EASYDOM系列教程】之遍历元素

摘要：对象提供了一系列的属性和方法用来利用元素树结构中元素的关系实现遍历其中的元素。关于元素之间的关系，可以参考元素树一节有关元素之间关系的内容。该属性获取一个包含指定元素的所有子元素的集合。值得注意的是如果当前元素无子节点，则属性返回。 Element 对象提供了一系列的属性和方法用来利用 DOM 元素树结构中元素的关系实现遍历其中的元素。关于元素之间的关系，可以参考《DOM 元素树》一...

codeGoogle 2019-08-21 12:00 评论0 收藏0
【EASYDOM系列教程】之定位页面元素

摘要：对象提供了属性和方法实现定位页面元素功能，这也是的标准规范中对象的主要应用之一。是返回值，表示定位元素的集合，是一个集合。定位匹配选择器的第一个元素。方法定位页面元素所返回的集合就是静态集合。 Document 对象提供了属性和方法实现定位页面元素功能，这也是 DOM 的标准规范中 Document 对象的主要应用之一。定位页面元素方法目前 Document 对象提供实现定位页面元...

NotFound 2019-08-20 18:04 评论0 收藏0
【EASYDOM系列教程】之 innerHTML 属性

摘要：对象提供了属性用于实现获取或设置页面指定元素的代码。需要说明的是，在上述语法结构中，调用属性的表示元素节点。但需要注明作者及来源，并且不能用于商业。本教程采用知识共享署名非商业性使用禁止演绎国际许可协议进行许可。 Element 对象提供了 innerHTML 属性用于实现获取或设置 HTML 页面指定元素的 HTML 代码。获取 HTML 代码 innerHTML 属性表示 HTM...

刘福 2019-08-21 11:59 评论0 收藏0