【EASYDOM系列教程】之 innerHTML 属性

刘福发布于2019-08-21 11:59 / 3230人阅读

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

Element 对象提供了 innerHTML 属性用于实现获取或设置 HTML 页面指定元素的 HTML 代码。

获取 HTML 代码

innerHTML 属性表示 HTML 页面指定元素后代的 HTML 代码，其语法结构如下:

var content = element.innerHTML;

在上述语法结构中，作为返回值 content 表示描述元素后代的 HTML 语句。

需要说明的是，在上述语法结构中，调用 innerHTML 属性的 element 表示元素节点。元素节点本身也是一个元素。

我们可以通过以下示例代码，学习如何通过 innerHTML 属性获取指定元素的 HTML 语句:

var parent = document.getElementById("parent");
var content = parent.innerHTML;
console.log(content);

设置 HTML 代码

innerHTML 属性不仅提供了获取 HTML 页面中指定元素的后代 HTML 语句，还提供了设置 HTML 页面中指定元素的后代 HTML 语句。其语法结构如下:

element.innerHTML = markup;

在上述语法结构中，markup 表示设置描述元素后代的 HTML 语句。

我们可以通过以下示例代码，学习如何通过 innerHTML 属性设置指定元素的 HTML 语句:

var parent = document.getElementById("parent");
parent.innerHTML = "";

不是 W3C 规范

尽管 innerHTML 属性不属于 W3C DOM 规范，但是它为完全替换元素内容提供了一个更加便捷的方式。

举个例子，可以通过如下代码完全删除文档内body的内容:

document.body.innerHTML = "";

值得注意的是: 因为 innerHTML 属性没有统一的标准，各浏览器厂商对它实现差别很大。

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

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

云服务器 GPU云服务器 innerHTML属性系列之系列之二架构之坑系列

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

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

【EASYDOM系列教程】索引

摘要：系列教程是一套免费开源，任何人都可以免费学习分享，甚至可以进行修改。本文是这套系列教程的索引也就是目录第一回介绍在最开始，我们先来了解是什么的作用，以及浏览器的支持是怎么样的。《EASYDOM》系列教程是一套免费、开源，任何人都可以免费学习、分享，甚至可以进行修改。但需要注明作者及来源，并且不能用于商业。本文是这套系列教程的索引（也就是目录）: 第一回 DOM 介绍在最开始，我...

yanwei 2019-08-21 11:51 评论0 收藏0
【EASYDOM系列教程】之 Element 对象

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

jeyhan 2019-08-21 11:55 评论0 收藏0
【EASYDOM系列教程】之创建页面元素

摘要：对象提供了可以创建元素节点属性节点和文本节点的方法，方便更新页面中的元素。是返回值，表示创建的元素。最后，通过方法创建属性节点，并设置了属性值为，再将该属性节点添加到新创建的元素中。 Document 对象提供了可以创建元素节点、属性节点和文本节点的方法，方便 DOM 更新 HTML 页面中的元素。创建元素节点 Document 对象提供了 createElement() 方法创建元...

nifhlheimr 2019-08-20 18:04 评论0 收藏0
【EASYDOM系列教程】之 DOM 元素树

摘要：元素之间的关系在元素树结构中，主要具有以下三层关系。祖先与后代如果我们将页面中某一个元素作为祖先的话，那包含在该元素内的所有元素除子级之外的都可以称为该元素的后代。兄弟关系具有相同父级元素的两个或几个元素之间就是兄弟关系。 DOM 元素树结构与 DOM 节点树结构很相似，区别仅在于是利用节点解析 HTML 元素，还是利用元素解析 HTML 元素。 DOM 树结构还记得下面这张图吗? ...

stormzhang 2019-08-21 12:00 评论0 收藏0
【EASYDOM系列教程】之判断节点类型

摘要：对象中提供了和分别可以用于获取指定节点的节点名称节点类型和节点的值。具体的语法结构如下在上述语法结构中，是一个整数，其代表的是节点类型。本教程采用知识共享署名非商业性使用禁止演绎国际许可协议进行许可。 Node 对象中提供了 nodeName、nodeType 和 nodeValue 分别可以用于获取指定节点的节点名称、节点类型和节点的值。 DOM 节点树结构中，我们实际开发最常见的节...

CocoaChina 2019-08-20 18:17 评论0 收藏0