在前端开发中,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 特性来实现更复杂的交互效果