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 ...
随机推荐
- Laravel trait的使用
trait 是在PHP5.4中为了方便代码复用的一种实现方式,但目前我在看的的PHP项目中较少看的有程序员去主动使用这个实现方式,在laravel中有很多 trait 的使用,关于trait 在 la ...
- C#生成Excel
需要引用MyXls.SL2.dll的类库: 下载地址:http://sourceforge.net/projects/myxls/ 命名空间using org.in2bits.MyXls: //创建表 ...
- docker login 报错 Error response from daemon: Get https://registry-1.docker.io/v2/: unauthorized: incorrect username or password
按照网上说的说法,造成这个现象有很多原因,大家可以多尝试一下,下面贴出解决我问题的方法: docker账户分为两个部分,一个是email,一个是dockerID,使用docker login登陆时要使 ...
- git杂记-撤销操作
覆盖上一次的提交或重新更新提交说明 $ git commit --amend -m '我再次提交啦,上一次的提交已经不见啦.这是一个危险的操作哦.哈哈,其实并不危险,也是可以数据恢复的啦' 取消已暂存 ...
- [POI2007]EGZ-Driving Exam
能到达所有路的充要条件是能到达左右两端的路 用vector反向建边对每条路左右分别求个最长不上升子序列 预处理出每条路向左向右分别需要多建多少路才能到达最左端和最右端 然后跑个\(\Theta(n)\ ...
- FlatBox-WordPress Responsive Flat Design Theme
FlatBox A beautifully FlatBox with different colors. You can upload your own logo & favicon, cus ...
- 如何实现监听 console.log
var lastLog; console.oldLog = console.log; console.log = function(str) { console.oldLog(str); lastLo ...
- react项目 路径优化
- 爬虫必备—requests
Requests 是使用 Apache2 Licensed 许可证的 基于Python开发的HTTP 库,其在Python内置模块的基础上进行了高度的封装,从而使得Pythoner进行网络请求时,变得 ...
- Visual Studio Code 保存时自动格式化的问题
烦人的说,保存的时候自动格式化, 格式话后,代码就失效了 纳尼!!!! 网上其他人都说 JS-CSS-HTML Formatter这个插件在捣蛋! 试了,的确如此. 找到他,给禁用,就不会 ...