一只在努力的程序媛的博客

Web API

Web API 是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM）

API 和 Web API 总结：

API是为程序员提供的一个接口，帮助我们实现某种功能，不必纠结内部如何实现，会使用即可Web API主要针对于浏览器提供的接口，主要是对浏览器做交互效果Web API一般有输入和输出（函数的传参和返回值），Web API很多都是方法（函数） DOM

文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式

文档：document

元素：element

节点：node

获取元素的方法：

根据ID获取(getElementById)根据标签名获取(getElementsByTagName)（返回的是伪数组）根据类名获取(getElementsByClassName)根据选择器获取(querySelector)（返回指定选择器的第一个元素对象）

(querySelectorAll)（返回指定选择器的所有元素对象集合）获取特殊元素：

（1）body元素：document.body

（2）html元素：document.documentElement

操作元素

改变元素内容

（1）element.innerText:从起始位置到终止位置的内容，但它去除 html标签，同时空格和换行也会去掉

（2）element.innerHTML:起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行常见元素属性

src、href、title、alt等操作表单元素属性

type、value、disabled等修改元素样式属性

（1）element.style:行内样式操作

（2）element.className:类名样式操作自定义属性的操作

（1）获取属性

element.属性 ： 获取内置属性（元素本身自带的属性）

element.getAttribute(‘属性’) ： 获取自定义属性

（2）设置属性值

element.属性=‘值’

element.setAttributr(‘属性’,‘值’) ：主要用于设置自定义属性

（3）移除属性 removeAttribute(属性)

（4）H5获取自定义属性的方法（dataset 是一个集合里面存放了所有以data开头的自定义属性）

<div data-index="1"></div>
console.log(div.dataset.index);//1
<div data-list-name="Aa"></div>
console.log(div.dataset.listName);//Aa  获取时采用驼峰命名法

节点操作

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）这三个基本属性。

元素节点 nodeType 为1

属性节点 nodeType 为2

文本节点 nodeType 为3（文本节点包括文字、空格、换行等）

主要操作 元素节点

（1）父节点

node.parentNode 返回的是最近的一个父节点

（2）子节点

①parentNode.childNodes 得到所有的子节点 包含 元素节点、文本节点等等

可以配合nodeType获取元素节点 一般不建议使用childNodes

②children 获取所有的子元素节点 实际开发常用的

③firstChild 获取第一个子节点，不管是文本节点还是元素节点

lastChild 获取最后一个子节点，不管是文本节点还是元素节点

④firstElementChild 返回第一个子元素节点

lastElementChild 返回最后一个子元素节点

（3）兄弟节点

①nextSibling 下一个兄弟节点，包含元素节点或者文本节点等等

previousSibling

②nextElementSibling 得到下一个兄弟元素节点

previousElementSibling

（4）创建节点

		<ul></ul>
		<script>
			//1.创建节点元素节点
			var li=document.createElement('li');
			//2.添加节点 node.appendChild(child) node 父级  child 子级  后面追加元素
			var ul=document.querySelector('ul');
			ul.appendChild(li);
			//3.添加节点  node.insertBefore  在参考节点之前插入
			var li2=document.createElement('li');
			ul.insertBefore(li2,ul.children[0]);
		</script>

（5）删除节点

node.removeChild(child) 删除一个节点，返回被删除的节点

（6）复制节点（克隆节点）

node.cloneNode() 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容

node.cloneNode(true) 括号为true 深拷贝 复制标签复制里面的内容

（7）三种动态创建元素区别

①document.write()：是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘

②document.innerHTML：是将内容写入某个DOM节点，不会导致页面全部重绘（创建多个元素时采取数组拼接的方式）

③document.createElement()：创建多个元素效率稍低一点，但结构更加清晰

事件高级 注册事件

给元素添加事件，称为注册事件或者绑定事件

注册事件有两种方式：传统方式和方法监听注册方式

（1）传统注册方式：使用on开头的事件onclick

同一元素同一事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

（2）方法监听注册方式：addEventListener()

w3c标准推荐方法

同一元素同一事件可以添加多个侦听器

删除事件

（1）传统注册方法：eventTarget.οnclick=null

（2）方法监听注册方式：eventTarget.removeEventListener()

DOM事件流

事件流描述的是从页面中接收事件的顺序

