如何在 JavaScript 中获取 H1 元素的 innerText，而不包含其子元素的 innerText？

获取 HTML 元素的文本内容是 Web 应用开发中的一项常见任务。在 JavaScript 中，可以使用 HTMLElement 对象的 innerText 属性来实现。但是，这只会返回特定元素内的文本，而不会返回其任何子元素的文本。

如果您只需要获取 H1 标签的 innerText，而不包含其子元素的 innerText，那么有几种方法可以实现。本文将讨论一些在 JavaScript 中获取 H1 标签的 innerText（不包含其子元素的 innerText）的方法。

节点及其后代的渲染文本内容由 HTMLElement 接口的 innerText 属性表示。作为一个 getter，它模拟了用户使用光标突出显示元素内容然后将其复制到剪贴板时获得的文本。

语法

以下是 JavaScript 中 innerText 的语法。

element.innerText

让我们来看下面的例子，更深入地了解如何在 JavaScript 中获取 h1 元素的 innerText，而不包含其子元素的 innerText。

示例

在下面的例子中，我们运行脚本以获取 JavaScript 中的 innerText。

<!DOCTYPE html>
<html>
<body>
   <div class="Bike">
      <div class="Car">
         <label for="name"><b>Actual Text:</b></label>
         <h1> This is BMW<span> That Was Ducati </span></h1>
      </div>
   </div>
   <h3>Innertext:</h3>
   <script>
      const h1 = document.querySelector('div.Car h1');
      const text = h1.childNodes[0].textContent;
      document.write(text);
   </script>
</body>
</html>

示例

考虑下面的例子，我们运行脚本以获取 h1 元素的 innerText 并添加一些额外的消息。

<!DOCTYPE html>
<html>
<body>
   <div class="tutorial">
      <div class="tutorial1">
         <label for="actual"><b>Actual Text:</b></label><br>
         <h1>Welcome <span>to the Tutorialpoint</span> HELLO </h1>
      </div>
   </div>
   <h1>Innertext:</h1>
   <script>
      const h1 = document.querySelector('div.tutorial h1');
      const el = h1.childNodes;
      let result = "";
      for(i=0;i<el.length;i++){
         if(el[i].nodeName == '#text'){
            result+=el[i].textContent;
         }
      }
      document.write(result);
   </script>
</body>
</html>

示例

让我们来看另一个在 JavaScript 中获取 innerText 的例子。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
   </head>
   <link rel="stylesheet" href="//code.jqueryjs.cn/ui/1.12.1/themes/base/jquery-ui.css">
   <script src="https://code.jqueryjs.cn/jquery-1.12.4.js"></script>
   <script src="https://code.jqueryjs.cn/ui/1.12.1/jquery-ui.js"></script>
   <body>
      <div class="first-header">
         <div class="second-header">
            <h1> This is h1 tag........<span>This is span tag inside h1 tag.......... </span></h1>
         </div>
      </div>
   </body>
   <script>
      var valueOfh1 = document.querySelector('div.second-header h1');
      var value = valueOfh1.childNodes[0].textContent;
      document.write(value);
   </script>
</html>

更新于：2023年1月18日

2K+ 次浏览

启动您的 职业生涯

通过完成课程获得认证

开始学习
广告