示例中的第一个div元素中不包含内容,因此不会产生文本节点。只要开始标签和结束标签之间 有内容,就会创建一个文本节点,因此第二个
元素会有一个文本节点的子节点,虽然它只包含空 格。这个文本节点的 nodeValue 就是一个空格。第三个
元素也有一个文本节点的子节点,其 nodeValue 的值为"Hello World!"。下列代码可以用来访问这个文本节点:
let textNode = div.firstChild; // 或div.childNodes[0] 取得文本节点的引用后,可以像这样来修改它:
div.firstChild.nodeValue = "Some other message"; 4 只要节点在当前的文档树中,这样的修改就会马上反映出来。修改文本节点还有一点要```
注意,就是
HTML 或 XML 代码(取决于文档类型)会被转换成实体编码,即小于号、大于号或引号会被转义,如 下所示:
// 输出为"Some <strong>other</strong> message" div.firstChild.nodeValue = "Some <strong>other</strong> message";
这实际上是在将 HTML 字符串插入 DOM 文档前进行编码的有效方式。
## 1. 创建文本节点 document.createTextNode()可以用来创建新文本节点,它接收一个参数,即要插入节点的文本。
跟设置已有文本节点的值一样,这些要插入的文本也会应用 HTML 或 XML 编码,如下面的例子所示:
```js
let textNode = js
document.createTextNode("<strong>Hello</strong> world!");
创建新文本节点后,其 ownerDocument 属性会被设置为 document。但在把这个节点添加到文档 树之前,我们不会在浏览器中看到它。以下代码创建了一个
元素并给它添加了一段文本消息:
let element = document.createElement("div");
element.className = "message";
document.body.appendChild(element); 10
这个例子首先创建了一个
元素并给它添加了值为"message"的 class 属性,然后又创建了 一个文本节点并添加到该元素。最后一步是把这个元素添加到文档的主体上,这样元素及其包含的文本 会出现在浏览器中。 一般来说一个元素只包含一个文本子节点。不过,也可以让元素包含多个文本子节点,如下面的例 子所示:
let element = document.createElement("div");
element.className = "message";
let textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
let anotherTextNode = document.createTextNode("Yippee!");
element.appendChild(anotherTextNode);
let textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
document.body.appendChild(element);
标签:document,js,element,let,div,文本,节点,createTextNode
From: https://blog.51cto.com/u_16298172/9379083