JS基础进阶Webs-API、HTML 、DOM

一、JS中的API

1. 定义

JavaScript API是指为JavaScript提供的一组编程接口和对象，用以允许开发者访问和操作Web浏览器或其他JavaScript环境（如Node.js）提供的特定功能。这些API使得开发者能够编写更加动态和交互式的Web应用程序。

2. 主要类型与功能

DOM API：文档对象模型（Document Object Model）API，用于表示和操作HTML、XML和XHTML文档的标准化方式。通过DOM API，开发者可以访问和操作文档的元素、属性、文本等，从而动态地修改和更新网页的内容和结构。
Canvas API：HTML5中的Canvas API允许开发者在网页上绘制2D图形，并能够动态地更新这些图形（包括状态和属性的变化）。这使得在网页上实现复杂的图形和动画成为可能。
XMLHttpRequest API：一个异步的HTTP客户端API，允许JavaScript发出HTTP请求，获取数据，并在不干扰用户的情况下更新页面内容。这对于实现Ajax（Asynchronous JavaScript and XML）技术至关重要。
Audio和Video API：HTML5标准中的Audio和Video API使得JavaScript能够控制音频和视频的播放、停止以及音量等属性的修改，从而丰富了网页的多媒体体验。
其他API：如Geolocation API用于获取用户的地理位置信息，File API用于文件的读写操作等。这些API为JavaScript提供了更丰富的功能集，使得开发者能够创建更加复杂和强大的Web应用程序。

3. 特点

依赖于JavaScript环境：JavaScript API通常在浏览器或Node.js等JavaScript环境中提供。
丰富的功能集：提供了丰富的功能和对象，使得开发者能够轻松实现各种复杂的交互和操作。
跨平台兼容性：大多数现代浏览器都支持JavaScript API，因此开发者可以编写跨平台的Web应用程序。

二、Web API

1. 定义

Web API是一组由服务端提供的接口，允许客户端（如浏览器或移动应用）通过HTTP协议发送请求从而与服务器进行交互。这些接口通常遵循RESTful或SOAP等标准，使得开发者能够利用远端的资源和服务。

2. 主要类型与功能

RESTful API：一种基于HTTP协议的Web API设计风格，强调资源的表示、状态转移和客户端-服务器之间的无状态交互。RESTful API使用URL来定位资源，使用HTTP方法来执行操作（如GET、POST、PUT、DELETE），并使用状态码来表示响应结果。
SOAP API：另一种Web API设计风格，基于XML和SOAP协议。SOAP API使用XML来定义接口和数据格式，通过SOAP协议在客户端和服务器之间进行通信。

3. 特点

跨平台性：Web API基于广泛支持的网络标准（如HTTP协议），因此具有良好的跨平台性。
易于使用：遵循RESTful或SOAP等标准的设计使得Web API易于使用和维护。
安全性：Web API通常包含授权机制（如OAuth），以确保只有被允许的用户和应用才能访问数据。

JavaScript HTML DOM

HTML DOM (文档对象模型)

HTML DOM 模型被构造为对象的树：

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素

  // 获取 id 为 time 的元素var time = document.getElementById("time");

通过标签名找到 HTML 元素

 //获取某类标签元素var lis = document.getElementsByTagName("li");

通过类名找到 HTML 元素(H5新增）

    //获取class为box的元素var boxs=document.getElementsByClassName("box");console.log(boxs);

querySelector（）可以选择标签，类名，id选择器名

querySelector() 方法返回匹配选择器的第一个元素，如果没有匹配的元素，则返回 null

   var header=document.querySelector("header");console.log(header);var llb=document.querySelector(".box");console.log(llb);var llb=document.querySelector("#box");console.log(llb);

querySelectorAll() 方法返回匹配选择器的所有元素，如果没有匹配的元素，则返回一个空的 NodeList 对象

  var alldds=document.querySelectorAll("dl dd");console.log(alldds);

获取body和HTML元素

var body=document.body;
console.log(body);
console.dir(body);
var html=document.documentElement;
console.log(html);

var body=document.querySelector("body");
console.log(body);
var html=document.querySelector("html");
console.log(html);

3.事件基础

事件有三部分组成：事件源、事件类型、事件处理程序

事件源：事件被触发的对象，谁，按钮

事件类型：如何处罚触发什么事件例如鼠标点击，鼠标经过，键盘按下

事件处理程序：通过函数赋值的方式完成

<body><div class="div">123</div>
</body>
<script>//获取事件源
var div=document.getElementsByClassName("div");
//div.onclick绑定事件处理程序
//添加事件处理程序
div.onclick=function(){alert("你点击了div");
}
</script>