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

2019年8月25日 161次阅读 来源: 二月红

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 是返回值，示意建立的属性节点。

值得注意的是:

  1. 建立属性节点要领只具有属性称号，没有属性值。想要设置属性值须要经由过程 nodeValue 属性完成。

  2. 因为属性节点不是元素节点的子节点，不能运用增加子节点体式格局操纵属性节点。想要增加属性节点须要经由过程 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 国际允许协定举行允许。

《【EASYDOM系列教程】之建立页面元素》

    原文作者：二月红
    原文地址: https://segmentfault.com/a/1190000010210442
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