JavaScript 遍历文档生成目录结构

简介:  JavaScript 遍历文档生成目录结构

 JavaScript 遍历文档生成目录结构

要遍历 HTML 文档并生成目录结构,你可以使用 JavaScript 来进行 DOM 操作和遍历。以下是一个简单的示例代码,演示了如何遍历文档中的标题元素(例如 <h1><h2><h3> 等),并根据它们的层次结构生成目录:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Outline</title>
</head>
<body>
    <!-- 示例文档 -->
    <h1>Heading 1</h1>
    <p>This is some content under Heading 1.</p>
    <h2>Subheading 1.1</h2>
    <p>This is some content under Subheading 1.1.</p>
    <h2>Subheading 1.2</h2>
    <p>This is some content under Subheading 1.2.</p>
    <h3>Sub-subheading 1.2.1</h3>
    <p>This is some content under Sub-subheading 1.2.1.</p>
    <h1>Heading 2</h1>
    <p>This is some content under Heading 2.</p>
    <h2>Heading 2.1</h2>
    <p>This is some content under Heading 2.</p>
    <h1>小沈阳</h1>
    <p>天下第二也挺好</p>
</body>
<script>
window.onload = function() {
    // 获取文档的所有标题元素
    var headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
    // 创建一个用于存储目录结构的数组
    var outline = [];
    // 遍历标题元素
    headings.forEach(function(heading) {
        // 获取标题的文本内容和级别
        var title = heading.textContent;
        var level = parseInt(heading.tagName.charAt(1));
        // 将标题信息存储到目录结构数组中
        outline.push({ level: level, title: title });
        // 创建一个链接元素,用于跳转到标题所在位置
        var link = document.createElement('a');
        link.textContent = title;
        link.href = '#' + heading.id;
        // 创建一个列表项元素,并将链接添加到其中
        var listItem = document.createElement('li');
        listItem.appendChild(link);
        // 根据标题级别确定应该添加到哪个列表中
        var listContainer;
        if (level === 1) {
            listContainer = document.createElement('ul');
            document.body.appendChild(listContainer);
        } else {
            listContainer = outline[outline.length - 2].listContainer;
        }
        listContainer.appendChild(listItem);
        // 将当前列表容器存储到目录结构数组中,以备后用
        outline[outline.length - 1].listContainer = listContainer;
    });
};
</script>
</html>

image.gif

在这个示例中,我们首先使用 document.querySelectorAll 方法获取文档中的所有标题元素。然后,我们遍历这些标题元素,并根据其级别创建对应的目录结构。最后,我们将生成的目录添加到文档中的某个容器元素中。

需要注意的是,这只是一个简单的示例,可能无法覆盖所有情况。在实际应用中,你可能需要根据具体的需求对代码进行调整和扩展。

image.gif 编辑

目录
相关文章
|
1月前
|
JavaScript 前端开发
JavaScript如何遍历表单元素?
JavaScript如何遍历表单元素?
|
2月前
|
JavaScript 前端开发
js遍历对象的方法
js遍历对象的方法
39 1
|
4月前
|
JavaScript 前端开发
JavaScript中属性遍历的三种方法
JavaScript中属性遍历的三种方法
|
2天前
|
JavaScript 索引
JS 几种循环遍历
JS 几种循环遍历
6 0
JS 几种循环遍历
|
1月前
|
JavaScript 前端开发 API
JavaScript循环遍历常用的7种方法以及常用的数组 API
JavaScript循环遍历常用的7种方法以及常用的数组 API
35 0
|
5月前
|
JavaScript 前端开发
6种JavaScript中常见的循环遍历
6种JavaScript中常见的循环遍历
|
2月前
|
JavaScript 前端开发
【JavaScript精通之道】掌握数据遍历:解锁现代化遍历方法,提升开发效率!
在JavaScript开发中,经常需要对数组、对象等数据结构进行遍历操作。为了提高开发效率,JavaScript提供了多种灵活的遍历方法。本文将介绍JavaScript中常用的数据结构遍历方法,助你更好地操作数据。
|
3月前
|
JavaScript 前端开发 Java
小笔记:如何使用代码注释:关于JavaScript与TypeScript 注释和文档的自动生成
小笔记:如何使用代码注释:关于JavaScript与TypeScript 注释和文档的自动生成
174 0
|
3月前
|
JSON JavaScript 前端开发
Danfo.js专题 - 附:Dnotebook(Danfo Notebook)单机资源与汉化文档
Danfo.js专题 - 附:Dnotebook(Danfo Notebook)单机资源与汉化文档
51 0
|
3月前
|
存储 算法 JavaScript
JS算法-二叉树的后序遍历
JS算法-二叉树的后序遍历