JavaScript之WebAPI一

一 Web API 基本认识

作用：使用js去操作html和浏览器
分类：DOM(文档对象模型) , BOM(浏览器对象模型)
DOM：是浏览器提供的一套专门 操作网页内容 的功能，作用是实现网页内容特效和用户交互
DOM树：
DOM树对象：浏览器根据html标签生成的js对象。所有的标签属性都可以在这个对象上面找到。修改这个对象的属性会自动映射到标签身上。
DOM的核心思想：把网页内容当做对象来处理。
document对象：是DOM里提供的一个对象，所以它提供的属性和方法都是用来访问和操作网页内容的。网页所以内容都在document里面。

二 获取DOM对象

选择匹配的第一个元素：document.querySelector(‘css选择器’) 。返回值：css选择器匹配的第一个元素，一个HTMLElement对象。
选择匹配的多个元素：document.querySelectorAll（‘css选择器’）。返回值：css选择器匹配的NodeList 对象集合


得到的是一个伪数组：有长度有索引号的数组，但没有pop（），push（）等数组方法。想要获得每一个对象，需要遍历（for）的方式获得。

三 操作元素内容

目标：能够修改元素的文本更换内容
DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。就是操作对象使用的点语法。如果想要修改标签元素的里面的内容，则可以使用如下几种方式：1.对象.innerText 属性 2.对象.innerHTML属性。
两者的区别：元素.innerText属性 只识别文本，不能解析标签 元素.innerHTML属性 能识别文本，能够解析标签 如果还在纠结到底用谁，你可以选择innerHTML。

四 操作元素属性

1.操作元素常用属性
最常见的属性比如：href,title,src 等
语法： 对象.属性 = 值


2.操作元素样式属性
比如可以通过 轮播图小圆点自动更换颜色样式。点击按钮可以滚动图片，这是移动的图片的位置 left 等等。
路径：
通过 style 属性操作css：
对象.style.样式属性 = 值

操作类名（className）操作css：
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。

好处：可以同时修改多个样式
注意事项：直接使用className赋值会覆盖以前的类名，如果需要添加一个雷，许保留之前的类名。

通过 classList 操作类控制css
为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名。

3.操作表单元素属性
比如点击眼睛，可以看到密码，本质是吧表单类型转换为文本框。
获取：DOM对象.属性名
设置：DOM对象.属性名 = 新值

表单.value = ’ 文本框里的内容’
表单.type = ‘password’ 这是将文本框转换为密码框，就看不见输入的内容了。
4.自定义属性

id很常用，比如在轮播图，点击文字转换相应的图片，可以用id代替遍历，从而对网页作出反应。

五 定时器-间歇函数

1.开启定时器
setInterval(函数，间隔时间)，间隔时间是毫秒，1000是为1秒
作用：每隔一段时间调用这个函数。

2.关闭定时器
clearInterval(变量名)

六 事件监听（绑定）

目标：
能够给DOM元素添加事件监听
什么是事件？事件是在编程时系统内发生的
动作或者发生的事情比如用户在网页上单击
一个按钮
什么是事件监听？就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等
语法：
元素对象.addEventListener(‘事件类型’,要执行的函数)。
事件监听三要素：
事件源：哪个dom元素被事件触发，要获取dom元素。
事件类型：用什么方式触发的，鼠标点击还是经过什么的。
事件调用的函数：要做什么事

七 事件类型

八 事件对象

事件对象是什么
也是个对象，这个对象里有事件触发时的相关信息 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息。
获取事件对象：
在事件绑定的回调函数的第一个参数就是事件对象，一般命名为e。

事件对象常用属性：

九 环境对象

环境对象指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境。
作用：弄清楚this的指向，可以让我们的代码更简洁。
【谁调用，this就是谁】是判断this指向的粗略规则
直接调用函数，其实相当于是window.函数，所以this指代window。

十 回调函数

当一个函数当做参数来传递给另一个函数时，这个函数就是回调函数。

十一 事件流

事件捕获：
代码：DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)。
说明：
addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）
若传入false代表冒泡阶段触发，默认就是false
若是用L0事件监听，则只有冒泡阶段，没有捕获
事件冒泡：
当一个元素的事件被触发时，该元素的所有祖先元素依次被触发。
阻止冒泡：
原因：默认就有冒泡模式的存在，容易导致事件影响父级元素。
语法：事件对象.stopPropagation().此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效。
我们某些情况下需要阻止默认行为的发生，比如阻止链接的跳转，表单域跳转.语法： e.preventDefault()


解绑事件：

十二 事件委托

如果同时给多个元素注册事件，我们用for循环注册事件，事件委托是一种注册一次事件就能完成以上效果的技巧。
事件委托是利用事件流的特征解决一些开发需求的知识技巧。
优点：减少注册次数，可以提高程序性能。
原理：利用事件冒泡的特点。给父元素注册事件，当我们触发子元素时，会冒泡到父元素身上，从而触发父元素的事件。
实现：事件对象.target.tagName 可以获得真正触发事件的元素。

e.target就是点击的那个对象。
e.target.tagName = ’ （大写）’