• 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>

    演示效果如下:

更多...

加载中...