如何使用JavaScript选中h1标签内的文本？

嘿，我知道你遇到的问题啦——直接用select()方法选<h1>里的文本是行不通的，因为这个方法只针对<input>、<textarea>这类可编辑的表单元素，普通的块级元素（比如<h1>）并没有内置这个方法哦。

给你两种靠谱的解决方案：

方案一：仅选中文本（模拟鼠标选中效果） #

使用浏览器的Range和Selection API，这是标准且兼容性很好的方法：

<html>
  <h1 id="myText">TextToSelect</h1>
  <script>
    // 获取目标H1元素
    const textElement = document.getElementById("myText");
    // 创建一个范围对象，用于指定选中的内容
    const range = document.createRange();
    // 选中元素内的所有文本内容
    range.selectNodeContents(textElement);
    // 获取页面的选中对象
    const selection = window.getSelection();
    // 先清除之前可能存在的选中范围
    selection.removeAllRanges();
    // 添加新的选中范围，完成文本选中
    selection.addRange(range);
  </script>
</html>

方案二：选中并复制文本（更实用的场景） #

如果需要把选中的文本直接复制到剪贴板，可以结合剪贴板操作：

<html>
  <h1 id="myText">TextToSelect</h1>
  <!-- 加个按钮触发操作 -->
  <button onclick="selectAndCopy()">选中并复制文本</button>
  <script>
    function selectAndCopy() {
      const textElement = document.getElementById("myText");
      const range = document.createRange();
      range.selectNodeContents(textElement);
      const selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);

      // 尝试复制到剪贴板
      try {
        document.execCommand('copy');
        alert('文本已成功复制到剪贴板！');
      } catch (err) {
        console.error('复制失败:', err);
      }
    }
  </script>
</html>

这样就能完美实现你想要的选中H1文本的效果啦！

内容的提问来源于stack exchange，提问作者joseGiu19