你可能知道,获取和设置 DOM 元素内部文本可以用这两个属性:Node.textContent 和 Element.innerText。
乍一看,它们似乎做着完全相同的事情,但它们之间有一些微妙但重要的区别。今天,我们来看看它们的作用,以及它们的异同之处。
废话不说,直接看代码。
相同之处
比如下面这个 DOM 元素。
- <p id="sandwich">I love a good tuna sandwich!</p>
Node.textContent 和Element.innerText属性都能获取#sandwich 元素内部的文本。
- let sandwich = document.querySelector('#sandwich');
- // returns "I love a good tuna sandwich!"
- let text1 = sandwich.textContent;
- // also returns "I love a good tuna sandwich!"
- let text2 = sandwich.innerText;
如果元素内部还有其他标签,它们都会忽略。
- <p id="sandwich">I love a good <strong>tuna</strong> sandwich!</p>
- // returns "I love a good tuna sandwich!"
- let textHTML1 = sandwich.textContent;
- // also returns "I love a good tuna sandwich!"
- let textHTML2 = sandwich.innerText;
另外,这两个属性都能用于设置元素内部文本。
- // 替换文本
- // <p id="sandwich">Hello, world!</p>
- sandwich.textContent = 'Hello, world!';
- // 也可以追加
- // <p id="sandwich">Hello, world! And hi, Universe!</p>
- sandwich.innerText += ' And hi, Universe!';
不同之处
看上去做着同样的事情,那么它们有什么区别?
举个例子就清楚了。
- <div class="greeting">
- <style type="text/css">
- p {
- color: rebeccapurple;
- }
- </style>
- <p hidden>This is not rendered.</p>
- <p>Hello world!</p>
- </div>
- let greeting = document.querySelector('.greeting');
- /* 返回
- p {color: rebeccapurple;}
- This is not rendered.
- Hello world!
- */
- let text1 = greeting.textContent;
- // 返回 "Hello world!"
- let text2 = greeting.innerText;
这下总算知道区别了!又躺学了一个知识点~
本文转载自微信公众号「1024译站」,可以通过以下二维码关注。转载本文请联系1024译站公众号。
作者:铭毅天下 本文将介绍如何基于 Elasticsearch + Kibana 实现 IP 地址分布地...
本文转载自公众号:HelloJava。 云原生这个概念已经越来越深入人心,但对“云原...
通常我们部署了istio,都会配置下集群的哪些命名空间下的服务需要被istio管理,...
托管数据中心提供商多年来一直面临来自公共云提供商带来的严峻挑战,这已经不是...
阿里云IoT企业物联网平台提供基于GPS 移动基站、WiFi热点等信息来进行设备定位的...
1.什么是serverless? 1.1 serverless官方定义 serverless 中的 server 是 服务...
简介 网关主要服务于微服务/API,偏向研发人员 反向代理主要面向传统静态web应用...
云计算被业界定义为分布式计算的一种,但是随着信息技术的不断进化,如今的云计...
问题背景 如果快速发放裸金属服务器的根分区大小无法满足业务需求,可以参考本章...
Gartner表示,简化大数据平台是几乎所有分析软件供应商的主要目标。 这主要是为...