为何无法通过document.body.myElement访问JS创建的DOM元素？

原因主要有3个核心逻辑：

• 首先，你代码里声明的myElement只是当前JS作用域下的普通变量，和DOM树的document.body对象没有任何绑定关系。JS变量的命名空间和DOM元素的属性命名空间是完全独立的，不会因为你给变量取名myElement，就自动在document.body上生成同名属性。
• 其次，你通过document.createElement("div")创建的元素，仅存在于内存中，还没有插入到当前页面的DOM树里。你需要先执行document.body.appendChild(myElement)把它挂载到body下，它才会成为body的子节点，就算挂载完成，也不会自动变成document.body的同名属性。
• 最后，DOM规范里父元素的子节点默认会存放在children、childNodes这类集合属性中，不会直接挂载为父元素的自定义属性。你能调用document.body.anyMethod，是因为这些方法是浏览器预先定义在HTMLBodyElement原型链上的原生内置方法，和自定义变量完全无关。

如果需要实现document.body.myElement的访问方式，有两种常见实现：

1. 手动给document.body挂载自定义属性：

document.body.myElement = myElement

2. 给元素设置id后通过DOM查询获取：

myElement.id = "myElement"
// 后续访问
document.body.querySelector("#myElement").anyMethod

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