为何 Node.js 环境中没有 DOM 和 BOM？为何 Node.js 环境中没有 DOM 和 BOM？核心答案

为何 Node.js 环境中没有 DOM 和 BOM？

核心答案

因为 DOM 和 BOM 不是 JavaScript 语言本身的一部分，而是浏览器提供的宿主环境 API。

DOM (Document Object Model)：浏览器解析 HTML 后生成的文档对象模型
BOM (Browser Object Model)：浏览器窗口相关的对象（window、navigator、location 等）

Node.js 是服务端运行时，没有浏览器窗口，没有 HTML 文档，自然不需要也无法提供这些 API。Node.js 提供的是服务端所需的 API（文件系统、网络、进程等）。

深入解析

底层机制

1. ECMAScript vs 宿主环境

类别	来源	示例
ECMAScript 标准	JS 语言规范	`Array`, `Promise`, `class`, `async/await`
浏览器宿主 API	W3C/WHATWG 规范	`document`, `window`, `fetch`, `localStorage`
Node.js 宿主 API	Node.js 项目	`fs`, `http`, `process`, `Buffer`

2. 为什么这样设计？

浏览器的职责：                    Node.js 的职责：
├── 渲染网页                      ├── 执行服务端逻辑
├── 处理用户交互                   ├── 文件读写
├── 管理页面导航                   ├── 网络服务
└── 多媒体播放                     └── 系统调用

不同的运行环境有不同的需求，提供不同的 API 是合理的设计。

3. V8 引擎的角色

V8 只负责执行 JavaScript 代码，它本身不包含 DOM/BOM：

V8 引擎提供：
├── JS 代码解析和编译
├── 执行字节码
├── 垃圾回收
└── ECMAScript 标准内置对象

V8 不提供：
├── DOM 操作
├── 网络请求
├── 文件系统
└── 任何 I/O 操作

常见误区

❌ "JavaScript 天生就有 document 和 window"
- 错误！这些是浏览器注入的全局对象
❌ "Node.js 是阉割版的 JavaScript"
- 错误！Node.js 完整实现了 ECMAScript，只是宿主 API 不同
❌ "console.log 是 JavaScript 的一部分"
- 严格来说不是！console 是宿主环境提供的，只是浏览器和 Node.js 都实现了它

代码示例

环境检测

// 检测当前运行环境
function detectEnvironment() {
    // 浏览器环境
    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
        console.log('浏览器环境');
        console.log('window:', typeof window);      // object
        console.log('document:', typeof document);  // object
        console.log('navigator:', typeof navigator); // object
    }

    // Node.js 环境
    if (typeof process !== 'undefined' && process.versions?.node) {
        console.log('Node.js 环境');
        console.log('process:', typeof process);    // object
        console.log('__dirname:', typeof __dirname); // string (CommonJS)
        console.log('window:', typeof window);      // undefined
        console.log('document:', typeof document);  // undefined
    }
}

detectEnvironment();

跨环境兼容代码

// 同构/通用 JavaScript 代码示例
const isNode = typeof process !== 'undefined'
    && process.versions != null
    && process.versions.node != null;

const isBrowser = typeof window !== 'undefined'
    && typeof window.document !== 'undefined';

// 根据环境使用不同的 API
async function fetchData(url) {
    if (isBrowser) {
        // 浏览器使用 fetch API
        return fetch(url).then(res => res.json());
    } else if (isNode) {
        // Node.js 18+ 也有 fetch，或使用 http 模块
        const { default: fetch } = await import('node-fetch');
        return fetch(url).then(res => res.json());
    }
}

Node.js 中模拟 DOM（jsdom）

// 在 Node.js 中使用 jsdom 模拟浏览器环境
const { JSDOM } = require('jsdom');

const dom = new JSDOM(`
    <!DOCTYPE html>
    <html>
        <body>
            <div id="app">Hello</div>
        </body>
    </html>
`);

// 现在可以使用 DOM API 了
const document = dom.window.document;
const app = document.getElementById('app');
console.log(app.textContent); // "Hello"

app.textContent = 'Hello from Node.js!';
console.log(dom.serialize()); // 输出修改后的 HTML

全局对象对比

// 浏览器中的全局对象
// window === globalThis === self (在主线程中)

// Node.js 中的全局对象
// global === globalThis

// 通用写法（ES2020+）
console.log(globalThis); // 在任何环境都能获取全局对象

面试技巧

面试官可能的追问方向

"那 Node.js 怎么做服务端渲染 (SSR)？"
- 回答：使用 jsdom、happy-dom 等库模拟 DOM 环境，或使用 React/Vue 的服务端渲染 API（renderToString）直接生成 HTML 字符串，不需要真正的 DOM
"fetch 是 JavaScript 的一部分吗？"
- 回答：不是，fetch 是 WHATWG 规范定义的 Web API。Node.js 18+ 才原生支持，之前需要 node-fetch 等 polyfill
"为什么 setTimeout 在 Node.js 中也能用？"
- 回答：因为 Node.js 选择实现了这个 API 以保持兼容性，但实现机制不同（Node.js 用 libuv，浏览器用事件循环）
"globalThis 是什么？"
- 回答：ES2020 引入的标准，统一获取全局对象的方式，解决了 window/global/self 在不同环境不一致的问题

如何展示深度理解

区分 ECMAScript 规范 和 宿主环境 API
了解 V8 引擎 的职责边界
知道 jsdom、happy-dom 等工具的存在和用途
理解 同构 JavaScript 的概念和挑战
提及 Deno 和 Bun 等新运行时对 Web API 的支持程度不同

一句话总结

DOM/BOM 是浏览器的"特产"，不是 JavaScript 的"标配"——JS 只是一门语言，能做什么取决于宿主环境给它什么 API。