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 ...
随机推荐
- 吴恩达《深度学习》第五门课（1）循环序列模型（RNN）
1.1为什么选择序列模型 (1)序列模型广泛应用于语音识别,音乐生成,情感分析,DNA序列分析,机器翻译,视频行为识别,命名实体识别等众多领域. (2)上面那些问题可以看成使用(x,y)作为训练集的监 ...
- 如何去组织你的CSS代码
1.Object Oriented CSS (OOCSS) 面向对象的 CSS.OOCSS 的想法首先要明白 CSS 的 “Object” 是个毛线玩意. CSS的样式是需要应用到页面的结构上的.通俗 ...
- 问题集录--Android:解决Studio新建项目时，在 Building gradle project info 一直卡住
Android Studio导入项目的时候,一直卡在Building gradle project info这一步,主要原因还是因为被墙的结果.gradle官网虽然可以访问,但是速度连蜗牛都赶不上.. ...
- HTML页面格式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- final的作用
前言 一直想写写这个话题.代表公司也面试过一些求职者,每次面试我必问的两个问题之一 就是“请你谈一谈对于final关键字的理解”.这是一个简单的小问题,但是不要小看它,通过对这个问题的回答以及一些简单 ...
- 自定义经纬度索引(非RTree、Morton Code[z order curve]、Geohash的方式)
自定义经纬度索引(非RTree.Morton Code[z order curve].Geohash的方式) Custom Indexing for Latitude-Longitude Data 网 ...
- 【SSH网上商城项目实战17】购物车基本功能的实现
转自:https://blog.csdn.net/eson_15/article/details/51418350 上一节我们将商品的详细页面做完了,并使用了Hibernate的二级缓存加载详细页面来 ...
- 一类划分关系和指数级生成函数，多项式exp的关系
划分关系 姑且这么叫着 设满足性质 \(A\) 的集合为 \(S_A\),每个元素有标号 如果 \(S_B\) 是由若干个 \(S_A\) 组成的一个大集合 设 \(a_i\) 表示大小为 \(i\) ...
- git revert后导致合并代码丢失
起因 我有一个开发分支antd3.x和一个主分支develop,我在合并antd3.x到develop的时候发现有些修改没有合并进来. 查找问题 然后就去网上查,发现这篇文章<git合并丢失代码 ...
- C#-求int数组中连续偶数列的个数
例如:[3, 3, 2, 2, 2, 4, 3, 5, 4, 6, 3]=>2,2,2,4;4,6 结果为2 [3, 3, 2,3, 2, 2, 4, 3, 5, 4, 6, 3]=&g ...