JavaScript学习笔记【DAY6(2020.8.24)周一】
API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。
Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。
API和Web API总结：
1. API 是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现
2. Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
3. Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）
BOM(Browser Object Model浏览器对象模型)
它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。
BOM是JS中的一个组成部分，用于操作浏览器
BOM的构成
BOM 可以做的事情有很多很多
获取浏览器的视口尺寸
修改浏览器的地址栏
通过BOM可以操作历史记录
可以关闭页面
可以设置定时器 延时器
可以获取浏览器的信息
……
获取浏览器的尺寸
console.log(window.innerWidth); // 输出浏览器视口宽度
console.log(window.innerHeight); // 输出浏览器视口高度
window对象
该对象是BOM的具体对象。所有的BOM内容都可以通过它来获取
window对象是浏览器的顶级对象,它具有双重角色。
1.它是JS访问浏览器窗口的一一个接口。
2.它是一 个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
在调用的时候可以省略window,前面学习的对话框都属于window对象方法,如alert0、prompt()等。
特点: 所有的window上的属性，在访问时，可以省略window
注: window下的一一个特殊属性window.name
window.onload 是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。
window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。
window对象的常见事件
页面（窗口）加载事件（2种）
(1)window.onload 是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。
(2)DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
IE9以上才支持！！！
如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。
<script>
window.addEventListener('load', function() {
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
alert('点击我');
})
})
window.addEventListener('load', function() {
alert(22);
})
document.addEventListener('DOMContentLoaded', function() {
alert(33);
})
</script>
调整窗口大小事件
window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。
注意：
1.只要窗口大小发生像素变化，就会触发这个事件。
2.我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度
<script>
// 注册页面加载事件
window.addEventListener('load', function() {
var div = document.querySelector('div');
// 注册调整窗口大小事件
window.addEventListener('resize', function() {
// window.innerWidth 获取窗口大小
console.log('变化了');
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
})
})
</script>
<div></div>
打开关闭页面
// 打开页面
window.open(打开的页面的网址);
// 关闭页面
window.close();
事件
load事件 在资源都加载完毕之后触发
window.onload = function() {
// code... 这里的代码会在所有资源加载完毕之后执行
}
scroll事件 当页面有卷动值(页面比视口高)时，页面卷动值发生了改变时会触发
window.onscroll = function() {
// code... 这里的代码会在页面卷动值发生改变时触发
}
window.location
是浏览器中负责浏览器的地址栏的相关对象
统一资源定位符(Uniform Resource Locator, URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。
location 对象的属性：
href属性 用于设置和读取当前浏览器窗口的地址栏内容
// 将当前页面的地址栏修改为百度 也就是跳转到百度
location.href = "https: //www.baidu.com";
reload方法 用于刷新当前页面
location.reload(); // 刷新页面
location对象的常见方法
window.history
是浏览器中负责历史记录的相关对象
forward方法 让历史记录前进一次
history.forward(); // 前进一次
back方法 让历史记录后退一次
history.back(); // 后退一次
go方法 接受一个数字作为参数 如果为0 表示刷新当前页面 如果为正数 表示前进几次 如果为负数 表示后退几次
history.go(0); // 刷新页面
history.go(1); // 前进一步 等价于history.forward();
history.go(2); // 前进两步
history.go(-1); // 后退一步 等价于history.back();
history.go(-2); // 后退两步
浏览器信息
window.navigator 获取浏览器信息对象
navigator.userAgent 获取浏览器代理信息字符串
navigator.platform 获取平台信息
navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。
下面前端代码可以判断用户那个终端打开页面，实现跳转
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.location.href = ""; //手机
} else {
window.location.href = ""; //电脑
}
//开启定时器
setInterval(重点)
第一个参数是函数 表示要执行的代码
第二个参数是数字 表示执行的时间间隔 单位是毫秒
返回值是数字 这个数字是一个编号 代表这是第几个定时器
// 每一秒都会执行一次输出
setInterval(function() {
console.log(1);
}, 1000);
今天只需要知道这是一个可以让代码按照时间循环执行的函数即可。
setTimeout(重点)
第一个参数是函数 表示要执行的代码
第二个参数是数字 表示延迟的时间 单位是毫秒
返回值是数字 这个数字是一个编号 代表这是第几个定时器
// 1秒后输出一次 不再输出
setTimeout(function() {
console.log(1);
}, 1000)
setTimeout()这个调用函数我们也称为回调函数callback
//停止定时器
clearInterval(重点)
接受一个参数 就是要清除的定时器或者延时器的编号
clearTimeout(重点)
接受一个参数 就是要清除的定时器或者延时器的编号
注: 以上两个方法可以混合使用，但不推荐。
window.clearTimeout(timeoutID)
clearTimeout ()方法取消了先前通过调用setTimeout ()建立的定时器。
注意:1. window可以省略。
2.里面的参数就是定时器的标识符。
<button>点击停止定时器</button>
<script>
var btn = document.querySelector('button');
// 开启定时器
var timer = setTimeout(function() {
console.log('爆炸了');
}, 5000);
// 给按钮注册单击事件
btn.addEventListener('click', function() {
// 停止定时器
clearTimeout(timer);
})
</script>
计算后样式
window.getComputedStyle(dom)
dom 元素对象
返回值是该元素对象的CSS样式对象
// 获取元素
var div = document.querySelector("div");
// 获取它的样式
var cssStyleObject = window.getComputedStyle(div);
console.log(cssStyleObject["width"]);
console.log(cssStyleObject.width);
console.log(cssStyleObject.backgroundColor);
console.log(cssStyleObject["background+color"]);
如果在IE7 8中 不能使用getComputedStyle 要使用currentStyle属性
```JavaScript
// IE 7 8 中
dom.currentStyle["width"]
dom.currentStyle["height"]
```
DOM(document object model文档对象模型)
document, 该对象是window的属性。但是因为太重要，所以单独成立一个概念。 它包含着所有操作文档的方法。
是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。
DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。
文档：一个页面就是一个文档，DOM中使用document表示
节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示
获取元素:在JS中操作元素，必须要先获取到元素
1.根据ID获取元素
document.getElementById(id) 该方法用于根据ID获取元素 ID是HTML标签的属性 应当具备唯一性
返回值: 如果有这个元素 就可以得到该元素对象。如果没有，就是null。
2.根据标签名获取元素
document.getElementsByTagName(tagName)
返回值: 集合对象(类数组对象)
3.根据name属性获取元素
document.getElementsByName(name)
返回值: 集合对象(类数组对象)
4. 根据类名返回元素对象集合
document . getElementsByClassName (类名');
5.根据选择器获取元素
document.querySelector(selector)
返回值: 元素对象
6.根据选择器获取多个元素
document.querySelectorAll(selector);
返回值: 集合对象(类数组对象)
1、获取body元素
doucumnet.body; //返回body元素对象
2、获取html元素
document.documentElement; //返回html元素对象
改变元素内容（获取或设置）
(1)element.innerText
从起始位置到终止位置的内容,但它去除html标签，同时空格和换行也会去掉
(2)element.innerHTML
起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
innerText和innerHTML的区别
获取内容时的区别：innerText会去除空格和换行，而innerHTML会保留空格和换行
设置内容时的区别：innerText不会识别html，而innerHTML会识别
常用元素的属性操作
1. innerText、innerhTML改变元素内容
2. src、href
3. id、alt、title
表单元素的属性操作
利用DOM可以操作如下表单元素的属性:type、value、checked、selected、disabled
样式属性操作：我们可以通过 JS 修改元素的大小、颜色、位置等样式。
1. element.style 行内样式操作
2. element.className 类 名样式操作
HTML属性
可以分为HTML标准属性与非标准属性(自定义属性)
标准属性：指的是由W3C制定的属性
通用属性 所有标签都有的属性
id
class
style
title
特有属性 只有一个或者几个标签有的属性
name
type
checked
非标准属性：指的是由程序员自己定义的属性
通常以data+开头
元素的基本操作
标准属性 可以直接通过元素打点获取 打点修改 (或者使用方括号语法也可以) 注意避讳关键字
// 避讳JS中的class关键字
dom.className = "abc";
// 读取name属性值
var str = input.name;
非标准属性
getAttribute(propName) 获取属性值
propName 属性名
setAttribute(propName, propValue); 设置、修改属性值
propName 属性名
propValue 属性值
removeAttribute(propName) 移除属性(从HTML标签身上移除)
节点
整个页面是由节点组成的。每一个节点有不同的性质，DOM将它们根据性质分类。
获取属性节点 要通过 元素.attributes 来获取到集合 再通过下标获取想要的属性节点
节点属性
(1)nodeType:节点类型 属性值为数字
1 元素节点
2 属性节点
3 文本节点
8 注释节点
9 文档节点(就一个 document)
(2)nodeName:节点名称 属性值为字符串
元素节点的名称为大写的标签名
属性节点的名称为属性名
文本节点的名称为 #text
注释节点的名称为 #comment
文档节点的名称为 #document
(3)nodeValue:节点值
元素节点没有节点值 null
属性节点的节点值就是属性值
文本节点的节点值是文本内容
注释节点的节点值是注释内容
文档节点没有节点值 null
节点的关系
节点关系就两种: 父子关系 兄弟关系
父子关系
父找子
childNodes 所有的节点
children 所有的元素节点
firstChild 第一个节点
firstElementChild 第一个元素节点
lastChild 最后一个节点
lastElementChild 最后一个元素节点
子找父
parentNode 父节点
兄弟关系
nextSibling 下一个兄弟(包含元素节点、文本节点等等)
nextElementSibling 下一个元素兄弟
previousSibling 前一个兄弟
previousElementSibling 前一个元素兄弟
节点的操作(重要)
创建节点
document.createElement(标签名字符串)
document.createTextNode(文本内容)
// 创建一个div元素节点
var div = document.createElement("div");
// 创建文本节点
var textNode = document.createTextNode("我是一个通过JS脚本创建出来的文本节点");
// 这样的节点只在JS环境中存在,还没有到DOM树上去.所以叫做"孤儿节点"
追加节点
父元素.appendChild(子元素)
子元素会被追加到父元素的最后,作为lastChild节点
// 创建一个节点
var div = document.createElement("div");
// 向父元素中追加一个节点
var dom = document.getElementById("#box");
dom.appendChild(div);
插入节点
父元素.insertBefore(newChild, oldChild)
newChild是新元素
oldChild是父元素的已有元素
newChild会插入到oldChild的前一个位置
// 创建一个节点
var div = document.createElement("div");
// 获取父元素
var box1 = document.getElementById("box1");
// 插入到box1之前
document.body.insertBefore(div, box1);
替换节点
父元素.replaceChild(newChild, oldChild)
newChild是替换上的元素
oldChild是被替换的元素
// 创建一个节点
var div = document.createElement("div");
// 获取树上的元素
var box1 = document.getElementById("box1");
// 替换box1
document.body.replaceChild(div, box1);
克隆节点
元素.cloneNode(boolean);
boolean是一个布尔值 决定是否克隆子元素 如果为真则克隆子元素 否则不克隆 默认是false
// 选中一个节点
var node = document.querySelector(".one");
// 复制该节点得到新节点
var cloneNode = node.cloneNode(true);
删除节点
元素.remove() 让调用remove方法的元素 下树
父元素.removeChild(子元素) 让父元素中的子元素下树
// 获取元素
var box2 = document.getElementById("box2");
// 元素自己下树
box2.remove();
// 获取元素
var box2 = document.getElementById("box2");
// 让body把box2删掉
document.body.removeChild(box2);
创建元素的三种方式
1.document.write ()
2.element.innerHTML
3.document.createElement ()
区别
1. document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
2. innerHTML 是将内容写入某个DOM节点，不会导致页面全部重绘
3. innerHTMI 创建多个元素效率更高(不要拼接字符串，采取数组形式拼接)，结构稍微复杂
4. createElement ()创建多个元素效率稍低一点点， 但是结构更清晰
总结:不同浏览器下，innerHTMI 效率要比creatElement 高
innerTHML和createElement效率对比：
innerHTML字符串拼接方式（效率低）
createElement方式（效率一般）
innerHTML数组方式（效率高）
DOM的核心总结
关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。
创建
1.document.write ()
2.element.innerHTML
3.document.createElement ()
增加
1. appendChild
2. insertBefore
删
1. removeChild
改
主要修改dom的元素属性，dom元素的内容、属性, 表单的值等
1.修改元素属性: srC、href、title等
2.修改普通元素内容: innerHTML、innerText
3. 修改表单元素: value、type、disabled等
4.修改元素样式: style、className
查
主要获取查询dom的元素
1. DOM提供的API方法: getElementByld、 getElementsByTagName 古老用法不太推荐
2. H5提供的新方法: querySelector、 querySelectorAll 提倡
3.利用节点操作获取元素:父(parentNode)、子(children)、兄(previousElementSibling、
nextElementSibling)提倡
属性操作
主要针对于自定义属性。
1. setAttribute: 设置dom的属性值
2. getAttribute:得到dom的属性值
3. removeAttribute移除属性
注册事件（2种方式）
事件监听
(1)addEventListener()事件监听（IE9以后支持）
eventTarget . addEventListener (type, listener[, useCapture] )
eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
(2)attacheEvent()事件监听（IE678支持）
eventTarget . attachEvent(eventNameWi thOn, (callback)
eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象） 上，当该对象触发指定的事件时，指定的回调函数就会被执行。
<button>传统注册事件</button>
<button>方法监听注册事件</button>
<button>ie9 attachEvent</button>
<script>
var btns = document.querySelectorAll('button');
// 1. 传统方式注册事件
btns[0].onclick = function() {
alert('hi');
}
btns[0].onclick = function() {
alert('hao a u');
}
// 2. 事件侦听注册事件 addEventListener
// (1) 里面的事件类型是字符串 必定加引号 而且不带on
// (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
btns[1].addEventListener('click', function() {
alert(22);
})
btns[1].addEventListener('click', function() {
alert(33);
})
// 3. attachEvent ie9以前的版本支持
btns[2].attachEvent('onclick', function() {
alert(11);
})
</script>
事件监听兼容性解决方案
封装一个函数，函数中判断浏览器的类型：
删除事件（解绑事件）
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var divs = document.querySelectorAll('div');
divs[0].onclick = function() {
alert(11);
// 1. 传统方式删除事件
divs[0].onclick = null;
}
// 2. removeEventListener 删除事件
divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
function fn() {
alert(22);
divs[1].removeEventListener('click', fn);
}
// 3. detachEvent
divs[2].attachEvent('onclick', fn1);
function fn1() {
alert(33);
divs[2].detachEvent('onclick', fn1);
}
</script>
删除事件兼容性解决方案
