js中 new 的class对象是在dom之前还是之后 - js - 前端 - 技术设计

在 JavaScript 中，使用 new 关键字来创建类的实例时，这个过程本身与时序（即在 DOM 加载之前还是之后）关系不大，而是更多地与 JavaScript 代码的执行顺序有关。然而，当你想要在创建类的实例之后进行 DOM 操作时，你需要确保 DOM 元素已经被加载和解析。

# 创建类的实例

当你使用 new 关键字创建类的实例时，你是在执行一段 JavaScript 代码，这个过程本身并不依赖于 DOM 的状态。例如：

	class MyClass {
	constructor(name) {
	this.name = name;
	}

	sayHello() {
	console.log(`Hello, ${this.name}!`);
	}
	}

	const myInstance = new MyClass("World");
	myInstance.sayHello(); // 输出: Hello, World!

这里的 new MyClass("World") 是在执行一段普通的 JavaScript 代码，与 DOM 的加载与否无关。

当你需要在创建类的实例后进行 DOM 操作时（例如，获取 DOM 元素或修改 DOM），你应该确保这些操作在 DOM 完全加载之后执行。有几种方法可以确保这一点：

将 JavaScript 代码放在文档的底部：将所有脚本标签放在 HTML 文档的底部（ </body> 标签之前），这样可以确保在执行脚本之前页面上的所有元素都已加载。
<body>

<script src="script.js"></script>
</body>

使用 DOMContentLoaded 事件：这个事件在初始 HTML 文档被完全加载和解析完成之后触发，不需要等待样式表、图像和子框架完成加载。

	document.addEventListener('DOMContentLoaded', function() {
	const myInstance = new MyClass("World");
	myInstance.sayHello(); // 此时 DOM 已加载，可以安全地操作 DOM
	});

使用 window.onload 事件：这个事件在页面上所有资源（如图像、脚本文件等）完全加载完成后触发。

	window.onload = function() {
	const myInstance = new MyClass("World");
	myInstance.sayHello(); // 此时所有资源都已加载，可以安全地操作 DOM
	};

创建类的实例本身与时序无关，但进行 DOM 操作时需要确保 DOM 已加载。
通过将 JavaScript 代码放在文档底部或使用 DOMContentLoaded / window.onload 事件，可以确保在执行 DOM 操作时 DOM 是可用的。