资讯专栏INFORMATION COLUMN

innerHTML&outerHTML&innerText&outerTex

draveness / 398人阅读

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

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

代码:
outer

inner one

between

inner two

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

控制台结果

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

outerHTML

控制台结果

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

innerText

控制台结果

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

outerText

控制台结果

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

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/99812.html

相关文章

  • 利用js实现点击按钮实现图片排序

      利用JS就可以实现在点击按钮实现图片排序,做个狠人,直接说:  效果  1 、点击按钮  如果按钮文字是从大到小 将li标签按照从大到小的顺序排列 文字改成从小到大  如果按钮文字是从小到大 将li标签按照从小到大的顺序排列 文字变成从大到小  2 、点击按钮 将li随机排序  <style>   *{   padding:0;   margin:0;   list-style:n...

    3403771864 评论0 收藏0
  • js实现音乐播放器

      这篇文章为大家讲如何用JSd代码实现音乐播放。  音乐播放的主要js代码  音乐数据的数组对象  这里不仅有前端网页提供数据,还有为后面的js代码提供了音乐路径,分享给大家。  {   ablum:"海阔天空",   artist:"Beyond",   id:1,   name:"大地",   path:"musics/1...

    3403771864 评论0 收藏0
  • innerHTMLinnerText、textContent、outerHTML和value,傻傻

    摘要:会省略内嵌的标签名,所以文本的只显示了的内容,并没有显示的标签名也必须是标签对的形式删除了格式信息,所有文本均在一行,所以文本的内容都在一行。也用来设置或获取成对标签之间的内容,并且只关注文本信息。之前,是不支持的。是的亲儿子,放心用吧。 原文地址:https://www.xksblog.top/innerHTML-innerText-textContent-outerHTML-val...

    HollisChuang 评论0 收藏0
  • 使用js对被转义的特殊符号(如:&amp;nbsp;)进行反转义

    var a = & alert(a); var c = document.createElement(div); c.innerHTML = a; a = c.innerText || c.textContent; c = null; alert(a); 吃水不忘挖井人:http://jsfiddle.net/xqin/6jra...

    wums 评论0 收藏0
  • innerHTMLinnerTextouterHTMLouterText区别。

    摘要:设置或获取对象起始标签和结束标签之间的内容。使用上面的操作执行输出执行输出注意到区别了吗,输出中的内容时,标签是不包含在内的。在设置时,执行此时页面显示的内容是,此时标签名没有被解析,当作字符原样输出。 1.innerHTML:设置或获取对象起始标签和结束标签之间的内容。如: hello world segmentfault dazhuaoyao 执行console.log(doc...

    lbool 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<