javascript - 在全局上下文中具有 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.

标签： javascripthtml

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>