用JavaScript定义数组的父级

Question

我试图在访问变量时定义一个结构。假设我有一个document和一个body。要在JavaScript中访问它，我使用document和document.body这听起来很棒，所以我想将其应用于我的整个网站。

但是，当我试图定义嵌套对象时，我可以在对象内部定义值，但不能定义对象本身。

我可以做到：

var main = {
nav: {
button: document.querySelectorAll('main nav button')
}
}

并像这样访问它：

main.nav.button[0].innerHTML = 'Test'

但是main和nav呢？！我无法定义它们。。。有什么解决方案可以做这样的吗

var main = 'something' {
nav: 'something else' {
button: 'still something else'
}
}

在JavaScript中？或者JavaScript是如何同时定义document和document.body的？

更新

• 2020年9月30日|问题已澄清

Answer 1

您基本上已经完成了。将main定义为空对象。。

document.body.main = {};

然后在上

document.body.main.nav = {};

只要始终记得在尝试向下点入一个空对象{}之前分配它

Answer 2

使用Proxy对象，您可以自定义并实现各种疯狂的想法。

const handler = {
get: function(target, prop, receiver) {
if (Reflect.has(target, prop)) {
return Reflect.get(...arguments);
} else {
const nextTarget = target.querySelector('scope > ' + prop);
if (!nextTarget) return undefined;
return new Proxy(nextTarget, handler)
}
}
};
const myDocument = new Proxy(document, handler)