Cannot read property 'querySelectorAll' of null

class Tab {
    constructor(id) {
        this.main = document.querySelector(id);
        this.lis = this.main.querySelectorAll('li');
        this.sections = this.main.querySelectorAll('section');
        this.init();
    }
    //初始化 让相关元素绑定事件
    init() {
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].index = i;//自定义属性index
            this.lis[i].onclick = this.toggleTab;
        }
    }
    //1.切换功能
    toggleTab() {
        console.log(this.index);
    }
    //2.添加功能
    addTab() {

    }
    //3.删除功能
    removeTab() {

    }
    //4.修改功能
    editTab() {

    }
}
var tab = new Tab('.tabsbox');

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>面向对象 Tab</title>
    <link rel="stylesheet" href="css/tab.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/tab.js"></script>
</head>

<body>

    <main>
        <h4>
            Js 面向对象 动态添加标签页
        </h4>
        <div class="tabsbox" id="tab">
            <!-- tab 标签 -->
            <nav class="fisrstnav">
                <ul>
                    <li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>
                    <li><span>测试2</span><span class="iconfont icon-guanbi"></span></li>
                    <li><span>测试3</span><span class="iconfont icon-guanbi"></span></li>
                </ul>
                <div class="tabadd">
                    <span>+</span>
                </div>
            </nav>

            <!-- tab 内容 -->
            <div class="tabscon">
                <section class="conactive">测试1</section>
                <section>测试2</section>
                <section>测试3</section>
            </div>
        </div>
    </main>


</body>

</html>

将<script src="js/tab.js"></script>这块代码放到下面这个位置

</main>

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

</body>

因为浏览器从上到下解析，放dom前面，这样dom未生成， document.querySelector(id)为null，所以你再调用querySelectAll就报错了。

一定要放dom前面，var tab = new Tab('.tabsbox');放到window.onload（网页加载完毕后）事件中执行，这样DOM加载完就能获取到了

window.onload=function(){

var tab = new Tab('.tabsbox');

}

this.main对象里没有querySelectAll这个函数,建议检查this.main是否为null

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

非常感谢您使用有问必答服务，为了后续更快速的帮您解决问题，现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中，希望能得到您的支持与协助！

速戳参与调研>>>https://t.csdnimg.cn/Kf0y

同款pink