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能有所帮助。
相关推荐
-
javascript innerHTML、outerHTML、innerText、outerText的区别
1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内的文本 outerText 设置(包括标签)或获取(不包括标签)对象的文本 2.示例 <html> <head> <title>Demo</title> <style><!-- body {font-family:"宋体";
-
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">
-
innerHTML,outerHTML,innerTEXT三者之间的区别
与innerHTML不同,outerHTML包括整个标签,而不仅限于标签内部的内容.对于一个id为"testdiv"的div来说,outerHTML.innerHTML以及innerTEXT三者的区别可以通过下图展示出来:
-
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="
-
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 静态属性和静态方法区别详解
静态 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中元素对象的属性方法详解
在 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方法属性
目录 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
随机推荐
- Python图片裁剪实例代码(如头像裁剪)
- phplib中的一些基本语法和函数
- vbs字符串分割函数
- 安全虚拟主机配置技巧
- Java基于正则实现的日期校验功能示例
- Java反射机制及Method.invoke详解
- JavaScript If...Else 声明
- 解决VS2012 Express的There was a problem sending the command to the program问题
- Asp.net 下载功能的解决方案
- php 静态变量与自定义常量的使用方法
- 微信支付 开发账号体系各参数详解
- Python中的列表生成式与生成器学习教程
- jQuery中removeClass()方法用法实例
- IIS7,IIS7.5 升级PHP5.3后站点变慢的解决方法
- C#使用SqlDataAdapter对象获取数据的方法
- C#列出所有物理网络适配器的方法
- numpy数组拼接简单示例
- 微信小程序获取手机网络状态的方法【附源码下载】
- Android实现幻灯片式图片浏览器
- java中Swing五种常见的布局方式