m0_57865455
前端小学鸡
2021-05-12 20:08
采纳率: 20%
浏览 168

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>

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • technologist_40
    CSDN专家-showbo 2021-05-12 20:37
    已采纳

    <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');

    }

    点赞 1 评论
  • technologist_32
    CSDN专家-Time 2021-05-12 20:12

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

    点赞 评论
  • QA_Assistant
    有问必答小助手 2021-05-13 12:56

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

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

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

    点赞 评论
  • QA_Assistant
    有问必答小助手 2021-05-13 15:28

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

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

    点赞 评论

相关推荐