使用 JavaScript 获取 Div 元素的文本

作者

使用 JavaScript 获取 Div 元素的文本

Get the Text of a Div element using JavaScript

使用该textContent属性获取div元素的文本，例如
const result = element.textContent. 该textContent属性将返回div及其后代的文本内容。如果元素为空，则返回一个空字符串。

以下是本文示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="container">
      One, <span style="background-color: salmon">Two</span>, Three
    </div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const container = document.getElementById('container');

// 👇️ One, Two, Three
console.log(container.textContent);

// 👇️ One, Two, Three
console.log(container.innerText);

获取div的文本

我们使用
textContent
属性获取div及其后代的文本内容。

该属性返回每个子节点的文本内容的串联，不包括注释。

如果div元素为空，则该属性将返回一个空字符串。

textContent根据 HTML 的结构，您在使用时可能会出现前导或尾随空格。如果您需要删除任何前导或尾随空格，请使用该trim()方法。

索引.js
const container = document.getElementById('container');

// 👇️ "One, Two, Three"
const result = container.textContent.trim();

代码片段还表明我们可以使用
innerText
属性获取元素及其后代的文本内容。

索引.js
const container = document.getElementById('container');

// 👇️ One, Two, Three
const result = container.innerText;

textContent但是，和
innerText属性之间有一些重要的区别：

  1. textContent获取所有元素的内容，包括script和
    style元素，而innerText仅获取“人类可读”元素的内容。
  2. innerText知道样式并且不返回隐藏元素的文本，textContent而不考虑样式。
  3. 使用textContent可以防止跨站点脚本攻击。
innerText将 CSS 样式考虑在内，因此当访问该属性时，将触发回流以确保样式是最新的。

回流可能很昂贵，应尽可能避免。

当您使用textContent和innerText设置元素的文本内容时，元素的子节点将被删除。

使用textContent和innerText属性更新元素的文本内容时，元素的子节点将替换为具有提供的字符串值的单个文本节点。

如果需要设置元素的文本内容，则应改用
insertAdjacentText
方法。

索引.js
const container = document.getElementById('container');

// ✅ Update text content of element
container.insertAdjacentText('beforeend', ', Four');

// ✅ Update HTML content of element
container.insertAdjacentHTML(
  'beforeend',
  '<span style="background-color: coral">, Five</span>',
);

该insertAdjacentText方法不会删除调用它的元素的子节点。

该insertAdjacentText方法采用以下 2 个参数：

  1. position– 相对于应插入文本的元素的位置。可以是以下4种之一：
  • beforebegin– 在元素本身之前。
  • afterbegin– 就在元素内部，在它的第一个孩子之前。
  • beforeend– 就在元素内部，在它的最后一个子元素之后。
  • afterend– 在元素本身之后。
  1. data– 用于创建新文本节点以插入到给定位置的字符串。
在这个例子中，我们在元素的最后一个子元素之后添加了一个字符串。但是，您可以根据您的用例将不同的第一个参数传递给该方法。

该示例还展示了如何使用该insertAdjacentHTML方法将 HTML 插入到div元素中。

该insertAdjacentHTML方法采用与 相同的第一个参数
insertAdjacentText。

索引.js
const container = document.getElementById('container');

// ✅ Update HTML content of element
container.insertAdjacentHTML(
  'beforeend',
  '<span style="background-color: coral">, Five</span>',
);

但是，请注意，您不应在未转义的情况下使用用户生成的输入，因为这会导致跨站点脚本漏洞。

–

发表评论