1、事件监听器
JavaScript 可以在 HTML 元素上设置事件监听器，以便在特定事件（例如单击、鼠标悬停或键盘敲击）发生时触发 JavaScript 代码。
例如，以下代码段演示了如何在 HTML 元素上设置单击事件监听器：
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
alert("Hello World!");
}
</script>2、DOM 操作
JavaScript 可以使用 Document Object Model (DOM) 操作 HTML 元素。DOM 是一种表示 HTML 页面的树形结构，可以使用 JavaScript 修改 HTML 元素的内容、属性和样式。
例如，以下代码段演示了如何使用 JavaScript 获取 HTML 元素的值并将其更改为新值：
<p id="demo">Hello World!</p>
<script>
var x = document.getElementById("demo");
x.innerHTML = "Hello JavaScript!";
</script>3、Ajax
Ajax 是一种使用 JavaScript 发送和接收数据的技术。它可以使 Web 应用程序与服务器进行交互，而无需刷新整个页面。
例如，以下代码段演示了如何使用 Ajax 发送 GET 请求并在 HTML 页面上显示响应数据：
<button onclick="loadDoc()">Click me</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>4、表单交互：
HTML 中的表单元素（例如输入框、下拉列表、复选框等）可以与 JavaScript 进行交互。JavaScript 可以在表单元素上设置事件监听器，并读取或修改表单元素的值。
例如，以下代码段演示了如何使用 JavaScript 获取表单元素的值：
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<button type="button" onclick="myFunction()">Submit</button>
</form>
<script>
function myFunction() {
var name = document.getElementById("name").value;
alert("Hello " + name + "!");
}
</script>5、动态创建和修改 HTML 元素：
JavaScript 可以动态创建和修改 HTML 元素，从而实现动态页面效果。例如，JavaScript 可以在页面上添加新元素、更改元素的样式、更改元素的内容等等。
例如，以下代码段演示了如何使用 JavaScript 动态创建一个新的段落元素，并将其添加到页面中：
<button onclick="myFunction()">Add Paragraph</button>
<script>
function myFunction() {
var para = document.createElement("p");
var node = document.createTextNode("This is a new paragraph.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
}
</script>
