innerHTML&outerHTML&innerText&outerText实例辨析

2018-12-08 admin

有时候做项目会用到上述四个DOM属性来获取HTML文档里的一些内容,但对他们的区别还是有些模糊,所以写了几个简单的函数,通过打印在控制台上的结果看看他们之间的区别。

代码:

<div id="outer">
    outer
    <p id="innerone">inner one</p>
    between
    <p id="innertwo">inner two</p>
  </div>
  <div>
    <button onclick="showInnerHTML()">innerHTML</button>
    <button onclick="showOuterHTML()">outerHTML</button>
    <button onclick="showInnerText()">innerText</button>
    <button onclick="showOuterText()">outerText</button>
  </div>
var showInnerHTML = function(){
    console.log(document.getElementById("outer").innerHTML);
  }
  var showOuterHTML = function(){
    console.log(document.getElementById("outer").outerHTML);
  }
  var showInnerText = function(){
    console.log(document.getElementById("outer").innerText);
  }
  var showOuterText = function(){
    console.log(document.getElementById("outer").outerText);
  }

innerHTML

控制台结果

clipboard.png

总结:获取当前节点下子节点的HTML文本,如果子节点只有文本节点,则它的输出效果和innerText相同

outerHTML

控制台结果

clipboard.png

总结:获得包括当前节点本身以及节点下子节点的HTML文本

innerText

控制台结果

clipboard.png

总结:获得当前节点子节点内的纯文本内容

outerText

控制台结果

clipboard.png

总结:获得当前节点以及子节点内的纯文本内容(总感觉和innerText的输出效果是一样的,没想到什么例子可以有不同的效果,如果你有,欢迎评论(#^.^#))

疑问:可以看到innerText的输出结果中,中间有一个空行,并不是很懂……

虽然是简单的例子,但是通过代码把概念区分了一下,也是挺好的~如果有写得不足的,欢迎指正留言~不胜感激!

原文链接:https://segmentfault.com/a/1190000017303124

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-47567.html

文章标题:innerHTML&outerHTML&innerText&outerText实例辨析

相关文章
javascript动画算法实例分析
本文实例讲述了javascript动画算法。分享给大家供大家参考。具体如下: 动画算法 Linear:无缓动效果(匀速运动); Quadratic:二次方的缓动; Cubic:三次方的缓动 Quartic:四次方的缓动; Quintic:五...
2017-03-27
Javascript实现可旋转的圆圈实例代码
本文实例讲述了Javascript实现可旋转的圆圈。分享给大家供大家参考。具体如下: 这里基于Javascript实现会旋转的圆圈,有点三维变幻的效果,立体感很强,代码主要是基于JS,学习Js脚本编程来说,是个学习JS生成动画的好范例。 运...
2017-03-29
javascript数组随机排序实例分析
本文实例讲述了javascript数组随机排序实现方法。分享给大家供大家参考。具体如下: 我们就测试0-9的随机排序,先生成数据 var arr=[9,3,1,2,5,8,4,7,6,0]; arr.sort(); document.wri...
2017-03-25
JavaScript实现节点的删除与序号重建实例
本文实例讲述了JavaScript实现节点的删除与序号重建。分享给大家供大家参考。具体如下: 这里演示JavaScript节点的删除与重建方法,删除节点后,会自动重新建立节点,序号自动排列,比如删除当前的第3条数据后,第4条的序号会智能变为...
2017-03-29
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
本文实例讲述了JS实现可直接显示网页代码运行效果的HTML代码预览功能。分享给大家供大家参考。具体如下: JavaScript实现HTML代码预览功能,直接在网页上显示代码运行的效果,就例如点击“运行代码”后的效果,使用时,你只需将需要运行...
2017-03-27
JavaScript数组去重的3种方法和代码实例
数组去重的方法有很多,到底哪种是最理想的,自己不清楚。于是自己测试了下数组去重的效果和性能。测试十万个数据,代码和所耗大概时间如下。 到底采用哪种方法,根据实际情况而定吧。 &#x2F;*方法一: 1,&#x27;1&#x27; 会被认为是...
2017-03-27
JavaScript实现基于Cookie的存储类实例
本文实例讲述了JavaScript实现基于Cookie的存储类。分享给大家供大家参考。具体分析如下: 通过这个JS类,你可以象使用session一样使用cookie,非常简单了! &#x2F;* * CookieStorage.js *...
2017-03-22
JavaScript中String.prototype用法实例
本文实例讲述了JavaScript中String.prototype用法。分享给大家供大家参考。具体如下: &#x2F;&#x2F; 返回字符的长度,一个中文算2个 String.prototype.ChineseLength=functi...
2017-03-23
javascript原始值和对象引用实例分析
本文实例讲述了javascript原始值和对象引用的方法。分享给大家供大家参考。具体分析如下: 一句话来说:原始值是不可变的,而对象引用是可变的。 js中的原始值(undefined、null、布尔值、数字和字符串)与对象(包括数组和函数)...
2017-03-22
javascript操作表格排序实例分析
本文实例讲述了javascript操作表格排序的方法。分享给大家供大家参考。具体如下: 完整例子如下: &lt;html&gt; &lt;head&gt; &lt;title&gt;Table Sort Example&lt;&#x2F...
2017-03-23
回到顶部