将 HTML 与 JavaScript 分离可提升性能、维护性和灵活性。具体步骤包括：创建外部 .js 文件。在 HTML <head> 中使用 <script> 链接外部文件。在 HTML 中通过事件处理程序、ID 选择器或类选择器调用 JavaScript 函数。使用 addEventListener() 处理 HTML 元素上的 DOM 事件。利用模块化 JavaScript 组织代码，增强可维护性和灵活性。
如何将 HTML 与 JavaScript 分离
HTML 和 JavaScript 是构建现代网站的关键技术，但将它们分离可以带来以下优势：
- 提高性能：外部 JavaScript 文件不会阻止 HTML 渲染，从而提高页面加载速度。
- 可维护性：将 JavaScript 逻辑与 HTML 结构分离，使得代码更容易维护和调试。
- 灵活性：您可以轻松更新或替换 JavaScript 文件，而无需修改 HTML。
以下是如何将 HTML 与 JavaScript 分离：
1. 创建外部 JavaScript 文件
立即学习“前端免费学习笔记（深入）”；
使用 .js 文件扩展名创建一个新文件，例如 script.js。将您的 JavaScript 代码放入该文件中。
2. 将 JavaScript 文件链接到 HTML
在 HTML 文档的<head>部分中，使用<script>标签链接到外部 JavaScript 文件：
<code class="html"><head> <script src="script.js"></script> </head></code>
3. 在 HTML 中调用 JavaScript
您可以使用以下方法在 HTML 中调用 JavaScript 函数：
- 事件处理程序：例如，onClick、onLoad
-
ID 选择器：
document.getElementById("id").method() -
类选择器：
document.querySelector(".class").method()
4. 处理 DOM 事件
当 HTML 元素发生事件（例如点击或悬停）时，可以使用 JavaScript 来响应。使用 addEventListener() 方法将事件监听器附加到元素。例如：
<code class="javascript">const button = document.getElementById("button");
button.addEventListener("click", function() {
// 执行操作
});</code>5. 使用模块化 JavaScript
将 JavaScript 代码组织成模块可以进一步提高可维护性和灵活性。可以使用 JavaScript 模块语法或框架（如 React）来实现模块化。
通过将 HTML 与 JavaScript 分离，您可以创建更快速、更易于维护且更灵活的网站。
