如何使用 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 查找按钮上可见的文本。在这里，我们使用 btn 中的 id 获取元素，然后使用 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>
在上面的例子中，我们可以清楚地看到，输出与上一个示例的输出类似，但是我们在其中使用了 bold 标签，这意味着 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 中任何元素或标签的文本。
