首页 > 编程笔记 > JavaScript笔记 > JS DOM

JS操作文本节点（非常详细）

文本节点表示元素和属性的文本内容，包含纯文本内容、转义字符，但不包含 HTML 代码。文本节点不包含子节点。主要特征值：nodeType 等于 3、nodeName 等于 "#text"、nodeValue 等于包含的文本。

创建文本节点

使用 document 对象的 createTextNode() 方法可创建文本节点。用法如下：

document.createTextNode(data)

参数 data 表示字符串。

示例

下面示例创建一个新 div 元素，并为它设置 class 值为 red，然后添加到文档中。 
var element = document.createElement("div");
element.className = "red";
document.body.appendChild(element);

由于 DOM 操作等原因，可能会出现文本节点不包含文本，或者接连出现两个文本节点的情况。为了避免这种情况的发生，一般会在父元素上调用 normalize() 方法，删除空文本节点，合并相邻文本节点。

访问文本节点

使用 nodeValue 或 data 属性可以访问文本节点包含的文本。使用 length 属性可以获取包含文本的长度，利用该属性可以遍历文本节点中每个字符。

示例

设计一个读取元素包含文本的通用方法。 
//获取指定元素包含的文本
//参数：e 表示指定元素
//返回包含的所有文本，包括子元素中包含的文本
function text(e) {
    var s = "";
    var e = e.childNodes || e;  //判断元素是否包含子节点
    for (var i = 0; i < e.length; i ++) {  //遍历所有子节点
        //通过递归遍历所有元素的子节点
        s += e[i].nodeType != 1 ? e[i].nodeValue : text(e[i].childNodes);
    }
    return s;
}
在上面函数中，通过递归函数检索指定元素的所有子节点，然后判断每个子节点的类型，如果不是元素，则读取该节点的值，否则继续递归遍历该元素包含的所有子节点。

下面使用上面定义的通用方法读取 div 元素包含的所有文本信息。 
<div id="div1">
    <span class="red">div</span>
    元素
</div>
<script>
    var div = document.getElementById("div1");
    var s = text(div);  //调用读取元素的文本通用方法
    console.log(s);  //返回字符串“div 元素”
</script>
这个通用方法不仅可以在 HTML DOM 中使用，也可以在 XML DOM 文档中工作，并兼容不同的浏览器。

读取 HTML 字符串

使用元素的 innerHTML 属性可以返回调用元素包含的所有子节点对应的 HTML 标记字符串。最初它是 IE 的私有属性，HTML 5 规范了 innerHTML 的使用，并得到所有浏览器的支持。

示例

下面示例使用 innerHTML 属性读取 div 元素包含的 HTML 字符串。 
<div id="div1">
    <style type="text/css">p {color : red;}</style>
    <p><span>div</span>元素</p>
</div>
<script>
    var div = document.getElementById("div1");
    var s = div.innerHTML;
    console.log(s);
</script>

插入 HTML 字符串

使用 innerHTML 属性可以根据传入的 HTML 字符串，创建新的 DOM 片段，然后用这个 DOM 片段完全替换调用元素原有的所有子节点。设置 innerHTML 属性值之后，可以像访问文档中的其他节点一样访问新创建的节点。

示例

