前端 JavaScript 与 HTML 怎么实现交互

简介: 前端 JavaScript 与 HTML 怎么实现交互
+关注继续查看

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>


相关文章
|
6天前
|
前端开发 JavaScript
JS与CSS交互
JS与CSS交互
23 0
|
16天前
|
存储 JavaScript 前端开发
【JS交互埋坑】事件函数自动将数字字符串String转为数值Number
【JS交互埋坑】事件函数自动将数字字符串String转为数值Number
22 0
|
23天前
|
JavaScript 前端开发 Java
【JCEF】JS与JAVA进行交互
【JCEF】JS与JAVA进行交互
16 0
|
23天前
|
前端开发 JavaScript
javascript(JS与css交互)详细介绍
javascript(JS与css交互)详细介绍
23 0
|
1月前
|
存储 JavaScript 前端开发
【JS交互埋坑】事件函数自动将数字字符串String转为数值Number
【JS交互埋坑】事件函数自动将数字字符串String转为数值Number
47 0
|
2月前
|
前端开发 JavaScript
JS与CSS交互详细介绍
JS与CSS交互详细介绍
|
2月前
|
前端开发 JavaScript 安全
带你读《现代Javascript高级教程》二十一、前端跨页面通信:实现页面间的数据传递与交互(1)
带你读《现代Javascript高级教程》二十一、前端跨页面通信:实现页面间的数据传递与交互(1)
|
2月前
|
存储 前端开发 JavaScript
带你读《现代Javascript高级教程》二十一、前端跨页面通信:实现页面间的数据传递与交互(2)
带你读《现代Javascript高级教程》二十一、前端跨页面通信:实现页面间的数据传递与交互(2)
|
2月前
|
前端开发 JavaScript 安全
带你读《现代Javascript高级教程》——前端跨页面通信:实现页面间的数据传递与交互(1)
带你读《现代Javascript高级教程》——前端跨页面通信:实现页面间的数据传递与交互
|
2月前
|
JavaScript 前端开发 Android开发
Android AgentWeb WebView 与js交互总结
Android AgentWeb WebView 与js交互总结
相关产品
云迁移中心
推荐文章
更多