<think>我们正在Node
.js环境中模拟
document.body而不使用jsdom。由于Node
.js没有内置的DOM，我们需要自己创建一个轻量级的模拟。
思路：
1
. 创建一个简单的对象来模拟
document.body。
2
. 实现一些常用的方法，例如appendChild、removeChild等。
3
. 考虑属性，比如inner
HTML、textContent等。
4
. 注意：我们不需要完全实现DOM规范，只需根据需求模拟必要的部分。
但是，用户要求不使用jsdom，所以我们要自己模拟。
然而，请注意，完全模拟一个完整的DOM环境是非常复杂的。通常，我们只需要模拟我们实际用到的部分。
假设我们的使用场景比较简单，比如只需要能够添加节点、设置inner
HTML等。
我们可以这样设计：
- 创建一个
Body类，代表
document.body。
- 创建一个Element类，代表一般的DOM元素。
由于我们只模拟
body，我们可以简化：
例如，我们可能只需要：
document.body.inner
HTML =
...;
document.body.appendChild(
...);
我们可以这样：
let
document = {
body: new
Body()
};
class
Body {
constructor() {
this
.children = []; // 子节点
this
.inner
HTML = ''; // 我们可以根据设置inner
HTML来更新children？但是这样比较复杂。或者我们只维护children，然后inner
HTML的setter和getter根据children来生成？
// 但是注意，inner
HTML设置时是字符串，而appendChild是添加节点对象。所以我们需要两种方式。
// 为了简化，我们可以选择只支持其中一种，或者都支持但保持一致性比较困难。
// 另一种思路：我们只模拟我们需要的API，不追求完全一致。比如，我们只记录inner
HTML字符串，不解析它。这样，当我们设置inner
HTML时，我们就存储字符串，但是appendChild则无法使用（因为appendChild需要操作节点，而inner
HTML是字符串）。所以我们需要确定使用场景。
// 因此，我们需要知道用户代码如何使用
document.body。如果用户代码混合使用inner
HTML和appendChild，那么我们需要维护一个DOM树，这就会变得复杂。
// 考虑到不使用jsdom，且用户可能只需要基本功能，我们可以选择只模拟一种方式。
// 这里我们采取两种方式独立：即设置inner
HTML就存储字符串，而appendChild则往children数组里添加节点。但是这样两者会互相覆盖？显然不行。
// 因此，我们需要统一：要么用节点树，要么用字符串。但inner
HTML和节点操作是两种不同的方式，不能同时使用。
// 所以，我们决定：只模拟节点操作（即使用appendChild等），而inner
HTML的getter返回由节点树生成的字符串，setter则解析字符串生成节点树？但是解析
HTML字符串很复杂，我们不想做。
// 折中方案：我们只模拟节点操作，忽略inner
HTML的setter，或者只允许inner
HTML的setter清
空现有节点并添加一个文本节点（因为无法解析
HTML）。同样，inner
HTML的getter返回所有子节点的outer
HTML拼接（但我们的节点没有实现outer
HTML）。
// 因此，我们可能需要实现一个非常简化的版本。
// 根据需求，我们假设用户只需要appendChild和inner
HTML（作为字符串存储，不解析）？这样就不一致了。
// 明确需求：用户的问题是在Node
.js中模拟
document.body而不使用jsdom。所以，我们只需要模拟出足够让用户代码运行的环境。
// 因此，我们假设用户代码可能使用
document.body.appendChild和
document.body.inner
HTML，但我们需要知道用户代码具体如何使用。
// 由于没有具体说明，我们设计两种方式独立，并给出警告：如果同时使用，则可能不一致。
// 但是，这很容易出错。
// 因此，我们决定只支持节点操作，不支持inner
HTML的设置（或者只支持设置
空字符串，或者设置纯文本）。inner
HTML的获取可以返回一个固定的字符串，或者返回由子节点生成的简单字符串（比如只考虑文本节点）。
// 具体实现：
// 我们创建一个Node类，然后Element继承Node，Text节点也继承Node。
// 但是，为了简化，我们只实现一个Element类，并且只支持标签名和文本内容。
// 计划：
// class Node {
// constructor() {
// this
.nodeType = 1; // 1表示元素，3表示文本
// this
.childNodes = [];
// }
// }
// class Element extends Node {
// constructor(tagName) {
// super();
// this
.tagName = tagName
.toUpperCase();
// }
// }
// class Text extends Node {
// constructor(data) {
// super();
// this
.nodeType = 3;
// this
.data = data;
// }
// }
// 然后，
Body类继承Element，tagName为'
BODY'。
// 但是，我们不需要那么复杂。我们可以只用一个类来表示节点，通过一个属性来区分是元素还是文本。
// 我们定义：
// class DomNode {
// constructor(type, value) {
// this
.nodeType = type; // 1: element, 3: text
// if (type === 1) {
// this
.tagName = value; // 标签名
// this
.children = []; // 子节点
// } else if (type === 3) {
// this
.data = value; // 文本内容
// }
// }
// }
// 然后，
body就是一个类型为1，标签名为'
BODY'的DomNode。
// 但是，这样我们无法设置属性（比如id, class等）。如果需要，我们可以添加一个attributes属性。
// 由于我们不知道用户需要哪些属性，我们可以先不考虑，等到需要时再添加。
// 因此，我们设计如下：
class DomNode {
constructor(type, value) {
this
.nodeType = type;
if (type === 1) {
this
.tagName = value;
this
.children = [];
} else if (type === 3) {
this
.data = value;
}
}
appendChild(node) {
if (this
.nodeType !== 1) {
throw new Error('Only element nodes can have children');
}
this
.children
.push(node);
}
removeChild(node) {
if (this
.nodeType !== 1) {
throw new Error('Only element nodes can have children');
}
const index = this
.children
.indexOf(node);
if (index !== -1) {
this
.children
.splice(index, 1);
}
}
// 简单实现inner
HTML：获取所有子节点的
HTML字符串（只考虑一层，且文本节点直接转义？）
// 注意：这个实现非常基础，不考虑属性，也不考虑嵌套。
get inner
HTML() {
if (this
.nodeType !== 1) {
return '';
}
return this
.children
.map(child => {
if (child
.nodeType === 1) {
// 元素节点，我们返回开始标签+子节点的inner
HTML+结束标签
// 但是注意，我们的节点没有属性，所以直接返回标签
return `<${child
.tagName
.toLowerCase()}>${child
.inner
HTML}</${child
.tagName
.toLowerCase()}>`;
} else if (child
.nodeType === 3) {
// 文本节点，直接返回内容（需要转义
HTML特殊字符）
return escape
Html(child
.data);
}
return '';
})
.join('');
}
set inner
HTML(
html) {
if (this
.nodeType !== 1) {
return;
}
// 由于解析
HTML非常复杂，我们无法实现一个完整的解析器。
// 所以，我们这里只清
空子节点，然后添加一个文本节点，内容就是
html字符串（不解析）。
// 或者，我们可以抛出一个错误，表示不支持设置inner
HTML，或者只支持
空字符串。
// 但是这样会破坏用户代码。
// 我们选择：清
空子节点，然后添加一个文本节点，内容为
html字符串（但这样不符合inner
HTML的语义，因为inner
HTML应该是解析
HTML的）。
// 所以，我们只能不支持设置inner
HTML，除非我们实现一个简单的解析器（但这里不现实）。
// 因此，我们只清
空子节点，不添加任何节点。这样设置inner
HTML为
空字符串可以工作，但设置其他字符串则不会添加任何节点（这也不对）。
// 折中：我们只支持设置
空字符串，用于清
空。非
空字符串则抛出警告并清
空。
this
.children = [];
if (
html !== '') {
// 我们可以添加一个文本节点，内容是
html字符串（但这样不是真正的解析，所以用户通过inner
HTML设置的
HTML字符串在通过inner
HTML获取时，会原样返回，但不会被解析成节点）
// 所以，我们添加一个文本节点，这样至少通过inner
HTML获取时能看到这个字符串。
this
.appendChild(new DomNode(3,
html));
}
}
}
function escape
Html(text) {
// 简单转义
return text
.replace(/[&<>"']/g, function(m) {
return {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
}[m];
});
}
// 然后，我们创建
body节点：
let
body = new DomNode(1, '
BODY');
let
document = {
body };
// 但是，这样我们只能模拟
body，而且inner
HTML的设置并不符合标准。
// 考虑到用户可能只需要appendChild，我们可以忽略inner
HTML的setter，或者提供另一种方式。
// 另一种方案：我们完全不实现inner
HTML，或者将其设置为一个存根函数（stub），当调用时抛出错误。
// 但是，用户可能只需要
document.body.appendChild，所以我们先实现这个。
// 因此，我们可以简化：不实现inner
HTML的setter，只实现getter（返回固定字符串或
空字符串）。或者，我们可以让用户避免使用inner
HTML。
// 我们重新设计：只支持appendChild和removeChild，以及一个children数组。不提供inner
HTML。
// 修改：
class
BodySimulator {
constructor() {
this
.children = [];
}
appendChild(node) {
this
.children
.push(node);
}
removeChild(node) {
const index = this
.children
.indexOf(node);
if (index !== -1) {
this
.children
.splice(index, 1);
}
}
}
let
document = {
body: new
BodySimulator()
};
// 这样，我们可以创建节点对象，但节点对象可以是任何对象，只要能被添加进children数组。例如：
// let div = { tagName: 'div' };
//
document.body.appendChild(div);
// 但是，用户代码可能期望节点有特定的属性（比如nodeType），所以我们可以提供一个简单的节点构造函数。
function createElement(tagName) {
return {
tagName: tagName
.toUpperCase(),
nodeType: 1,
children: [] // 如果需要，也可以有children
};
}
// 这样，用户就可以：
// let div = createElement('div');
//
document.body.appendChild(div);
// 但是，如果用户代码使用
document.createElement，我们还需要模拟
document.createElement。
// 因此，我们可以：
let
document = {
body: new
BodySimulator(),
createElement(tagName) {
return createElement(tagName);
}
};
// 这样，我们就模拟了一个非常基础的
document。
// 总结：我们创建一个
BodySimulator类，它只有appendChild和removeChild方法，以及一个children数组。同时，我们提供
document.createElement方法。
// 但是，用户可能还需要其他方法，比如textContent，或者事件监听等。但问题只要求模拟
document.body，所以我们只实现最基础的部分。
// 因此，我们最终代码如下：
}
}
然而，考虑到用户可能只需要一个能运行的环境，我们可以这样实现：
// 模拟
document对象
const
document = {
body: {
children: [],
appendChild(node) {
this
.children
.push(node);
},
removeChild(node) {
const index = this
.children
.indexOf(node);
if (index > -1) {
this
.children
.splice(index, 1);
}
}
},
createElement(tag) {
return {
tagName: tag
.toUpperCase(),
nodeType: 1,
children: [],
appendChild(node) {
this
.children
.push(node);
},
removeChild(node) {
const index = this
.children
.indexOf(node);
if (index > -1) {
this
.children
.splice(index, 1);
}
}
};
}
};
// 如果需要文本节点，可以增加createTextNode方法
document.createTextNode = function(text) {
return {
nodeType: 3,
data: text
};
};
// 这样，我们就有了一个非常基础的模拟。
// 注意：这个模拟非常简陋，只能用于简单的测试或演示。
// 使用示例：
const div =
document.createElement('div');
const text =
document.createTextNode('Hello, world!');
div
.appendChild(text);
document.body.appendChild(div);
// 现在，
document.body.children[0]就是div，div
.children[0]就是文本节点。
// 但是，如果用户代码使用inner
HTML，我们还没有实现。我们可以给
body和元素节点添加inner
HTML的getter和setter，但如之前所说，setter的解析很复杂。所以，如果用户需要设置inner
HTML，我们可以提供一个简单的实现：只存储字符串，不解析。但这样，通过appendChild添加的节点和inner
HTML就没有关联。
// 因此，我们选择不实现inner
HTML，除非用户特别要求。如果用户需要，我们可以单独讨论。
// 所以，根据问题，我们模拟了
document.body的appendChild和removeChild，以及创建元素和文本节点的方法。
// 如果用户需要其他方法（如getElementById等），则需要进一步模拟，但问题没有要求。
// 因此，我们给出以下代码作为解决方案：
// 创建一个模拟的
document对象
const
document = {
body: {
children: [],
appendChild(node) {
this
.children
.push(node);
},
removeChild(node) {
const index = this
.children
.indexOf(node);
if (index > -1) {
this
.children
.splice(index, 1);
}
},
// 可选：添加inner
HTML的getter，返回一个
空字符串或简单拼接
get inner
HTML() {
// 简单返回子节点的outer
HTML拼接（这里我们只处理一层，且假设节点都有outer
HTML属性，但我们没有实现）
// 所以，我们返回
空字符串
return '';
},
set inner
HTML(
html) {
// 清
空子节点
this
.children = [];
// 这里无法解析
html，所以我们不做任何操作，或者可以添加一个文本节点？
// 如果
html不为
空，我们添加一个文本节点
if (
html) {
const textNode = {
nodeType: 3,
data:
html
};
this
.children
.push(textNode);
}
}
},
createElement(tag) {
return {
tagName: tag
.toUpperCase(),
nodeType: 1,
children: [],
appendChild(node) {
this
.children
.push(node);
},
removeChild(node) {
const index = this
.children
.indexOf(node);
if (index > -1) {
this
.children
.splice(index, 1);
}
},
// 同样，实现一个简单的inner
HTML
get inner
HTML() {
return '';
},
set inner
HTML(
html) {
this
.children = [];
if (
html) {
const textNode = {
nodeType: 3,
data:
html
};
this
.children
.push(textNode);
}
}
};
},
createTextNode(text) {
return {
nodeType: 3,
data: text
};
}
};
// 注意：这个模拟的inner
HTML设置并不符合标准，它只是将整个
html字符串作为一个文本节点添加。所以，如果用户代码设置inner
HTML为一个
HTML字符串，然后通过children来访问，得到的将是一个文本节点，而不是解析后的元素。
// 因此，如果用户代码需要解析
HTML字符串，则必须使用其他方法（比如自己解析并创建节点），或者只能使用jsdom。但问题要求不使用jsdom，所以如果用户需要解析
HTML，这个模拟就不够。
// 所以，我们只提供这个基础版本，用户可以根据需要扩展。
// 最后，我们导出一个全局的
document对象（在Node
.js中，可以通过global
.document=
document来设置）。
global
.document =
document;
// 这样，在Node
.js环境中，就可以使用这个模拟的
document了。
但是，请注意，这个模拟非常有限，可能无法满足复杂的DOM操作。
如果用户的需求只是简单的添加节点，那么应该够用。
因此，我们给出以下完整代码：</think>在 Node
.js 环境中模拟 `
document.body` 而不使用 jsdom 是可行的，但需要理解 Node
.js 本身没有 DOM 实现。以下是两种轻量级解决方案：
### 方案 1: 自定义模拟对象（推荐）
创建基础模拟对象实现常用 DOM 方法：
```javascript
// 创建自定义模拟对象
class DOMElement {
constructor(tagName) {
this
.tagName = tagName
.toUpperCase();
this
.children = [];
this
.attributes = {};
this
.inner
HTML = '';
}
appendChild(node) {
this
.children
.push(node);
return node;
}
removeChild(node) {
const index = this
.children
.indexOf(node);
if (index > -1) this
.children
.splice(index, 1);
}
setAttribute(name, value) {
this
.attributes[name] = value;
}
getAttribute(name) {
return this
.attributes[name];
}
}
// 模拟
document.body
const
document = {
body: new DOMElement('
body')
};
// 使用示例
const div = new DOMElement('div');
div
.setAttribute('id', 'test');
document.body.appendChild(div);
console
.log(
document.body.children[0]
.tagName); // 输出 "DIV"
console
.log(
document.body.children[0]
.getAttribute('id')); // 输出 "test"
```
### 方案 2: 使用 `linkedom`（轻量级替代）
如果允许使用更小的库，`linkedom` 是 jsdom 的轻量替代品（仅 2KB）：
```bash
npm install linkedom
```
```javascript
// 使用 linkedom 模拟
import { parse
HTML } from 'linkedom';
const {
document } = parse
HTML(`
<
html>
<
body></
body>
</
html>
`);
// 直接操作 DOM
const div =
document.createElement('div');
div
.id = 'test';
document.body.appendChild(div);
console
.log(
document.body.inner
HTML); // 输出 "<div id="test"></div>"
```
### 关键区别
| **方法** | **自定义对象** | **linkedom** |
|------------------------|----------------------------------------|----------------------------------|
| 依赖 | 无 | 需安装 `linkedom` (2KB) |
| 功能完整性 | 需手动实现所需方法 | 基本完整 DOM API 支持 |
| 内存占用 | 极低 | 较低 |
| 适用场景 | 简单操作（如结构验证） | 需要接近真实 DOM 的行为 |
| 解析
HTML | 不支持 | 支持 `parse
HTML()` |
### 注意事项
1
. **事件处理**：两种方案均不包含事件系统，如需事件需手动实现
2
. **样式计算**：不模拟 CSSOM，样式相关操作需自行处理
3
. **性能考虑**：完整 DOM 模拟可能影响性能，建议仅实现必要方法
4
. **兼容性**：自定义对象需确保实现代码中使用的所有 DOM 方法
> 对于简单测试场景，自定义对象更轻量；若需更接近浏览器的行为，推荐使用 `linkedom` 作为 jsdom 的替代方案。两种方式都比完整 jsdom 更节省资源[^1]。
本文对比了两种在网页中批量创建元素的方法：一种是通过DocumentFragment进行DOM操作，另一种是利用字符串拼接后再设置innerHTML属性。实验结果显示，后者在执行效率上更胜一筹。此外，还特别提醒开发者需要注意JS代码的位置，以避免出现document.body未定义的问题。
扫一扫
4068
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
