在 HTML 中,innerHTML、innerText、 和textContent是 DOM(文档对象模型)的属性。它们允许我们读取和更新 HTML 元素的内容。
但它们在包含的内容以及处理 HTML 标签的方式有不同的行为。
读完本文后,我们将了解这三种属性之间的区别以及何时应该使用每种属性。
当我们使用 innerHTML 属性时,它会读取 HTML 元素和元素的文本内容。这意味着当我们使用它来设置元素的内容时,我们可以包含 HTML 标签,浏览器将正确呈现它们。
但是,如果我们要插入来自用户输入或任何不受信任来源的内容,请务必小心使用 innerHTML。攻击者可以使用 HTML中的 标签在我们的应用程序中插入并运行恶意代码。本文稍后将详细介绍这一点。
innerText 属性重点关注渲染的文本内容。当我们用 innerText 来读取元素的内容时,它会返回屏幕上显示的文本。它忽略 HTML 标签。而且它也不包括使用 CSS 样式隐藏的文本。
当我们使用 innerText 来修改元素时,要特别注意。修改元素的 innerText 属性时意味着浏览器可能需要调整布局以适应文本大小的变化,这可能会对性能产生影响。
textContent 属性忽略所有 HTML 标签并仅返回文本。当使用 innerText 读取屏幕上呈现的文本时,textContent 读取标签中的文本。它还会返回所有文本,无论它是否呈现在屏幕上。
此外,textContent 仅处理原始文本,不考虑样式。因此,在关注性能并且不需要考虑样式的情况下,textContent 比 innerText 更合适。
现在,让我们看一些实际示例,以更好地理解这三个属性。
以下是包含四个项目的导航栏的简单标签。最后一个带有文本 Pricing的元素被隐藏(display: none)。让我们使用所有三个属性来读取 nav 元素的内容以查看差异。
<nav>
<a>Homea>
<a>Abouta>
<a>Contacta>
<a style="display: none">Pricinga>
nav>
const navElement = document.querySelector('nav')
console.log(navElement.innerHTML)
innerHTML 属性返回完整内容,包括 nav 元素内的所有 HTML 标签及其文本内容。
const navElement = document.querySelector('nav')
console.log(navElement.innerText)
innerText 属性返回屏幕上呈现的内容。它会忽略所有 HTML 标签。它还忽略隐藏元素(display: none)。
const navElement = document.querySelector('nav')
console.log(navElement.textContent)
textContent 属性返回 HTML 标签中的内容。与 innerText 一样,它也忽略 HTML 标签。但它不考虑样式,因此它返回 Pricing 文本,即使它是隐藏的。
我们还可以使用这三个属性来更新 DOM 元素的内容。更新内容时,这些属性的行为方式与使用它们读取或获取内容时类似。
让我们看一些例子来更好地理解它
下面的标签包括一个 元素和一个空
元素。我们可以使用 innerHTML属性将一些内容插入到
。
<h2>Programming languagesh2>
<ul class="languages-list">ul>
const langListElement = document.querySelector('.languages-list')
langListElement.innerHTML = `
JavaScript
Python
PHP
Ruby
`
使用 JavaScript 代码传递 HTML 列表的字符串作为 innerHTML 的值。innerHTML属性可识别 HTML 标签并相应地设置内容格式。
与 innerHTML 不同的是,textContent 和 innerText 都会忽略 HTML 标签并将所有内容呈现为字符串。
使用相同的示例,让我们看看 innerText 属性将如何更新内容。
const langListElement = document.querySelector('.languages-list')
langListElement.innerText = `
JavaScript
Python
PHP
Ruby
`
请注意 innerText 将忽略 HTML 标签并将它们作为文本的一部分打印在屏幕上。但它仍然可以识别换行符和空格等格式。
textContent 属性除了忽略 HTML 标签外,还会忽略换行符和空格等内容。
const langListElement = document.querySelector('.languages-list')
langListElement.textContent = `
JavaScript
Python
PHP
Ruby
`
由于 textContent 忽略换行符和空格等格式,因此所有文本都打印在同一行上。当我们想要原始文本并且不关心文本格式时,textContent 是一个合适的选择。
由于innerHTML会处理和解释 HTML 标签,因此建议仅在插入来自受信任来源的内容时才使用它,或者当我们已正确清理和验证所提供的内容时。
浏览器将运行我们放入 HTML 中 标签的任何 JavaScript 代码。它还可以打开跨站点脚本攻击 (XSS)的大门,攻击者可以在我们的网页上下文中注入并运行恶意脚本。
看一个例子:
<div id="commentSection">div>
假设我们使用div上述内容作为应用程序中用户评论的容器。我们通常会在没有任何验证或清理评论的情况下使用 innerHTML 添加新评论。
以下是用户如何注入和运行恶意脚本的一个非常基本的示例:
const commentSection = document.getElementById('commentSection')
let userComment = ` This is my comment!`;
commentSection.innerHTML = userComment;
用户故意为 image 的 src 属性给出错误的值。这将触发 onerror 事件并运行相关监听代码。
我们可以想象攻击者如何利用此漏洞注入有害的 JavaScript 代码,从而可能窃取敏感的用户信息、操纵页面内容或执行其他恶意操作。
我们可以使用 innerHTML、innerText、 和 textContent 三个属性来操作 DOM 元素的内容。但他们的行为有所不同。了解它们将帮助我们决定何时适合使用每一种。