首页 > 编程笔记 > JavaScript笔记 > JS DOM 阅读:288

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>我叫 C语言中文网</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>我叫 C语言中文网</h2>";  //替换HTML文本
    }
    lis[2].onclick = function () {  //为第三个列表项绑定事件处理函数
        this.outerText = "我是学生";  //覆盖列表项标签及其包含内容
    }
    lis[3].onclick = function () {  //为第四个列表项绑定事件处理函数
        this.outerHTML = "<h2>当然喜欢</h2>";  //覆盖列表项标签及其包含内容
    }
</script>
演示效果如下所示:

 

爱面试的程序媛,一个分享面试经验的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,定时分享程序员面试的那点事。

面试如何造火箭?工作如何拧螺丝?都在这个公号哦。

扫描二维码关注公众号,免费领取价值 1000 元的求职面试资料(限时免费)!

当你决定关注「爱面试的程序媛」,你已然超越了90%的程序员!

爱面试的程序媛二维码
微信扫描二维码关注

所有教程

优秀文章