事件发生时会在元素节点之间按照特定的顺序传播，这个传播的过程即DOM事件流

DOM事件流分为3个阶段：

①捕获阶段（从上往下）

②当前目标阶段

③冒泡阶段（从下往上）

事件对象

event就是一个事件对象，写到我们侦听函数的小括号中，当形参来看

事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数

事件对象是我们事件的一系列相关数据的集合

事件对象可以自己命名，比如event、e等等

事件对象也有兼容性问题，在ie678通过window.event

常见事件对象的属性和方法

e.target

返回的是触发事件的对象（元素） 标准

e.srcElement

返回的是触发事件的对象（元素） 非标准 ie6-8使用

e.type

返回事件的类型

e.cancelBubble

该属性阻止冒泡 非标准 ie6-8使用

e.returnValue

该属性阻止默认事件（默认行为） 非标准 ie6-8使用

e.preventDefault()

该方法阻止默认事件（默认行为） 标准

e.stopPropagation()

阻止冒泡 标准

事件委托

事件委托也称事件代理，在JQuery中称为事件委派

事件委托原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

作用：只操作一次DOM，提高了程序的性能

常用的鼠标事件

<script>
			//1.contextmenu  禁用右键菜单
			document.addEventListener('contextmenu',function(e){
				e.preventDefault();
			})
			//2.selectstart  禁止选中文字
			document.addEventListener('selectstart',function(e){
				e.preventDefault();
			})
</script>

BOM

BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window

BOM缺乏标准，JavaScript语法的标准化组织是ECMAjs禁止返回上一个页面，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分

window对象是浏览器的顶级对象，它具有双重角色：

①它是js访问浏览器窗口的一个接口

②它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法

window 对象的常见事件

1.1. 窗口加载事件 window.onload | DOMContentLoaded

load 等页面内容全部加载完毕，包括页面dom元素 图片 flash css等等

DOMContentLoaded 是DOM加载完毕，不包含图片 flash css等就可以执行

1.2. 调整窗口大小事件 window.onresize

1.3. 定时器

setTimeout(调用函数，延时时间) 设置定时器，延时时间单位是毫秒

clearTimeout(定时器名字) 停止定时器

setInterval(调用函数，间隔时间) 可以重复调用一个函数，每隔这个时间就调用一次回调函数

clearInterval(定时器名字) 停止定时器JS执行机制

2.1. 同步任务：在主线程上执行，形成一个执行栈

2.2. 异步任务：JS的异步是通过回调函数实现的，被放在任务队列中

2.3. 先执行执行栈中的同步任务，异步任务放在任务队列中，把同步任务都执行完再执行异步任务

2.4. 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环location 对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL

URL 统一资源定位符是互联网上标准资源的地址

location.href

获取或者设置整个URL

location.host

返回主机（域名）

location.port

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

location.pathname

返回路径

location.search

返回参数

location.hash

返回片段 #后面内容

location 对象的方法

location.assign()

跟href一样，可以跳转页面（也称为重定向页面）

location.replace()

替换当前页面，因为不记录历史，所以不能后退页面

location.reload()

重新加载页面，相当于刷新按钮或者f5 如果参数为true则强制刷新

navigator 对象

navigator对象包含关闭浏览器的信息，他有很多属性js禁止返回上一个页面，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值

history 对象

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

back() 可以后退功能

forward() 前进功能

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

本地存储

本地存储特性：

数据存储在用户浏览器中

设置、读取方便、甚至页面刷新不丢失数据

容量较大，sessionStorage约5M，localStorage约20M

只能存储字符串，可以将对象JSON.stringify()编码后存储

window.sessionStorage(key,value)

生命周期为关闭浏览器窗口

在同一个窗口（页面）下数据可以共享

以键值对的形式存储使用

存储数据：sessionStorage.setltem(key,value)

获取数据：sessionStorage.getltem(key)

删除数据：sessionStorage.removeltem(key)

删除所有数据：sessionStorage.clear()window.localStorage

生命周期永久生效，除非手动删除，否则关闭页面也会存在

可以多窗口（页面）共享（同一浏览器可以共享）

以键值对的形式存储使用

存储数据：localStorage.setltem(key,value)

获取数据：localStorage.getltem(key)

删除数据：localStorage.removeltem(key)

删除所有数据：localStorage.clear()