javascript - 如何通过 Javascript 使用 HTML 页面中现有的标题标签创建书签系统

Question

我想使用 HTML 文档中的标题创建一个书签系统。我想使用标题层次结构来做到这一点。我的标题如下。我试过了但失败了。

我想要像下面这样带有链接的我的书签:

我的 HTML 代码:

    <style>
    #bookMark {
      border: 1px solid black;
      margin-bottom: 10px;
    }
    </style>

    <div id="bookMark">
    <b>Book Mark: </b>
    </div>

    <h1> This is 1st main Heading1 </h1>
      <h2> This is h2 under h1 </h2>
          <h3> This is h3 under h1 and h2 </h3>

      <h2> This is h2 </h2>
         <h3> This is h3</h3> 

    <h1> This is 2nd main Heading1 </h1>
      <h2> This is h2 under h1 </h2> 

    <script src="dom.js"> </script>

我的脚本代码:

    var heading1 = document.getElementsByTagName('h1');
    var heading2 = document.getElementsByTagName('h2');

    for(var i = 0; i < heading1.length; i++){
     var para = document.createElement("p");
     para.innerHTML = document.getElementsByTagName('h1')[i].innerHTML;
     document.getElementById("bookMark").appendChild(para);

      for(var j = 0; j < heading2 .length; j++){
        var para = document.createElement("p");
        para.innerHTML = "&nbsp;"+ document.getElementsByTagName('h2')[j].innerHTML;
        document.getElementById("bookMark").appendChild(para);
      }

    }

我的输出: 这不是维护层次结构

Answer 1

为文档动态创建链接目录列表的一种方法是首先制作标题的映射，使用:

const allHeadings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

然后你可以遍历 map 来构造内容列表:

工作示例:

// GRAB ALL HEADINGS
const allHeadings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

// CREATE MAP OF HEADINGS
let headingsMap = []

allHeadings.forEach((heading) => {
  
  headingLevel = heading.nodeName.replace('H', '');
  headingsMap.push(headingLevel);
});

// BUILD CONTENTS LIST
let contentsList = '';
contentsList += '<div class="contents-list">';
contentsList += '<ul>';

for (let i = 0; i < headingsMap.length; i++) {

  allHeadings[i].id = '10' + i;

  contentsList += '<li>';
  contentsList += '<a href="#10' + i;
  contentsList += '">' + allHeadings[i].textContent + '</a>';
  
  switch (true) {
  
    case (i === (headingsMap.length - 1)) :
      for (j = 0; j < headingsMap[i]; j++) {
        contentsList += '</li></ul>';
      }
    break;
  
    case (headingsMap[(i + 1)] > headingsMap[i]) :
      contentsList += '<ul>';
      break;
      
    case (headingsMap[(i + 1)] < headingsMap[i]) :
      let difference = (headingsMap[i] - headingsMap[(i + 1)]);
      for (j = 0; j < difference; j++) {
        contentsList += '</li></ul>';
      }
      break;
  }
}

contentsList += '</div>';

//  ADD CONTENTS LIST TO PAGE
let contentsListTemplate = document.createElement('template');
contentsListTemplate.innerHTML = contentsList;
document.body.insertBefore(contentsListTemplate.content, document.body.querySelector('*'));

.contents-list {
color: rgb(127, 0, 0);
font-size: 14px;
line-height: 28px;
text-transform: uppercase;
background-color: rgb(255, 255, 191);
border: 1px solid rgb(127, 0, 0);
}

.contents-list a {
  text-decoration: none;
}

.contents-list a:hover {
  text-decoration: underline;
}

<h1> This is 1st main Heading1 </h1>
<h2> This is h2 under h1 </h2>
<h3> This is h3 under h1 and h2 </h3>

<h2> This is h2 </h2>
<h3> This is h3</h3> 

<h1> This is 2nd main Heading1 </h1>
<h2> This is h2 under h1 </h2>
<h2> This is another h2 under h1 </h2>
<h3> This is h3 </h3>
<h4> This is h4 </h4>
<h2> This is h2 </h2>