JS: 创建标题内容索引

前一段时间做的面试题的简单回顾, 通过遍历文档创建标题


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .content {
            font-weight: bolder;
            font-style: italic;
        }
        div {
            display: inline-block;
        }
        #menu {
            width: 400px;
            float: right;
        }
    style>
head>
<body>
    <div id="content">
        <h1>标题 1h1>
        <div class="content">内容 1div>
        <h2>标题 2h2>
        <div class="content">内容 2div>
        <h1>标题 3h1>
        <div class="content">内容 3div>
        <h2>标题 4h2>
        <div class="content">内容 4div>
        <h3>标题 5h3>
        <div class="content">内容 5div>
        <h1>标题 6h1>
        <div class="content">内容 6div>
        <h2>标题 7h2>
        <div class="content">内容 7div>
    div>
    <div id="menu">
        <ul id="menu-ul">
            <li class="menu-li"><a href="#">例标题1a>li>
        ul>
    div>
    <script>
        function createMenu() {
            // let div = document.getElementById("Content")[0];
            // for (let i = 0, len = div.childNodes.length; i < len; i++) {

            // }
            let h = document.querySelector("#content").querySelectorAll("h1,h2,h3,h4,h5,h6");
            let ul = document.getElementById("menu-ul");
            let s = "";
            for (let i = 0, len = h.length; i < len; i++) {
                ul.innerHTML += ``;
            }
        }
        window.onload = createMenu();
    script>
body>
html>

你可能感兴趣的:(前端笔记)