原生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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM