使用 JavaScript 获取 Label 元素的文本

作者

使用 JavaScript 获取 Label 元素的文本

Get the Text of a Label element using JavaScript

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

以下是本文示例的 HTML。

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

    <style>
      .bg-aqua {
        background-color: aqua;
      }
    </style>
  </head>

  <body>
    <div>
      <label id="label" for="first_name"
        >What is your <span class="bg-aqua">first</span> name?</label
      >
      <input type="text" name="first_name" id="first_name" />
    </div>

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

这是相关的 JavaScript 代码。

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

// 👇️ What is your first name?
const result1 = label.textContent;
console.log(result1);

// 👇️ What is your first name?
const result2 = label.innerText;
console.log(result2);

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

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

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

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

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

// 👇️ What is your first name?
const result1 = label.textContent.trim();
console.log(result1);

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

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

// 👇️ What is your first name?
const result2 = label.innerText;
console.log(result2);

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

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

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

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

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

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

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

// ✅ Update the text of label element
label.insertAdjacentText('beforeend', '?????');

// ✅ Update the HTML of label element
label.insertAdjacentHTML(
  'beforeend',
  '<span style="background-color: salmon">Some extra HTML here</span>',
);

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

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

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

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

该方法采用与– 应插入内容的位置insertAdjacentHTML相同的第一个参数
。insertAdjacentText

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

// ✅ Update the HTML of label element
label.insertAdjacentHTML(
  'beforeend',
  '<span style="background-color: salmon">Some extra HTML here</span>',
);

请注意，您不应在不转义的情况下将用户输入作为 HTML 插入。

这会让您面临跨站点脚本漏洞。

–