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. 周记7——ios中picker滑动穿透bug

    Bug描述:使用mint-ui的picker组件时,datepicker和picker在ios的webview(bug是在Hybrid App发现的)中会出现滑动穿透的现象,导致弹层后面的页面也会滚动 ...

  2. jpages中文api

    需要引入的文件 :   containerID 字符串 默认值: 必需!(无默认值) 要分页的项目的容器ID.它可以是UL,OL,DIV等.    first  String || 假 默认值: fa ...

  3. MyEclipse部署web项目的关键

    我自己的经验: 主要有3点: 自己的代码要正确 数据库服务确保已经启动 确保你的访问路径是正确的 1.自己的代码要正确 比如jdbc驱动,正确的写法:private static final Stri ...

  4. JDBC增加、更新、删除数据

    JDBC增加.更新.删除数据 st.executeUpdate(sql) 进行插入.更新.删除操作返回的是受影响的记录的条数 注意:输入的sql语句中,vachar类型记住加单引号 完整代码如下: p ...

  5. Eclipse设置虚拟机参数 (转 构建内存溢出)

    Java -verbose:gc 中参数-verbose:gc 表示输出虚拟机中GC的详细情况. 首先在Eclipse的Debug页签中设置虚拟机参数: 步骤: 1.选中已经写好的项目 2.Run-& ...

  6. PowerDesigner16导出SQL时如何添加注释

    添加注释方法 https://jingyan.baidu.com/article/47a29f24652e44c0142399c3.html 重点是修改value的值 alter table [%QU ...

  7. python Django 路由之正则表达式

    一.路由系统,URL 1. url(r'^index',views.index) #默认的                  url(r'^home',views.Home.as_view()) # ...

  8. 关于MyEclipse2017Ci10版本的破解和Tomcat9.0的安装搭配使用

    昨天和今天就忙这两件事情了.废话不多说直接上干货! 首先是关于Myeclipse2017的破解,关于这个破解,网上的资源和文件很多,可以自行下载,我就不贴链接了. 我要说的是破解的问题,在这里我们要注 ...

  9. html5 表单 填表 select 下拉 textarea多行文本 output Js计算结果

    <select>     下拉 <select>下有很多属性 name        其实有name就有value了,因为button提交的都是? name=value的格式, ...

  10. apache配置域名访问本地空间

    1. 首先修改C盘WINDOWS\system32\drivers\etc目录下的 hosts 文件,用记事本打开,加入: 127.0.0.1 www.a.com hosts文件是用来解析的,你在浏览 ...