下面示例将创建一个 1000 行的表格。先构造一个 HTML 字符串，然后更新 DOM 的 innerHTML 属性。 
<script>
    function tableInnerHTML () {
        var i, h = ['<table border="1" width="100%">'];
        h.push('<thead>');
        h.push('<tr><th>id<\/th><th>yes?<\/th><th>name<\/th><th>url<\/th><th>action<\/th><\/tr>');
        h.push('<\/thead>');
        h.push('<tbody>');
        for (i=1;i<=1000;i++) {
            h.push('<tr><td>');
            h.push(i);
            h.push('<\/td><td>');
            h.push('And the answer is...' + (i % 2 ? 'yes' : 'no'));
            h.push('<\/td><td>');
            h.push('my name is #' + i);
            h.push('<\/td><td>');
            h.push('<a href="http://example.org/' + i + '.html">http://example.org/' + i + '.html<\/a>');
            h.push('<\/td><td>');
            h.push('<ul>');
            h.push('<li><a href="edit.php?id=' + i + '">edit<\/a></li>');
            h.push('<li><a href="delete.php?id="' + i + '-id001">delete<\/a><\/li>');
            h.push('<\/ul>');
            h.push('<\/td>');
            h.push('<\/tr>');
    }
    h.push('<\/tbody>');
    h.push('<\/table>');
    document.getElementById("here").innerHTML = h.join('');
</script>
<div id="here"></div>
<script>
    tableInnerHTML();
</script>
如果通过 DOM 的document.createElement() 和 document.createTextNode() 方法创建同样的表格，代码会非常长。在一个性能苛刻的操作中更新一大块 HTML 页面，innerHTML 在大多浏览器中执行的更快。

使用 innerHTML 属性也有一些限制。例如，在大多数浏览器中，通过 innerHTML 插入 <script> 标记后，并不会执行其中的脚本。

替换 HTML 字符串

outerHTML 也是 IE 的私有属性，后来被 HTML 5 规范，与 innerHTML 的功能相同，但是它会包含元素自身。浏览器支持状态：IE 4+、Firefox 8+、Chrome 和 Opera 8+。

示例

下面示例演示了 outerHTML 与 innerHTML 属性的不同效果。分别为列表结构中不同列表项定义一个鼠标单击事件，在事件处理函数中分别使用 outerHTML 和 innerHTML 属性改变原列表项的 HTML 标记，会发现 outerHTML 是使用 <h2> 替换 <li>，而innerHTML 是把 <h2> 插入到 <li> 中。 
<h1>单击回答问题</h1>
<ul>
    <li>你叫什么？</li>
    <li>你喜欢 JS 吗？</li>
</ul>
<script>
    var ul = document.getElementsByTagName("ul")[0];
    var lis = ul.getElementsByTagName("li");
    lis[0].onclick = function () {
        this.innerHTML = "<h2>我叫 新宝库</h2>";
    }
    lis[1].onclick = function () {
        this.outerHTML = "<h2>当然喜欢</h2>";
    }
</script>
演示效果如下：


在使用 innerHTML、outerHTML 时，应删除被替换元素的所有事件处理程序和 JavaScript 对象属性。

读写文本

innerText 和 outerText 也是 IE 的私有属性，但是没有被 HTML 5 纳入规范。

【innerText 属性】

innerText 在指定元素中插入文本内容，如果文本中包含 HTML 字符串，将被编码显示。

浏览器支持状态：IE 4+、Safari 3+、Chrome 和 Opera 8+。Firefox 提供 textContent 属性支持相同的功能。支持 textContent 属性的浏览器还有 IE 9+、Safari 3+、Opera 10+ 和 Chrome。

【outerText 属性】

outerText 与 innerText 功能相似，但是它能够覆盖原有的元素。

示例

下面示例使用 outerText、innerText、outerHTML 和 innerHTML 这 4 种属性为列表结构中不同列表项插入文本。 
 <h1>单击回答问题</h1>
<ul>
    <li>你好</li>
    <li>你叫什么？</li>
    <li>你是什么职业？</li>
    <li>你喜欢 JS 吗？</li>
</ul>
<script>
    ul = document.getElementsByTagName("ul")[0];  //获取列表结构
    var lis = ul.getElementsByTagName("li");  //获取列表结构的所有列表项
    lis[0].onclick = function () {  //为第一个列表项绑定事件处理函数
        this.innerText = "谢谢";  //替换文本
    }
    lis[1].onclick = function () {  //为第二个列表项绑定事件处理函数
        this.innerHTML = "<h2>我叫 新宝库</h2>";  //替换HTML文本
    }
    lis[2].onclick = function () {  //为第三个列表项绑定事件处理函数
        this.outerText = "我是学生";  //覆盖列表项标签及其包含内容
    }
    lis[3].onclick = function () {  //为第四个列表项绑定事件处理函数
        this.outerHTML = "<h2>当然喜欢</h2>";  //覆盖列表项标签及其包含内容
    }
</script>
演示效果如下所示：

 

所有教程

优秀文章