一、Web API介绍

一级目录

二级目录

三级目录## 一、Web API介绍

1.1 API的概念

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是为了提供应用人员与开发人员基于某个软件或硬件得以访问一组历程的能力，无需访问源代码，无需与其他内部工作机制的细节，就能直接调用使用就行。

JS中的Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM);

主要针对浏览器来做交互之类的。

二、DOM介绍

DOM是什么？

DOM全称 Document Object Model，即文档对象模型，它允许脚本(js)控制Web页面、窗口和文档。

三大类：

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

		文档
		根元素：
元素：			元素：
元素：	属性：href	元素：	元素：
文本：“文档标题”		文本：“链接	文本”标签

DOM树又称为文档树，把文档映射成树形结构，通过节点对象的处理，来加入到页面当中去。

• 文档：一个页面中有一个文档，用document来表示。
• 节点：网页中的所有内容在文档树中都是节点，利用node来表示
• 标签节点：网页中的所有标签，通常称为元素节点，有称为元素。利用element表示。

2.3获取元素

获取元素是为了对页面上的东西进行更好的操作。

2.3.1 根据ID去获取

语法：document.getElementById(元素的ID值)

通过ID去获取元素对象

2.3.2根据标签名获取元素

语法：document.getElementsByTaName(标签的名字);

根据标签名去获取元素对象（可以获取一个标签组）

注意事项：

1. 因为当道的一个集合，所以我们想要操作元素需要去遍历它
2. 得到的元素是动态的

当元素增加时，集合也会跟这增加

2.3.3 H5新增的获取元素的方法

通过类名获取: getElementsByClassName(“类名”)

指定选择器（一个的情况下）： querySelector(‘选择器’)

指定选择器：querySelectorAll(‘选择器’)

选择器前面需要加上指定符号

2.3.4 获取特殊元素

获取body document.body

获取HTML document.documnetElement

三、事件基础

3.1事件三要素

事件源.事件类型=function{

​ 事件处理程序

}

3.2常见的鼠标事件

鼠标事件	触发事件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

四、操作元素

4.1改变元素内容（获取或设置）

element.innerText 空格和换行会去除 不会识别html

element.innerHTML 会保留空格跟换行 会识别html

4.2 常用元素的属性操作

获取属性的值

元素对象.属性名

设置对象的值

元素对象.属性名=值

4.3分时问候

var time = new Date().getHours();

 if (time >= 8 && time < 12) {
   

  alert("早上好");

 document.body.style.background = "url(img/01.png) no-repeat center center ";

 } else if (time >= 12 && time < 18) {
   

  alert("中午好");

  document.body.style.background = "url(img/02.png) no-repeat center center ";

 } else if (time >= 18 && time < 24) {
   
  
     alert("下午好");

  document.body.style.background = "url(img/03.png) no-repeat center center ";

}

4.4表单元素的属性操作

常用的属性有：type value checked selected disabled

获取属性的值

元素对象.属性名

设置属性的值

元素对象.属性名=值

表单元素中有一些属性：disabled、checked、selected，元素对象的这些属性的值是布尔型。

value在表单中添加内容

div.disabled=true;使按钮不能继续被点击

4.5全选和反选

全选<input type="checkbox" id="tbn1"><br>
    <input type="checkbox" class="tbn2">
    <input type="checkbox" class="tbn2