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实现单选及多选的向右和向左移动实例。分享给大家供大家参考。具体实现方法如下: 方法 一: &lt;body&gt; &lt;h1&gt;实现单选及多选的向右和向左移动&lt;&#x2F;h1&gt; &...
2017-03-27
Javascript实现可旋转的圆圈实例代码
本文实例讲述了Javascript实现可旋转的圆圈。分享给大家供大家参考。具体如下: 这里基于Javascript实现会旋转的圆圈,有点三维变幻的效果,立体感很强,代码主要是基于JS,学习Js脚本编程来说,是个学习JS生成动画的好范例。 运...
2017-03-29
JavaScript实现节点的删除与序号重建实例
本文实例讲述了JavaScript实现节点的删除与序号重建。分享给大家供大家参考。具体如下: 这里演示JavaScript节点的删除与重建方法,删除节点后,会自动重新建立节点,序号自动排列,比如删除当前的第3条数据后,第4条的序号会智能变为...
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实现基于Cookie的存储类实例
本文实例讲述了JavaScript实现基于Cookie的存储类。分享给大家供大家参考。具体分析如下: 通过这个JS类,你可以象使用session一样使用cookie,非常简单了! &#x2F;* * CookieStorage.js *...
2017-03-22
JavaScript数组去重的3种方法和代码实例
数组去重的方法有很多,到底哪种是最理想的,自己不清楚。于是自己测试了下数组去重的效果和性能。测试十万个数据,代码和所耗大概时间如下。 到底采用哪种方法,根据实际情况而定吧。 &#x2F;*方法一: 1,&#x27;1&#x27; 会被认为是...
2017-03-27
JavaScript中String.prototype用法实例
本文实例讲述了JavaScript中String.prototype用法。分享给大家供大家参考。具体如下: &#x2F;&#x2F; 返回字符的长度,一个中文算2个 String.prototype.ChineseLength=functi...
2017-03-23
JS实用的动画弹出层效果实例
本文实例讲述了JS实用的动画弹出层效果的方法。分享给大家供大家参考。具体实现方法如下: &lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W3C&#x2F;&#x2F;DTD XHTML 1.0 Tra...
2017-03-23
javascript原始值和对象引用实例分析
本文实例讲述了javascript原始值和对象引用的方法。分享给大家供大家参考。具体分析如下: 一句话来说:原始值是不可变的,而对象引用是可变的。 js中的原始值(undefined、null、布尔值、数字和字符串)与对象(包括数组和函数)...
2017-03-22
回到顶部