您现在的位置是:首页 > Javascript
当前栏目
知道这两个 DOM 属性区别的,头发应该不多了吧?
2023-03-14 09:33:27 时间
你可能知道,获取和设置 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!';
不同之处
看上去做着同样的事情,那么它们有什么区别?
- Node.textContent 属性获取全部文本内容,包括元素内部那些未渲染到页面的内容。
- Element.innerText 只返回渲染出来的文本,类似于可以用光标和键盘选中的文本部分。
举个例子就清楚了。
- <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译站公众号。
相关文章
- Mozilla 谈 Web 发展愿景:简便、高安全性、强隐私保护
- HarmonyOS之CSS实现哆啦A梦头像
- OpenHarmony—Ets自定义弹窗UI组件封装
- OpenHarmony性能分析工具之Hiperf
- 漂亮的 Linux apt 命令前端,下载速度比 apt 快 16 倍
- 通过编写计算器学习ArkUI组件之四
- 通过编写计算器学习ArkUI组件之三
- OpenHarmony-JS封装Canvas组件饼状图
- 通过编写计算器学习ArkUI组件
- OpenHarmony—浅析ETS开发状态管理
- 知识分享—设计计算器的UI界面
- Mozilla 正在重新设计其开发者网站(MDN)
- OpenHarmony自定义单选组组件实现
- 一篇带给你OpenHarmony Toggle组件
- 小熊派北向通过JS自定义接口调用南向驱动(以点亮LED为例)
- 微软 Windows 11 Dev 预览版 22563 发布:平板电脑优化任务栏、动态小组件(附更新内容大全)
- 设计更新!Windows 11多任务界面新UI多图曝光
- Firefox 这个功能不就是前端初学者的福音吗?
- HarmonyOS自定义JS组件—代码情诗
- UI设计焕新!Windows 11全新记事本&播放器体验