innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解

   这篇文章主要介绍了javascript中的innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解,都是个人经验的总结,分享给大家,希望大家能够喜欢。

  innerHTML属性用来读取或设置某个节点内的HTML代码。

  outerHTML属性用来读取或设置HTML代码时,会把节点本身包括在内。

  textContent属性用来读取或设置节点包含的文本内容。

  innerText属性和outerText属性在读取元素节点的文本内容时,得到的值是不一样的。它们的不同之处在于设置一个节点的文本属性时,outerText属性会使得原来的元素节点被文本节点替换掉。注意,innerText是非标准属性,Firefox不支持。

  1.innerText受CSS影响,textcontent没有这个问题。比如,如果CSS规则隐藏了某段文本,innerText就不会返回这段文本,textcontent则照样返回。

  2.innerText返回的文本,会过滤掉空格、换行和回车键,textcontent则不会

  3.innerText属性不是DOM标准的一部分,Firefox浏览器甚至没有部署这个属性,而textcontent是DOM标准的一部分。

  以上就是本文的全部内容了,希望对大家学习熟悉javascript能有所帮助。

时间: 2024-10-03 15:28:58

innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解的相关文章

Javascript中outerHTML、innerHTML和innerText区别详解

示例代码:  代码如下 复制代码 <div id="test"> <span style="color:red">test1</span> test2 </div> 在JS中可以使用:  代码如下 复制代码  document.getElementById('test').innerHTML: 也就是从test对象的起始位置到终止位置的全部内容,包括其内部的Html标签. 上例中的返回值:<span style=

JS中script标签defer和async属性的区别详解_javascript技巧

向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件.由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染,对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟,为了避免这个问题,建议把全部的js引用放在</body>标签之前. script标签存在两个属性,defer和async,因此script标签的使用分为三种情况: 1.<script

天天酷跑魔神战车属性技能怎么样 坐骑魔神战车获取方法详解

坐骑介绍 光看技能的话小编还会认为看到的是之前的捣蛋南瓜,它们之间的技能都非常的相似.在进击模式中相信魔神战车可以变幻成其他有坐骑技能的坐骑:冰锋狼王.流星狮爷.极地白熊.如果光是看技能,魔神战车确实不给力,但有隐藏的组合得分可能会帮助得高分.唯一值得期待的是踩怪爆出的神气扑克牌能有什么效果或者多少分,飞行得分对扑克牌有加成. 搭配推荐 卡牌少年+魔神战车+路西法+大眼熊 搭配分析 魔神战车的选择只能搭配卡牌少年,卡牌少年拥有的是复活技能,更多靠的还是坐骑.宠物和精灵的得分,但魔神战车的得分看起

Android帧动画、补间动画、属性动画用法详解_Android

在安卓开发中,经常会使用到一些动画,那么在开发中,如何使用这些动画呢? 帧动画:不是针对View做出一些形状上的变化,而是用于播放一张张的图片,例如一些开机动画,类似于电影播放,使用的是AnimationDrawable来播放帧动画 res/drawable  <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.andro

JS魔法堂:被玩坏的innerHTML、innerText、textContent和value属性

一.前言   由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它,一般情况下我们可以使用textContent来代替,但它两者是否 就能完全等同呢?在坑爹的表单元素(如input.textarea等)中表现是否依旧诡异呢?文本将记录一些实验结果,避免日后被玩坏.   二.innerHTML   由于innerText和textContent均为对innerHTML内容作不同的处理而成,因此我们需要先明确innerHTML属性的特点.   赋值操作:先对值内容进行模式匹

Javascript教程:innerText属性在火狐实现的实例

文章简介:为firefox实现innerText属性. 很多代码写了又忘忘了又写,很浪费,所以决定养成做笔记的习惯. 知识点: 0.为什么要innerText?因为安全问题 1.为firefox dom模型扩展属性 2.currentStyle属性可以取得实际的style状态 3.IE实现innerText时考虑了display方式,如果是block则加换行 4.为什么不用textContent?因为textContent没有考虑元素的display方式,所以不完全与IE兼容 <html>&l

js基础之DOM中元素对象的属性方法详解_javascript技巧

在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个    文档节点 . 所有的HTML元素都是    元素节点 所有 HTML 属性都是    属性节点 文本插入到 HTML 元素是    文本节点 注释是    注释节点. 最基本的节点类型是Node类型,其他所有类型都继承自Node,DOM操作往往是js中开销最大的部分,因而NodeList导致的问题最多.要注意:NodeList是'动态的',

详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度_javascript技巧

分析并操作 responseXML属性  如果你使用 XMLHttpRequest 来获得一个远程的 XML 文档的内容,responseXML 属性将会是一个由 XML 文档解析而来的 DOM 对象,这很难被操作和分析.这里有五种主要的分析 XML 文档的方式:  1.使用 XPath 定位到文档的制定部分.  2.使用 JXON 将其转换成 JavaScript 对象树.  3.手工的 解析和序列化 XML 为字符串或对象.  4.使用 XMLSerializer 把 DOM 树序列化成字符

js删除属性与增加属性详解

一.js属性操作归纳 我们在前端开发过程中会遇到各种各样的操作,其中就会涉及到操作属性,下面我就给大家说出JS几种比较常用属性操作,当然我不会以实例去讲解,只是简要的说说用法. 1.通用属性操作:obj.setAttribute(属性的名字) 2.class操作:obj.className=" "; 3.img的src的操作:imgobj.src=" "; 4.input的值操作:inputobj.value 5.其它 二.js属性操作中需要注意的问题 1.JS中不