zoukankan      html  css  js  c++  java
  • DOM节点中获取文本易混淆的属性

    DOM 节点中对于获取文本易混淆的属性,innerText, innerHTML, outerHTML, textContent, nodeValue。

    一个实例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>innerText 与 textContent 的区别</title>
    </head>
    <body>
        <div id="box">
            我是文本节点(第一个子节点)
            <span id="span">我是span节点的文本节点</span>
        </div>
        <script>
            var box = document.getElementById("box");
            console.log("innerHTML:" + box.innerHTML);
            console.log("outerHTML:" + box.outerHTML);        
            console.log("innerText:" + box.innerText);
            console.log("textContent:" + box.textContent);
            console.log("nodeValue:" + box.nodeValue);
            console.log("box's nodeValue of id :" + box.getAttributeNode("id").nodeValue);
        </script>
    </body>
    </html>

    结果:

    ie9 及以上版本下的结果:

    ie8 及以下版本下的结果:

    其它主流浏览器下的效果基本一致:

    从结果可知:

    1. IE8 及以下浏览器版本不支持 textContent 属性。获取的是所有文本内容,包括了空格、换行,但不包括 HTML 标签。

    2. innerHTML 只针对于 Element 对象,语法为 HTMLElementObject.innerHTML=text。它获取的是从该html开始标签到结束标签之间的全部内容,包括换行、空格,也包括 HTML 标签。

    3. Element 对象的 nodeValue 为 null。

    4. Attribute 对象的 nodeValue 为其属性值。

    区别:

    textContent: 设置或者返回指定节点的文本内容。IE8 及以下版本浏览器不支持该属性。可以用来替换 innerText。

    innerHTML: 可以用来获取、修改指定元素内的所有标签和内容(包括了 html 标签)。它只针对 HTMLElement 对象,不适用于其他节点。

    outerHTML: outerHTML属性可以获取该 DOM 元素及其后代节点所形成的序列化的 HTML 片段。把自身也显示出来了。

    innerText: 表示其节点和子节点所包含的文字。在 https://developer.mozilla.org/zh-CN/docs/Web/API/Node/innerText 中有详细的描述:

    nodeValue: 获取或设置当前节点的值。对于文档节点来说, nodeValue 返回 null. 对于 text, comment, 和 CDATA 节点来说, nodeValue 返回该节点的文本内容. 对于 attribute 节点来说, 返回该属性的属性值.

  • 相关阅读:
    超棒的前端开发界面套件 InK
    现代浏览器的web音频javascript类库 Howler.js
    富有创意的菱形响应式页面设计
    创意味儿十足的web布局及交互设计
    一个超酷的横向多列响应式布局效果
    帮助你生成响应式布局的CSS模板 xyCSS
    免费素材大荟萃:免费图标和UI设计
    使用浏览器生成超棒的midi音乐 midi.js
    JavaScript 和 .NET 中的 JavaScript Object Notation (JSON) 简介
    推荐一批基于web的开源html文本编辑器(40+)
  • 原文地址:https://www.cnblogs.com/xinjie-just/p/6297771.html
Copyright © 2011-2022 走看看