如何为您的文章创建目录

document.querySelectorAll('main h2[id], main h3[id], main h4[id]);

这样，它就会只返回我们需要的标题元素了。

如何用Markdown格式创建目录

很多博客平台都支持Markdown格式，因此我们首先会学习如何使用它来创建目录。

首先，我们需要将得到的NodeList对象转换为数组。我们可以使用展开运算符来实现这一点：

[...document.querySelectorAll('main h2[id], main h3[id], main h4[id]')];

接着，我们可以遍历这个数组，为每个标题元素生成对应的Markdown链接。

const headers = [...document.querySelectorAll('main h2[id], main h3[id], main h4[id]')];

headers.map(function(node) {
// H2标题元素的缩进应为0
const level = parseInt(node.nodeName.replace('H', '')) - 2;
const hash = node.getAttribute('id');
const indent = ' '.repeat(level * 2);
return `\({indent}* [\){node.innerText}](#${hash})`;
});


最终生成的代码如下：

(4) ['* [Dev Tools](#heading-dev-tools)', '* [JavaScript Console](#heading-javascript-console)', '* [Understanding the DOM Structure](#heading-understanding-the-dom-structure)', '* [What to do if I don’t have headers?](#heading-what-to-do-if-i-dont-have-headers)']

如果想要获取这些链接对应的文本，我们可以将数组中的所有元素用换行符连接起来，然后使用console.log来显示结果。如果不使用换行符，输出的结果会包含多个连续的换行字符。

const headers = [...document.querySelectorAll('main h2[id], main h3[id], main h4[id]')];

console.log(headers.map(function(node) {
// H2标题元素的缩进应为0
const level = parseInt(node.nodeName.replace('H', '')) - 2;
const hash = node.getAttribute('id');
const indent = ' '.repeat(level * 2);
return `\({indent}* [\){node.innerText}](#${hash})`;
}).join('\n'));


这篇文章的输出结果将会是这样的：

* [开发工具](#heading-dev-tools)
* [JavaScript控制台](#heading-javascript-console)
* [理解DOM结构](#heading-understanding-the-dom-structure)
* [用Markdown创建目录结构](#heading-creating-toc-in-markdown)
  * *这是一个虚拟的标题栏*

我添加了一个虚拟的子标题。虽然某些平台在编写文章时不支持Markdown格式，但当用户将Markdown内容复制粘贴后，这些平台通常能够正常显示这些内容。文章开头的目录结构就是通过复制并粘贴上面那段JavaScript代码生成的Markdown内容来创建的。

如何创建HTML目录结构

如果你的平台不支持Markdown格式（比如Medium），你可以先生成HTML代码，预览后将其复制到剪贴板中，然后粘贴到你正在使用的平台的编辑器中，这样格式应该会保持不变。

要将Markdown转换为HTML，你可以使用任何在线工具，但下面这段代码会教你如何自己编写这样的转换脚本。一旦你掌握了这个方法，以后操作起来就会更快了。

const headers = [...document.querySelectorAll('main h2[id], main h3[id], main h4[id]')]

function indent(state) {
    return ' '.repeat((state.level - 1) * 2);
}

function closeUlTags(state, targetLevel) {
    while (state.level > targetLevel) {
        state.level--;
        state_lines.push(`${indent(state)}
`);
    }
}

function openUlTags(state, targetLevel) {
    while (state.level < targetLevel) {
        state_lines.push(`${indent(state)}
 {
    const level = parseInt(node.nodeName.replace('H', ''));

    closeUlTags(state, level);
    openUlTags(state, level);

    const hash = node.getAttribute('id');
    state_lines.push `\({indent(state)}
${node.innerText}
`);
    return state;
}, { lines: [], level: 1 });

closeUlTags(result, 1);

console.log(result(lines.join('\n'));

这就是这篇文章中提到的代码所生成的HTML输出结果：

  
目录结构
  
开发工具
  
JavaScript控制台
  
理解DOM结构
  
用Markdown创建目录结构
  
如何创建HTML目录结构
  

    
第三级标题
    

      
第四级标题
    
  
  
如果没有标题栏该怎么办？

我在文末添加了一些标题，这样你们就可以看到，这种方法适用于任何层级的嵌套标题。需要注意的是，列表中的第一个元素也是目录。

将生成的HTML代码复制到编辑器中

大多数所谓的WYSIWYG编辑器都是使用HTML格式的，因此你应该可以将带有格式设置的HTML代码复制并粘贴到这些编辑器中。最简单的方法就是将代码保存为文件，然后打开该文件并选中所需的文本。

如果我没有标题该怎么做？

你需要找到那些可以通过CSS进行操作的元素。如果这些元素是带有特定类的p标签（比如“header”类），那么你可以使用p.header代替h2。

如何为DEV.to创建目录

如果你使用的DOM结构不同，也可以使用不同的DOM方法来提取所需的元素。例如，在DEV.to上，标题的格式是这样的：

<h2>
  <a name="overview" href="#overview">
  </a>
  Overview
</h2>

因此，选择器应该写作main h2。但是当你执行这段代码时：

[...document.querySelectorAll('main h2, main h3, main h4')];

你会发现，页面上的标题数量远远超过了正文内容。幸运的是，CSS中提供了一个新的选择器:has()。因此，针对一个特定标题的选择器可以写成main h2:has(a[name])。

以下是完整的代码：

const selector = 'main h2:has(a[name]), main h3:has(a[name]), main h4:has(a[name])';
const headers = [...document.querySelectorAll(selector)];

console.log(headers.map(function(node) {
    // H2标题的缩进应为0
    const level = parseInt(node.nodeName.replace('H', '')) - 2;
    // 这种方法可以获取链接地址
    // 你也可以直接访问标签的href属性，并从结果字符串中删除#符号
    const hash = node.querySelector('a').getAttribute('name');
    const indent = ' '.repeat(level);
    return `\({indent}* [\){node.innerText}](#${hash})`;
}).join('\n'));

如果您喜欢这篇文章，不妨在社交媒体上关注我：(Twitter/X、GitHub和/或LinkedIn)。您也可以访问我的个人网站，以及我的新博客。