JavaScript 如何不使用其子代的innerText获得H1的innerText

获取一个HTML元素的内部文本是开发网络应用程序时的一项常见任务。在JavaScript中，可以使用HTMLElement对象的innerText属性来完成。然而，这只能返回该特定元素的文本，而不是其任何子元素。

如果你需要只获得H1标签的内部文本而不包括其子元素的内部文本，那么有几种方法可以做到。本文将讨论一些在不包括其子元素的innerText的情况下在JavaScript中获取H1标签innerText的方法。

一个节点及其子元素的渲染文本内容由HTMLElement接口的innerText属性表示。作为一个获取器，它模拟了文本；如果用户使用光标来突出元素的内容，然后将它们复制到剪贴板上，就会获得这些文本。

语法

以下是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.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
   <script src="https://code.jquery.com/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>