如何使用JavaScript查找按钮上显示的文本？

在本教程中，我们将讨论使用JavaScript查找按钮上可见文本的不同方法。按钮上的文本显示单击按钮后会发生什么。为了提取按钮上的文本，JavaScript 提供了以下两个属性。

  • 使用innerHTML属性
  • 使用innerText属性

让我们详细讨论以上两种属性。

使用innerHTML属性

innerHTML 属性不仅允许我们获取任何标签内的文本，还允许我们设置任何标签的文本。此属性还允许我们在设置文本时以字符串的形式传递任何其他标签以及文本。它将把传递的标签的属性应用于其中的文本。而如果我们尝试获取任何标签内的文本，它将只返回文本，而不是目标元素内的任何嵌套子标签。

语法

以下语法将显示如何使用innerHTML 属性查找任何元素内的文本。

let variable_name = document.getElementById("id").innerHTML;

上述语法将提取括号内传递的id关联的元素内的文本。

步骤

  • 步骤1 - 我们首先在HTML文档中创建一个按钮并为其分配一个id。
  • 步骤2 - 接下来，我们使用innerHTML 属性获取按钮标签上的文本。
  • 步骤3 - 在第三步中，我们将使用上述步骤中使用innerHTML 属性提取的按钮标签内的文本显示在用户屏幕上。

让我们看看程序示例，我们将找到按钮上可见的文本。

示例1

下面的示例将解释如何使用innerHTML 属性提取按钮标签内的文本：

<html>
<body>
   <button id="btn">click me!</button>
   <p id="result"></p>
   <script>
      let btn = document.getElementById("btn");
      let text = btn.innerHTML;
      document.getElementById("result").innerHTML = "The text visible on
      the button: <b>" + text + "</b>";
   </script>
</body>
</html>

在这个例子中，我们使用innerHTML 属性来使用JavaScript查找按钮上可见的文本。在这里，我们使用其id在btn内获取元素，然后使用btn上的innerHTML 属性获取文本并将其存储在text中。

示例2

下面的示例将显示如果按钮在其内部包含任何其他标签，innerHTML 属性的行为：

<html>
<body>
   <button id="btn"><b>click me!</b></button>
   <p id="result"></p>
   <script>
      let btn = document.getElementById("btn");
      let text = btn.innerHTML;
      document.getElementById("result").innerHTML = "The text visible on the button: <b>" + text + "</b>";
   </script>
</body>
</html>

在上面的示例中，我们可以清楚地看到输出与之前的示例输出相似，而我们在其中使用了粗体标签，这意味着innerHTML 属性将只返回按钮标签内的文本，而不是它包含的任何类型的标签。

使用innerText属性

innerText 属性的行为也类似于innerHTML 属性。与innerHTML 类似，它也允许我们获取和设置任何HTML标签的文本。但与innerHTML 不同的是，它不允许我们传递带有文本的标签。如果这样做，它会将标签视为文本，并按原样在用户屏幕上显示它们。而如果我们尝试提取文本，它只会返回标签内的文本。

语法

以下语法显示了如何使用innerText 属性：

let variableName = document.getElementById("id").innerText;

此语法将提取特定HTML标签内的文本并将其存储在给定的变量中

步骤

  • 步骤1 - 在第一步中，我们将在HTML文档中定义一个按钮标签，我们将尝试查找其文本。
  • 步骤2 - 在下一步中，我们将使用上述语法中所示的innerText 属性来获取按钮标签内的文本。
  • 步骤3 - 在这一步中，我们将结果显示在用户屏幕上。

让我们用程序示例来讨论它的实际实现：

示例3

下面的示例将说明如何使用innerText 属性来获取按钮上可见的文本。

<html>
<body>
   <button id="btn">click me!</button>
   <p id="result"></p>
   <script>
      let btn = document.getElementById("btn");
      let text = btn.innerText;
      document.getElementById("result").innerHTML = "The text visible on the button: <b>" + text + "</b>";
   </script>
</body>
</html>

在上面的示例中，我们使用了innerText 属性来使用JavaScript查找按钮内的文本。与之前的示例类似，我们首先使用其id定位元素，然后使用innetText 属性提取文本

注意 - 如果目标元素在其内部包含任何其他元素，则innerText 和innerHTML 属性的行为将类似，如innerHTML 属性的示例2 所示。

在本教程中，我们学习了如何使用JavaScript 的innerHTML 和innerText 属性查找按钮上可见的文本。我们还讨论了如果按钮标签包含任何其他标签，这两个属性将如何表现。我们可以使用这些属性来获取和设置HTML 的任何元素或标签的文本。

更新于：2022年10月31日

9K+ 次浏览

启动你的职业生涯

完成课程获得认证

开始学习
广告