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能有所帮助。

赞 (0)

相关推荐

  • innerHTML,outerHTML,innerText,outerText的用法及区别解析

    <p><div id="div" style="background-color:#ff9966;border:1px #ff0000 dashed;"><span>这是一个层</span></div> <input name="innerHTML" value="innerHTML" type="button" OnClick="

  • innerHTML，outerHTML,innerTEXT三者之间的区别

    innerHTML，outerHTML,innerTEXT三者之间的区别

    与innerHTML不同,outerHTML包括整个标签,而不仅限于标签内部的内容.对于一个id为"testdiv"的div来说,outerHTML.innerHTML以及innerTEXT三者的区别可以通过下图展示出来:

  • JavaScript中innerHTML，innerText，outerHTML的用法及区别

    不废话了,请看下文示例介绍. 用法: <div id="test"> <span style="color:red">test1</span> test2 </div> 在JS中可以使用: test.innerHTML: 也就是从对象的起始位置到终止位置的全部内容,包括Html标签. 上例中的test.innerHTML的值也就是"<span style="color:red">

  • javascript innerHTML、outerHTML、innerText、outerText的区别

    javascript innerHTML、outerHTML、innerText、outerText的区别

    1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内的文本 outerText 设置(包括标签)或获取(不包括标签)对象的文本 2.示例 <html> <head> <title>Demo</title> <style><!-- body {font-family:"宋体";

  • JS中script标签defer和async属性的区别详解

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

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

  • Vue的属性、方法、生命周期实例代码详解

    实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"

  • 对Vue- 动态元素属性及v-bind和v-model的区别详解

    Mustache (双大括号写法)不能在 HTML 属性中使用,应使用 v-bind 指令: <div v-bind:id="dynamicId"></div> 这对布尔值的属性也有效 -- 如果条件被求值为 false 的话该属性会被移除: <button v-bind:disabled="someDynamicCondition">Button</button> 从一开始学习的时候我们就知道v-bind是可以绑定属

  • innerHTML属性，outerHTML属性，textContent属性，innerText属性区别详解

    innerHTML属性用来读取或设置某个节点内的HTML代码. outerHTML属性用来读取或设置HTML代码时,会把节点本身包括在内. textContent属性用来读取或设置节点包含的文本内容. innerText属性和outerText属性在读取元素节点的文本内容时,得到的值是不一样的.它们的不同之处在于设置一个节点的文本属性时,outerText属性会使得原来的元素节点被文本节点替换掉.注意,innerText是非标准属性,Firefox不支持. 1.innerText受CSS影响,t

  • php 静态属性和静态方法区别详解

    php 静态属性和静态方法区别详解

    静态 public.private.protected 静态属性 在属性或方法前加static关键字,即为静态属性 在实际工作中会有一个类的多个对象,可能会共享一份数据. 解决办法: 1:类常量,不能更改. 示例: 2:有时在共享一份数据后,还要所有的共享此数据的对象还允许更改. 所以就有static 语法: 示例: 提示:静态属性与类常量相似(相同),唯一的区分是类常量不可以更改,静态属性可以更改.访问方法是一样的. ::        只能访问类常量.静态属性.静态方法 静态属性需要加$,常

  • vue的mixins属性详解

    首先先给出官网 https://vuejs.org/v2/guide/mixins.html 今天在开发项目的时候要改变一个标签的属性,因为项目中有多个地方都要改(业务逻辑相同),所以就看有没办法只改变一个地方,把方法加进去,最后找官网就发现这个属性. 下面是我的-mixin.js 文件 import {mapGetters, mapMutations, mapActions} from 'vuex' export const playlistMixin = { computed: { ...m

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

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

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

  • 详解jQuery获取特殊属性的值以及设置内容

    jQuery特殊属性方法 val方法 val方法适用于设置和获取表单元素的值,例如input.textarea的值 //获取name的值 $("#name").val(""); //设置name的值 $("#name").val("张三"); html方法 html方法相当于innerHTML,会识别html标签 //获取内容的值$("div").html("<span>今天天气真好&

  • 详解jquery方法属性

    详解jquery方法属性

    目录 1.jquery简介 2.jquery选择器 2.1基本选择器5种 2.2 关系选择器4种 2.3基本过滤选择器8种 2.4内容过滤选择器4种 2.5可见性过滤选择器2种 2.6属性过滤选择器8种 2.7子元素过滤选择器(4种) 2.8表单属性过滤选择器(4种) 2.9表单选择器(11种) 3.jQuery中的DOM操作 3.1文本操作 3.2值操作 3.3属性操作 3.4类操作 3.5样式操作 4.节点操作 4.1遍历节点 4.2过滤节点 4.3创建.插入.删除 5.jquery事件 总

  • 详解JS中的attribute属性

    Attribute是属性的意思,文章仅对部分兼容IE和FF的Attribute相关的介绍. attributes:获取一个属性作为对象getAttribute:获取某一个属性的值 object.getAttributes(attribute) getAttribute方法不属于document对象,所以不能通过document对象获取,只能通过元素节点的调用.例如document.getElementsByTagName("p")[0]. getAttributes("tit

随机推荐