ES6 Class问题：传递div ID至Image类时getElementById失败求助

嘿，兄弟，我一眼就看出你遇到的问题根源了——你在KK_App构造函数里创建的div元素，此时还只存在于内存中，没有被添加到页面的DOM树结构里，所以document.getElementById根本找不到它！这个方法只能查找已经挂载到页面上的元素，内存里的“游离”元素它是看不到的。

给你两个解决方案，优先推荐第一个，更符合现代前端的写法：

方案一：直接传递DOM元素，跳过id查找 #

既然你已经把创建好的div传给了KK_Image的构造函数，完全没必要多此一举用id去查找，直接用传进来的DOM元素就行，既高效还能避免id冲突的隐患。

修改你的KK_Image类：

class KK_Image {
  constructor(src, width, height, container) {
    // 直接使用传入的容器元素，不用再查id
    this.imgElement = document.createElement('img');
    this.imgElement.src = src;
    this.imgElement.width = width;
    this.imgElement.height = height;
    // 把图片挂载到传入的div里
    container.appendChild(this.imgElement);
  }
}

KK_App的代码保持你的调用逻辑，最后别忘了把创建的div挂载到页面上（比如body），不然图片最终也显示不出来：

class KK_App {
  constructor(src, width, height) {
    this._imgdiv = document.createElement('div');
    this._imgdiv.setAttribute('id', 'posterphoto');
    // 直接把div传给KK_Image实例
    const newpic = new KK_Image('poster_outlines2.png', 240, 250, this._imgdiv);
    // 关键步骤：把div挂载到页面DOM树中
    document.body.appendChild(this._imgdiv);
  }
}

方案二：先挂载div到DOM树，再创建Image实例（不推荐） #

如果你非要用document.getElementById的方式，那必须先把创建的div添加到页面里，再去实例化KK_Image：

调整KK_App的构造函数顺序：

class KK_App {
  constructor(src, width, height) {
    this._imgdiv = document.createElement('div');
    this._imgdiv.setAttribute('id', 'posterphoto');
    // 先把div挂载到页面
    document.body.appendChild(this._imgdiv);
    // 现在div已经在DOM树里了，getElementById就能找到它
    const newpic = new KK_Image('poster_outlines2.png', 240, 250);
  }
}

然后KK_Image里就可以正常用document.getElementById('posterphoto')获取容器了，但这种方式不推荐——一来如果页面上出现重复id的元素会出问题，二来直接传递DOM元素的写法更清晰、性能更好。

总结一下 #

刚创建的DOM元素只有被添加到文档的DOM树中（比如通过appendChild挂载到body或其他已存在的元素上），才能被全局查找方法找到。日常开发里，直接传递DOM实例是更优的选择，能减少不必要的全局查找，代码也更健壮。

内容的提问来源于stack exchange，提问作者barrylachapelle