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 节点来说, 返回该属性的属性值.

DOM节点中获取文本易混淆的属性的更多相关文章

  1. 自定义属性，innerHTML,outerHTML,dom节点的获取，className,tagName,更改或者是获取css属性

    01.自定义属性 1.自定义属性: 作用:保存数据 通用的自定义属性的前缀 data-属性="属性值" 注:自定义的属性不能通过 元素.属性 取属性值 ,需使用getAttribu ...

  2. DOM节点中属性nodeName、nodeType和nodeValue的区别 < Delphi >

    http://msdn.microsoft.com/zh-cn/library/vstudio/hf9hbf87.aspx <?xml version="1.0"?> ...

  3. (转载)html dom节点操作(获取/修改/添加或删除)

    DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下   HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...

  4. webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2

    js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...

  5. DOM节点的获取

      document.getElementById();//id名,在实际开发中较少使用,选择器中多用class  id一般只用在顶级层存在 不能太过依赖id document.getElements ...

  6. 1+X证书学习日志——DOM节点的获取

    var oBox = document.getElementById('box');//获取ID为box的节点 var aBox = document.getElementsByTagName('di ...

  7. Xpath string()提取多个子节点中的文本

    <div> <ul class="show"> <li>275万购昌平邻铁三居 总价20万买一居</li> <li>00 ...

  8. 微软BI 之SSIS 系列 - 对于平面文件中 NULL 值处理过程中容易极易混淆的几个细节

    开篇介绍 最近有人问我有关文件处理中空值处理的相关问题: OLE DB Destination 中的 Keep Nulls 如何控制 NULL 值的显示? 为什么选中了 Keep Nulls 但是数据 ...

  9. iOS开发中获取文本的宽高的方式

    /** 计算单行文字的size @parms  文本 @parms  字体 @return  字体的CGSize */ + (CGSize)sizeWithText:(NSString *)text ...

随机推荐

  1. android studio的jni和so

    1. android studio自己添加代码生成so 代码地址:https://github.com/maogefff/Android-Test-Sample/tree/master/MyJni 参 ...

  2. SQL Serever学习4

    SQL Server系统中数据库相关概念 在SQLServer数据库系统中分为2大类,系统数据库和用户数据库. SQLServer安装后系统会自动生成4个系统数据库,他们是Master,Model,M ...

  3. select2 下拉搜索 可编辑可搜索 / 只可搜索

    官网 (http://select2.github.io/examples.html) <!--引入select2需要的文件--> <script type="text/j ...

  4. 怎样在 Azure 应用服务中生成和部署 Java API 应用

    先决条件 Java 开发人员工具包 8(或更高版本) 已在开发计算机上安装 Maven 已在开发计算机上安装 Git Azure 订阅付费版或试用版 HTTP 测试应用程序,如 Postman 使用 ...

  5. angular2 *ngIf与[hidden]对比<转>

    在AngularJS 1中,如果想切换DOM元素的显示状态,估计你会用AngularJS 1内置的指令如:ng-show 或者 ng-hide: AngularJS 1示例: <div ng-s ...

  6. 阿里云服务器（Ubuntu16.04 64位）远程连接

    购买阿里云服务器 1.打开阿里云官方网站,账号登录,选择产品中的云服务器 ECS 2.根据自身需求,选择合适的阿里云服务器系统,(1)点击一键购买,(2)选择地域,(3)根据自身需求,选择系统,这里选 ...

  7. Mysql压缩版forWindows安装与配置

    参考:http://blog.csdn.net/wengengeng/article/details/52013650

  8. HDU 2553(N皇后)（DFS）

    http://acm.hdu.edu.cn/showproblem.php?pid=2553 i表示行,map[i]表示列,然后用DFS遍历回溯 可以参考这篇文章: http://blog.csdn. ...

  9. Linux 更改时区

    原文:https://www.cnblogs.com/st-jun/p/7737188.html Linux修改时区的正确方法 CentOS和Ubuntu的时区文件是/etc/localtime,但是 ...

  10. C# 读取excel用户列表过滤一个月内未收到外部邮件已离职的员工

    1.通过aspose.cells读取excel中的数据并添加到list中 //存储从excel中读取出来的数据 List<UserInfo> lst_userinfo = new List ...