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. 八段代码彻底掌握 Promise

    1.Promise的立即执行性 var p = new Promise(function(resolve, reject){ console.log("create a promise&qu ...

  2. anaconda使用，jupyter notebook的使用方法

    1. 通过anaconda安装不同的python环境 1) conda create -n python36 python=3.5 2)  激活虚拟环境: activate python36  # 进 ...

  3. centos ssh远程登陆

    登录Centos6.5系统. ◆示例:使用root用户登录. 注:若为非root用户登录,输入执行某些命权限不够时需加sudo.   查看SSH是否安装. ◆输入命令:rpm -qa | grep s ...

  4. SQL语句的拼凑

    StringBuilder sql = new StringBuilder("SELECT * FROM t_customer WHERE 1=1"); /* * 2. 判断条件, ...

  5. C#学习笔记（基础知识回顾）之值类型与引用类型转换（装箱和拆箱）

    一:值类型和引用类型的含义参考前一篇文章 C#学习笔记(基础知识回顾)之值类型和引用类型 1.1,C#数据类型分为在栈上分配内存的值类型和在托管堆上分配内存的引用类型.如果int只不过是栈上的一个4字 ...

  6. ajax+json+ashx实现一个页面多个tab的分页

    1:项目功能需求:我的荣誉.审核中的荣誉.审核通过的荣誉在一个页面分别作列表展示.每个tab都需要分页,对实现的功能做个简单总结. 2:前台页面:引用的DBPage.js和pageCss.css实现分 ...

  7. BZOJ5465: [APIO 2018] 选圆圈(K-D Tree)

    题意 题目链接 Sol 下面是错误做法,正解请看这里 考虑直接用K-D tree模拟.. 刚开始想的是维护矩形最大最小值,以及子树中最大圆的位置,然后... 实际上最大圆的位置是不用维护的,直接把原序 ...

  8. JavaWeb学习总结（四）：Servlet开发（二）

    一.ServletConfig讲解 1.1.配置Servlet初始化参数 在Servlet的配置文件web.xml中,可以使用一个或多个<init-param>标签为servlet配置一些 ...

  9. path-to-regexp快速拆分 url 路径中的参数信息

    介绍一个小工具 path-to-regexp 用于快速拆解url path中的部分,贴别适合restful接口中快速获取对应的实体参数 git地址可以参考 https://github.com/pil ...

  10. Apache + WordPress + SSL 完全指南

    似乎不少使用国外主机的站长都想弄个 https:// "玩",但是许多人对 SSL/TLS.HTTPS.证书等概念了解有限,而中文互联网上相关的教程也不是很完备,各种杂乱.正好,本 ...