在前端开发中,JavaScript 和 HTML 是紧密相关的。JavaScript 可以用来操作和修改 HTML 元素,实现交互效果。下面是一个简单的代码示例,演示如何使用 JavaScript 和 HTML 实现交互。
HTML 文件:
<!DOCTYPE html> <html> <head> <title>交互示例</title> </head> <body> <h1 id="heading">这是一个标题</h1> <button id="changeBtn">点击修改标题</button> <script src="script.js"></script> </body> </html>
JavaScript 文件(script.js):
// 获取 HTML 元素 var heading = document.getElementById("heading"); var changeBtn = document.getElementById("changeBtn"); // 添加点击事件监听器 changeBtn.addEventListener("click", function() { // 修改标题内容 heading.innerHTML = "新的标题"; });
在以上示例中,我们首先在 HTML 中定义了一个 h1 标题和一个按钮。接下来,我们在 JavaScript 文件中获取了这两个元素,并为按钮添加了一个点击事件监听器。当点击按钮时,事件处理函数会被触发,并且会修改标题的内容为"新的标题"。
这只是一个简单的示例,你可以根据具体需求使用更多的 JavaScript 和 HTML 特性来实现更复杂的交互效果。