通过内联事件、DOM选择器、script标签和外部文件四种方式实现HTML与JavaScript交互，可响应用户操作并动态控制页面行为。
如果您希望网页具备动态功能，例如响应用户点击、输入或页面加载事件，则需要实现HTML与JavaScript的交互。HTML负责结构，而JavaScript负责行为，通过合理结合二者可以实现丰富的页面功能。以下是几种基础且常用的方法来实现HTML与JavaScript的交互。
一、内联事件处理程序
这种方法直接在HTML标签中绑定事件，适合简单场景下的快速开发。虽然可读性较差且不利于维护，但在学习阶段较为直观。
1、在HTML元素的属性中使用事件属性如 onclick、onmouseover 等直接调用JavaScript代码。
2、示例：<button onclick="alert('按钮被点击')">点击我</button>，当用户点击按钮时会弹出提示框。
立即学习“Java免费学习笔记（深入）”；
3、也可以调用已定义的函数，例如：<button onclick="myFunction()">执行函数</button>，前提是JavaScript中已声明 myFunction 函数。
二、通过DOM选择器绑定事件
使用JavaScript选取HTML元素并为其添加事件监听，这种方式将结构与行为分离，更符合现代Web开发规范。
1、使用 document.getElementById() 或其他选择器（如 querySelector）获取目标元素。
2、调用元素的 addEventListener 方法绑定事件类型和响应函数。
3、示例：JavaScript代码中写入 document.getElementById("btn").addEventListener("click", function() { alert("触发点击"); });，对应HTML中需有 id 为 "btn" 的按钮元素。
4、支持多种事件类型，如 focus、blur、keydown 等，可根据需求灵活设置。
三、在script标签中编写JavaScript逻辑
将JavaScript代码嵌入HTML文件的 <script> 标签内，便于直接操作当前页面的DOM结构。
1、在HTML文档的 <head> 或 <body> 部分插入 <script> 标签。
2、在标签内部编写JavaScript代码，例如定义函数或监听页面加载完成事件。
3、可利用 window.onload 确保页面内容加载完毕后再执行脚本，避免因元素未渲染导致操作失败。
4、示例：window.onload = function() { document.querySelector("p").style.color = "red"; }; 可使所有段落文字变为红色。
四、引入外部JavaScript文件
将JavaScript代码保存为独立的 .js 文件，并通过HTML中的 script 标签引入，有利于大型项目中代码的模块化管理。
1、创建一个以 .js 为扩展名的文件，例如 main.js，并在其中编写函数或事件监听逻辑。
2、在HTML文件中使用 <script src="main.js"></script> 引入该文件。
3、确保路径正确，若文件位于子目录中，需包含相对路径，如 src="js/main.js"。
4、外部脚本同样可以访问和操作页面中的所有HTML元素，只要其加载顺序在DOM构建之后或使用DOMContentLoaded事件控制执行时机。
