全局上下文中具有 ID 的 HTML 元素

Question

如果我声明一个带有 ID 的 HTML 元素，我可以通过以下属性访问它globalThis：console.log(globalThis.foo) // <div id="foo"></div><div id="foo"></div>...但是如果我这样做了，Object.getOwnPropertyDescriptor(globalThis, 'foo')我就会得到undefined。为什么？console.log(Object.getOwnPropertyDescriptor(globalThis, 'foo')) // undefined<div id="foo"></div>我能想到的唯一答案是代理是在window.

Answer 1

如果您查看MDN 文档，getOwnPropertyDescriptor它在第一段中指出，只有直接存在于对象上的属性才会返回有效的属性描述符。因此，如果属性是 a) 在对象原型（或其原型，递归）上定义或 b) 在本机代码中定义，则它不会返回有效的属性描述符。这最有可能是这种情况globalThis。

Object.getOwnPropertyDescriptor() 方法返回给定对象的自有属性（即直接存在于对象上而不是在对象原型链中的属性描述符）的属性描述符。

正如 @52d6c6af 在注释中指出的，具有 ID 的 DOM 元素是在 WindowProperties 对象上定义的，该对象是窗口对象原型链的一部分。

console.log(Object.getOwnPropertyDescriptor(window.__proto__.__proto__, 'foo'))

<div id="foo"></div>

另外，根据经验。不要使用globalThis或window访问 DOM 元素。使用getElementById或querySelector.

const foo0 = globalThis.foo;

const foo1 = document.getElementById('foo');

const foo2 = document.querySelector('#foo');

console.log(foo0 === foo1, foo1 === foo2);

<div id="foo"></div>