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 节点来说, 返回该属性的属性值.
DOM节点中获取文本易混淆的属性的更多相关文章
- 自定义属性，innerHTML,outerHTML,dom节点的获取，className,tagName,更改或者是获取css属性
01.自定义属性 1.自定义属性: 作用:保存数据 通用的自定义属性的前缀 data-属性="属性值" 注:自定义的属性不能通过 元素.属性 取属性值 ,需使用getAttribu ...
- DOM节点中属性nodeName、nodeType和nodeValue的区别 < Delphi >
http://msdn.microsoft.com/zh-cn/library/vstudio/hf9hbf87.aspx <?xml version="1.0"?> ...
- (转载)html dom节点操作(获取/修改/添加或删除)
DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下 HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...
- webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2
js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...
- DOM节点的获取
document.getElementById();//id名,在实际开发中较少使用,选择器中多用class id一般只用在顶级层存在 不能太过依赖id document.getElements ...
- 1+X证书学习日志——DOM节点的获取
var oBox = document.getElementById('box');//获取ID为box的节点 var aBox = document.getElementsByTagName('di ...
- Xpath string()提取多个子节点中的文本
<div> <ul class="show"> <li>275万购昌平邻铁三居 总价20万买一居</li> <li>00 ...
- 微软BI 之SSIS 系列 - 对于平面文件中 NULL 值处理过程中容易极易混淆的几个细节
开篇介绍 最近有人问我有关文件处理中空值处理的相关问题: OLE DB Destination 中的 Keep Nulls 如何控制 NULL 值的显示? 为什么选中了 Keep Nulls 但是数据 ...
- iOS开发中获取文本的宽高的方式
/** 计算单行文字的size @parms 文本 @parms 字体 @return 字体的CGSize */ + (CGSize)sizeWithText:(NSString *)text ...
随机推荐
- windows 10安装gensim、nltk
一.安装gensim 1.什么事gensim gensim是一个python的科学库,gensim包含了TF-IDF.随机投影.word2vec和document2vec算法的实现,分层Dirchle ...
- C#单元测试：NUnit详细使用方法
1. TDD的简介 首先什么是TDD呢?Kent Beck在他的<<测试驱动开发 >>(Addison-Wesley Professional,2003)一书中,使用下面2个原 ...
- MongoDB的基本使用及java对MongoDB的基本增删改查
MongoDB的特点 MongoDB 是文档存储数据库,存储结构灵活 MongoDB 支持复杂查询操作.支持序列 MongoDB 采用C++开发,可以做分布式扩展 MongoDB 采用BSON格式存储 ...
- 记一次吐血的暴力模拟qaq 【多项式输出】
题目描述 一元 n 次多项式可用如下的表达式表示: 其中,aixi称为 i 次项,ai 称为 i 次项的系数.给出一个一元多项式各项的次数和系数,请按照如下规定的格式要求输出该多项式: 1. 多项式中 ...
- EF fluent API如何配置主键不自动增长
在Dbcontext中作如下添加: protected override void OnModelCreating(DbModelBuilder modelBuilder) { modelBuilde ...
- 01 使用Git基本方法
什么是Git? Git是目前世界上最先进的分布式版本控制系统(没有之一). 你得先有一个Git仓库,才能进行操作.创库就是Git存放你要保存的快照的数据的地方. 拥有一个Git仓库,有两种方法. 创建 ...
- bnu 29378 Adidas vs Adivon 基础题
Adidas vs Adivon Time Limit: 1000ms Memory Limit: 65536KB 64-bit integer IO format: %lld Java ...
- lincode 题目记录6
the Duplicate Number 132 PatternFind 找重复的数字··直接暴力枚举是不行的···又超时提示·· 暴力枚举的写法· res=0 def findDuplicate( ...
- BZOJ1031 [JSOI2007]字符加密
Description 喜欢钻研问题的JS同学,最近又迷上了对加密方法的思考.一天,他突然想出了一种他认为是终极的加密办法 :把需要加密的信息排成一圈,显然,它们有很多种不同的读法.例如下图,可以读作 ...
- WinForm实现Rabbitmq官网6个案例-Publishe/Subscribe
代码: namespace RabbitMQDemo { public partial class PublishSubscribe : Form { private string exchangeN ...