js在构造函数中定义的dom元素无法使用this调用

Question

构造函数如下

 constructor(id){

        this.init()
        //获取父容器的dom节点
        this.box = document.querySelector(id)
        this.picbox = this.box.querySelector(".image-box")
        this.indexbox = this.box.querySelector(".index_box")
        this.index = 1
    }

调用如下

copyPic(){
       //实现复制队首，队尾的两个图
        const imagebox = document.querySelector(".image-box")
        //const first = imagebox.firstElementChild.cloneNode(true)
        const first = this.picbox.firstElementChild.cloneNode(true)
      //报错说这里的this.picbox没有firstElementChild这个方法
    }   

浏览器就会报错如下

疑惑点

• 上面的这种在方法内获取dom元素是可行的
• 但是使用构造函数中定义的 this.picbox却不行？

  const imagebox = document.querySelector(".image-box")
  const first = imagebox.firstElementChild.cloneNode(true)
  

• 请教一下这个原因是什么？？

Answer 1

document 结构发来， 或者你检查一下你的 id 元素下的层次结构