DOM节点和JavaScript命名空间之间的关系是什么？

Question

在这个例子中，为什么变量 foo 没有引发 ReferenceError？虽然没有变量声明，但在 DOM 渲染后它显然在作用域内。DOM 节点 ID 和 JavaScript 命名空间之间的关系是什么？我正在使用 jest 运行此代码。

import React from 'react';
import { render } from '@testing-library/react'

test('renders a div', () => {
  const { utils } = render(<div id="foo"/>)
  expect(foo).toBe(true)
})

Jest 报告:

Expected: true
Received: <div id="foo" />

我真的希望测试会崩溃，因为在实际例子中我无意中将一个未定义的变量传递给了expect()，而这个变量恰好与渲染的DOM节点ID同名。

- davemfish

---

浏览器这样做是因为愚蠢的旧有原因。 - Pointy

@Pointy，你能提供一个记录这种行为的来源吗？ - Robert Stiffler

document.write('<div id="foo"/>'); console.log(window.foo) - Lawrence Cherone

@RobertStiffler 嗯，可能吧，但我已经忍受了将近20年。IE曾经一直这样做，而Firefox没有，因此由此产生了无尽的错误。这类似于全局event引用与传递给事件处理程序的参数之间的问题。 - Pointy

根据被接受的答案，似乎这最初是IE的非标准行为，但现在已经被“HTML5标准化”，其方法是记录和标准化浏览器作者强加给我们的每个可怕的实践，使它们成为Web的一部分，令人沮丧。 :( - Robert Stiffler

Answer 1

带有id的元素成为全局变量

虽然不是同一个问题，但你问题的答案可以在另一个SO问题中找到：

— DOM树中的带有id的元素成为全局变量吗？

- a--m