textContent、innerText、innerHTML的区别和差异

时间: 2019-09-09阅读: 52标签: 区别

先看看下面这个demo,不言自明:  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <style>
        button{
            border:1px solid red;
        }
    </style>
    <div class="contain">
        北京上海广州<span>深圳厦门</span>陕西西安
        <p>台湾香港澳门</p>
    </div>
    <button οnclick="myFunction()">我是按钮</button>
    <script>
        function myFunction(){
            console.log(event.type);
        }
        let container = document.querySelector("body");
        console.log("textContent的内容是:",container.textContent);
        console.log("innerText的内容是:",container.innerText);
        console.log("innerHTML的内容是:",container.innerHTML);
    </script>
</body>
</html>

1、通过textContent属性可以获取指定节点的文本,以及该指定节点所包含后代节点中文本内容,也包括<script>和<style>元素中的内容(这里的不是文本而是CSS样式代码和JavaScript代码)  

2、IE引入了node.innerText属性,该属性会获取指定节点的文本以及后代节点中的文本,不能获取<style>和<script>中的内容。   

3、innerHTML顾名思义就是获取指定元素内的HTML内容。


textContent、innerText、innerHTML的区别和差异 

 1 、textContent属性可以获取指定节点的文本及其后代节点中文本内容,也包括<script>和<style>元素中的内容; innerText也是获取指定节点的文本及其后代节点中文本内容,但不能获取<script>和<style>元素中的内容。 innerHTML是获取HTML文本结构内容。 

 2、textContent会获取display:none的节点的文本;而innerText好像会感知到节点是否呈现一样,不作返回。 也就是说,textContent能够获取元素的所有子节点上的文本,不管这个节点是否呈现;而innerText只返回呈现到页面上的文本。 

 3、要注意设置文本时被替换的可不只是文本了;这时textContent 、innerText属性相当于innerHTML属性,会把指定节点下的所有子节点也一并替换掉。 

 4、由于 innerText 受 CSS 样式的影响,它会触发重排(reflow),但 textContent 不会。

链接: http://www.fly63.com/article/detial/5198

innerHTML、outerHTML、innerText、outerText的区别

innerHTML设置或获取位于对象起始和结束标签内的 HTML;outerHTML设置或获取对象及其内容的 HTML 形式;innerText 设置或获取位于对象起始和结束标签内的文本;outerText 设置(包括标签)或获取(不包括标签)对象的文本

https和http的主要区别

HTTPS和HTTP的区别主要如下:1、https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用。2、http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。

初中高级工程师的区别?

我们知道程序员分 初级,中级, 高级, 这个概念, 并不是以工作年限作为分类依据的。 也就是说, 级别和你工作多少年没有必然的联系。一个初级工程师可能工作很多年依然是初级工程师, 也有的工程师, 工作短短两三年, 就跻身高级工程师的行列。

Css中link和@import的区别

link 除了引用样式文件,还可以引用图片等资源文件,而 @import 只引用样式文件;link 引用 CSS 时,在页面载入时同时加载;@import 需要页面网页完全载入以后加载

img中alt和title属性的区别

在图像标签img中,除了常用的宽度width和高度height属性之外,还有两个比较重要并且也会用到的属性,就是alt和title,这都是用来显示图片内容的具体信息的,但是这两个属性也有不同的地方

require,exports和module.exports的区别

require 的运行机制和缓存策略你了解吗?require 加载模块的是同步还是异步?谈谈你的理解exports 和 module.exports 的区别是什么?require 加载模块的时候加载的究竟是什么?

js中==和===区别?

简单来说: == 代表相同, ===代表严格相同, 为啥这么说呢,这么理解: 当进行双等号比较时候: 先检查两个操作数数据类型,如果相同, 则进行===比较, 如果不同, 则愿意为你进行一次类型转换, 转换成相同类型后再进行比较

JS中map()与forEach()的区别和用法

相同点:1.都是循环遍历数组中的每一项2.每次执行匿名函数都支持三个参数,参数分别为item(当前每一项),index(索引值),arr(原数组)3.匿名函数中的this都是指向window4.只能遍历数组

Js中Array.splice 与 Array.slice 如何区分

splice()方法返回数组中已删除的项,slice()方法返回数组中的选定元素,作为新的数组对象。splice()方法更改原始数组,而slice()方法不更改原始数组。 splice()方法可以使用n个参数:

js数组与对象的区别?

有一个数组a=[1,2,3,4],还有一个对象a={0:1,1:2,2:3,3:4},然后你运行alert(a[1]),两种情况下的运行结果是相同的!这就是说,数据集合既可以用数组表示,也可以用对象表示,那么我到底该用哪一种呢?

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全