【EASYDOM系列教程】之创建页面元素

nifhlheimr 发布于2019-08-20 18:04 / 938人阅读

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

Document 对象提供了可以创建元素节点、属性节点和文本节点的方法，方便 DOM 更新 HTML 页面中的元素。

创建元素节点

Document 对象提供了 createElement() 方法创建元素节点，其语法格式如下:

element = document.createElement(tagName);

上述语法格式中，tagName 是参数，表示创建元素的元素名称。element 是返回值，表示创建的元素。

值得注意的是: createElement() 方法优先将参数转换为小写。

下面是使用 createElement() 方法的示例代码:

var div = document.getElementById("group");
// 创建新的元素节点
var elem = document.createElement("button");
div.appendChild(elem);

上述示例代码通过 createElement() 方法创建了 button 元素，并将其添加到 HTML 页面中。

完整示例代码请点击右边的链接: createElement() 方法完整示例代码

创建文本节点

Document 对象提供了 createTextNode() 方法创建文本节点，其语法格式如下:

textNode = document.createTextNode(data);

上述语法格式中，data 是参数，包含了放在文本节点中的内容，是一个字符串。textNode 是返回值，表示创建的文本节点。

下面是使用 createTextNode() 方法的示例代码:

var div = document.getElementById("group");
// 创建新的元素节点
var elem = document.createElement("button");
// 创建文本节点
var text = document.createTextNode("New Button");
// 将文本节点添加到新的元素节点
elem.appendChild(text);
// 将新的元素节点添加到父级元素节点
div.appendChild(elem);

上述示例代码先通过 createElement() 方法创建了 button 元素，再通过 createTextNode() 方法创建了一个新的文本节点，并将其添加到新创建的 button 元素中。

完整示例代码请点击右边的链接: createTextNode() 方法完整示例代码

创建属性节点

Document 对象提供了 createAtrribute() 方法创建属性节点，其语法格式如下:

attributeNode = document.createAttribute(name);

上述语法格式中，name 是参数，属性节点的属性名称。attributeNode 是返回值，表示创建的属性节点。

值得注意的是:

创建属性节点方法只具有属性名称，没有属性值。想要设置属性值需要通过 nodeValue 属性完成。

由于属性节点不是元素节点的子节点，不能使用添加子节点方式操作属性节点。想要添加属性节点需要通过 setAttributeNode() 方法完成。

下面是使用 createAtrribute() 方法的示例代码:

var div = document.getElementById("group");
// 创建新的元素节点
var elem = document.createElement("button");
// 创建文本节点
var text = document.createTextNode("New Button");
elem.appendChild(text);
// 创建属性节点
var attribute = document.createAttribute("class");
// 设置属性的值
attribute.nodeValue = "button";
// 将属性节点添加到元素节点
elem.setAttributeNode(attribute);
div.appendChild(elem);

上述示例代码先通过 createAtrribute() 方法创建了，再通过 createTextNode() 方法创建了一个新的文本节点，并将其添加到新创建的 button 元素中。最后，通过 createAttribute() 方法创建 class 属性节点，并设置了属性值为 button，再将该属性节点添加到新创建的 button 元素中。

完整示例代码请点击右边的链接: createAtrribute() 方法完整示例代码

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

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

云服务器 GPU云服务器系列之系列之二架构之坑系列 linux系列教程

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

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

【EASYDOM系列教程】之插入节点

摘要：值得注意的是如果我们是将页面中原有的节点插入到指定节点的子节点列表的最后面，那这个被插入的节点会先从原有的位置移除，再插入到指定的位置。 Node 对象提供了一些用于向 HTML 页面插入节点的方法，通过这些方法我们可以实现向 HTML 页面新增元素，或者移动 HTML 页面中的元素。 appendChild() 方法 Node 对象提供的 appendChild() 方法可以向指定节...

jk_v1 2019-08-20 18:23 评论0 收藏0
【EASYDOM系列教程】之定位页面元素

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

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

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

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

摘要：对象提供了属性和方法实现定位页面元素功能。定位匹配选择器的第一个元素。是返回值，表示定位元素的集合，是一个集合。下面是使用方法的示例代码循环遍历所有元素上述代码通过方法定位页面中元素名为的元素，并遍历所有得到的元素，为其元素的属性添加样式。 Element 对象提供了属性和方法实现定位页面元素功能。该对象与 Document 对象提供的属性和方法实现定位页面元素功能的区别在于，Docu...

MartinDai 2019-08-21 12:00 评论0 收藏0
【EASYDOM系列教程】之Document 对象介绍

摘要：对象的作用对象作为访问和更新页面内容的入口。这个结果充分地说明了对象在的标准规范中代表整个页面。对象的继承链对象是继承于对象的。对象也是的标准规范中非常重要的对象之一，而对象又是继承于对象。 Document 对象是 DOM 的标准规范中比较重要的对象之一。该对象提供了访问和更新 HTML 页面内容的属性和方法。 Document 对象的作用 Document 对象作为 DOM 访问和...

JiaXinYi 2019-08-21 11:48 评论0 收藏0