JS基础一

API

API ( Application Programming Interface,应用程序编程接口)是一一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。简单理解：API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。

Web API

Web API是浏览器提供的一套操作浏览器功能和页面元素的API( BOM和DOM)。
现阶段我们主要针对于浏览器讲解常用的API,主要针对浏览器做交互效果。
比如我们想要浏览器弹出一一个警示框,直接使用alert( '弹出’ )
MDN详细API: https://developer.moilla.org/zh-CN/docs/Web/API
因为Web API很多,所以我们将这个阶段称为Web APIs

API 和 Web API总结

1. API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现
2. Web API主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
3. Web API -般都有输入和输出(函数的传参和返回值) , Web API很多都是方法(函数)
4. 学习Web API可以结合前面学习内置对象方法的思路学习

DOM

文档对象模型( Document ObjectModel，简称DOM)，是W3C组织推荐的处理可扩展标记语言( HTML
或者XML )的标准编程接口。
W3C已经定义了一系列的 DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

DOM树

1. 文档：一个页面就是一个文档，DOM中使用document表示
2. 元素：页面中的所有标签都是元素，DOM中使用element表示
3. 节点： 网页中的所有内容都是节点(标签、属性、文本、注释等) , DOM中使用node表示
4. DOM把以上内容都看做是对象

获取DOM元素

1. 传统方法

document.getElementById
document.getElementByTagName

3. 通过HTML5新增的方法获取

document . getEl ementsByClassName(类名’) ;   //根据类名返回元素对象集合
document . querySelector ('选择器') ;         //根据指定选择器返回第一个元素对象
document . querySelectorAll(选择器');         //根据指定选择器返回

3. 获取特殊元素( body，html )

doucumnet.body             // 返回body元素对象
document .documentElement  // 返回htm1元素对象

常见的鼠标事件

onclick
鼠标点击左键触发

onmouseover
鼠标经过触发

onmouseout
鼠标离开触发

onfocus
获得鼠标焦点触发

onblur
失去鼠标焦点触发

onmousemove
鼠标移动触发

onmouseup
鼠标弹起触发

onmousedown
鼠标按下触发

常见的键盘事件

onkeyup
某个键盘按键被松开时触发

onkeydown
某个键盘按键被按下时触发

onkeypress
某个键盘按键被按下时触发但是它不识别功能键 比如ctrl shift箭头等

注意:
1.如果使用addEventListener不需要加on
2. onkeypress和前面2个的区别是，它不识别功能建，比如左右箭头, shift等。
3.三个事件的执行顺序是: keydown-- keypress — keyup

事件三要素

事件源
事件类型
事件处理程序

执行事件的步骤

1.获取事件源
2.注册事件(绑定事件)
3.添加事件处理程序(采取函数赋值形式)

DOM重点核心

关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

创建

1. document.write 直接将内容写入页面的内容流，但是文档流执行完毕，则会导致页面全部重绘
2. innerHTML 更高
3. createElement 效率高

增

1. appendChild
2. insertBefore

删

1. removeChild

改

1. 修改元素属性: src. href. title等
2. 修改普通元素内容: innerHTML、 innerText
3. 修改表单元素: values type、disabled等
4. 修改元素样式: style. clasName

查

1. DOM提供的API方法： getElementByld. getElementsByTagName 古者用法不太推荐
2. H5提供的新方法：querySelector. querySelecorAll 提倡
3. 利用节点操作获取元素：父(parentNode). 子(children). 兄(previousElementSibling, nextElementSibling)提倡

事件高级

1.注册事件

btn. onclick = function（）｛｝
btn. addEventListener("click"，fn)

2.删除事件

btn. onclick=null
btn. removeEventListener("click", fn)

3.DOM事件流
事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

1. 捕获阶段 （父到子）
2. 当前目标阶段
3. 冒泡阶段（子到父）

注意

1. JS代码中只能执行捕获或者冒泡其中的一个阶段。
2. onclick 和attachEvent 只能得到冒泡阶段。
3. addEventListener (type, listener [, useCapture] )第三三个参数如果是true ,表示在事件捕获阶段调用事件处理程序;如果是false (不写默认就是false)， 表示在事件冒泡阶段调用事件处理
4. 程序。实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
5. 有些事件是没有冒泡的，比如onblur、onfocus、 onmouseenter、 onmouseleave
6. 事件冒泡有时候会带来麻烦,有时候又会帮助很巧妙的做某些事件，我们后面讲解。

4.事件对象

1. function(e){}
2. 事件对象的常见属性和方法：
   e.target
   返回触发事件的对象，标准
   e.srcElement
   返回触发事件的对象，非标准，ie6-8使用
   e.type
   返回事件的类型，比如click mouseover 不带on
   e.cancelBubble
   该属性阻止冒泡，非标准，ie6-8使用
   e.returnValue
   该属性阻止默认事件(默认行为)，非标准，ie6-8使用，比如不让链接跳转
   e.preventDefault（）
   该方法阻止默认事件(默认行为)，标准，比如不让链接跳转
   e.stopPropagation（）
   阻止冒泡，标准

5.事件委托

1. 事件委托也称为事件代理，在jQuery里面称为事件委派。
2. 事件委托的原理
   不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。
3. 事件委托的作用
   我们只操作了一次DOM ,提高了程序的性能。

BOM

1. BOM ( Browser Object Model )即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window.
2. BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
3. BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
4. BOM的构成
   BOM比DOM更大，它包含DOM.
   window
   document
   location
   navigation
   screen
   history

window对象的常见事件

1. 窗口加载事件

window .onload = function() {
或者
window . addEventListener ("load", function(){}) :
或者
document . addEventListener ( 'DOMContentLoaded' F function() { } )

window.onload是窗口(页面)加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等)，就调用的处理函数。

注意:

1. 有了window.onload就可以把JS代码写到页面元素的，上方。因为onload是等页面内容全部加载完毕，再去执行处理函数。
2. window.onload传统注册事件方式只能写-次,如果有多个,会以最后个window.onload为准。
3. 如果使用addEventListener则没有限制
4. DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表,图片, flash等等。
5. le9以上才支持
6. 如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间交互效果就不能实现，必然影响用户的体验,此时用DOMContentloaded事件比较合适。

2. 调整窗口大小事件

window. onresize = function() { }
window. addEventListener (" resize", function() {});

window. onresize是调整窗口大小加载事件，当触发时就调用的处理函数。
注意:

1. 只要窗口大小发生像素变化，就会触发这个事件。
2. 我们经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度

location对象

1. location对象的属性
location.href
获取或者设置整个URL

location. host
返回主机(域名)www.itheima.com

location.port
返回端口号如果未写返回空字符串

location.pathname
返回路径

location. search
返回参数

location. hash
返回片段#后面内容常见于链接锚点

重点记住: href 和search

2. location对象的方法
location.assign（）
跟href 一样，可以跳转页面(也称为重定向页面)

location.replace（）
替换当前页面，因为不记录历史，所以不能后退页面

location.reload（）
重新加载页面，相当于刷新按钮或者f5 如果参数为true强制刷新ctrl+f5

navigator对象

navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent ,该属性可以返回由客
户机发送服务器的user-agent头部的值。

history对象

window对象给我们提供了一个history对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL。

back()
可以后退功能

forward()
前进功能

go(参数)
前进后退功能参数如果是1，前进1个页面，如果是-1，后退1个页面

三大系列

1. 元素偏移量offset系列
（1）
element.offsetParent
返回作为该元素带有定位的父级元素如果父级都没有定位则返回body

element.offsetTop
返回元素相对带有定位父元素上方的偏移

element.offsetLeft
返回元素相对带有定位父元素左边框的偏移

element.offsetWidth
返回自身包括padding、边框、内容区的宽度，返回数值不带单位

element.offsetHeight
返回自身包括padding、边框、内容区的高度，返回数值不带单位

（2）
offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等.

• 获得元素距离带有定位父元素的位置
• 获得元素自身的大小(宽度高度)
• 返回的数值都不带单位

2. 元素可视区client系列
（1）
element.clientTop
返回元素上边框的大小

element.clientLeft
返回元素左边框的大小

element.clientWidth
返回自身包括padding、内容区的宽度，不合边框，返回数值不带单位

element.clientHeight
返回自身包括padding、内容区的高度，不含边框，返回数值不带单位

（2）
client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

3. 元素滚动scroll系列
（1）
element.scrollTop
返回被卷去的上侧距离，返回数值不带单位

element.scrollLeft
返回被卷去的左侧距离，返回数值不带单位

element.scrollWidth
返回自身实际的宽度，不含边框，返回数值不带单位

elemet.crollHeight
返回自身实际的高度，不含边框，返回数值不带单位

（2）
scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。