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>
