javascript 生成目录,代码示例

温馨提示：这篇文章已超过298天没有更新，请注意相关的内容是否还可用！

生成目录是指在网页中自动生成包含页面内部链接的目录，以便用户可以快速导航到页面的不同部分。在JavaScript中，可以通过遍历文档中的标题标签（如<h1>、<h2>等）来生成目录。下面是一个示例代码，演示了如何使用JavaScript生成目录：


<!DOCTYPE html>
<html>
<head>
  <title>生成目录示例</title>
</head>
<body>
  <h1>第一节</h1>
  <p>这是第一节的内容。</p>
  <h2>子节1</h2>
  <p>这是子节1的内容。</p>
  <h2>子节2</h2>
  <p>这是子节2的内容。</p>
  <h1>第二节</h1>
  <p>这是第二节的内容。</p>
  <script>
    // 获取所有标题标签
    var headings = document.querySelectorAll('h1, h2');
    // 创建目录列表
    var tocList = document.createElement('ul');
    // 遍历标题标签
    for (var i = 0; i < headings.length; i++) {
      var heading = headings[i];
      // 获取标题文本
      var text = heading.textContent;
      // 创建目录项
      var tocItem = document.createElement('li');
      // 创建目录链接
      var link = document.createElement('a');
      link.href = '#' + heading.id;
      link.textContent = text;
      // 将链接添加到目录项中
      tocItem.appendChild(link);
      // 将目录项添加到目录列表中
      tocList.appendChild(tocItem);
    }
    // 将目录列表添加到页面中的某个元素中
    document.getElementById('toc').appendChild(tocList);
  </script>
  <div id="toc"></div>
</body>
</html>