原生js实现自动生成目录结构

js代码如下，我只是记录下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            scroll-behavior: smooth;
        }
    </style>
</head>
<body>
    <ul id="catalog">
        <h1>章节目录</h1>
    </ul>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <span id="第一章">这是位置</span>
    <h2>第一章</h2>
    <h3>第一章第二小节</h3>

    <h2>第二章</h2>
    <h3>第二章第二小节</h3>
    <h3>第二章第三小节</h3>
    <h3>第二章第四小节</h3>
    <h2>第三章</h2>
    <h2>第四章</h2>
    <h2>第五章</h2>
    <h3>第五章第一节</h3>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <script>
        function AddLi(i){
            let oLi = document.createElement("li");
            let a = document.createElement("a");
            oLi.append(a);
            a.href = "#"+i.innerText;
            a.innerHTML = i.innerText;
            return oLi
        }
        let hs = document.querySelectorAll("h2, h3");
        for(let i of hs){
            i.id = i.innerText;
            if(i.tagName == "H2"){
                let oLi = AddLi(i);      // 添加组装好的li标签
                oLi.className = "one";
                document.querySelector("#catalog").append(oLi);
            }else{
                let li = document.querySelectorAll(".one");
                // 首先在判断最后一个标签有没有ul标签
                let obj = li[li.length-1].querySelectorAll("ul");
                console.log(obj);
                if(obj.length){
                    // 有ul标签
                    console.log("有ul标签");
                    // 就把ul标签取出来，然后把li标签放进去
                    let obj_ul = document.querySelectorAll(".two")
                    let oli = AddLi(i)
                    obj_ul[obj_ul.length-1].append(oli);
                }else{
                    // 没有ul标签
                    console.log("没有ul标签");
                    // 创建一个ul标签
                    let obj_ul = document.createElement("ul");
                    obj_ul.className = "two";
                    // 然后再ul标签中添加li标签
                    let oLi = AddLi(i);
                    obj_ul.append(oLi);
                    // 把这个ul标签放道第一级最后一个li标签中
                    let obj_li = document.querySelectorAll(".one");
                    obj_li[obj_li.length-1].append(obj_ul);
                }
                // 如果没有ul标签，就到上一个li标签里面新建添加ul标签
                // 如果有ul标签，那么就不用创建ul标签了，就直接在ul标签里面添加li标签

            }
        }
    </script>
</body>
</html>
posted @ 2020-10-06 19:59  小默同学  阅读(824)  评论(1)  编辑  收藏  举报