Web APIs
DOM（页面文档对象模型）+BOM(浏览器对象模型)
网页交互效果
API和Web API
API是一种接口，实现某种函数
Web API：浏览器功能和页面元素的API
DOM
文档对象模型，改变页面结构、样式
页面是文档，标签是元素，所以内容都是节点
把所有内容看作对象，接口
获取元素
根据ID，标签名，HTML5新增方法，特殊元素获取
ID
页面从上往下加载，标签需要写在script标签前面
document.getElementById()
驼峰命名法，通过id获得元素
参数大小写敏感的字符串
返回的是一个元素对象
console.log()
console.dir()打印返回的元素对象，更好的查看里面的属性和方法
<body>
<div id="time">2020-4-6</div>
<script>
// 1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
// 2. get 获得 element 元素 by 通过 驼峰命名法
// 3. 参数 id是大小写敏感的字符串
// 4. 返回的是一个元素对象
var t=document.getElementById('time');
console.log(t);
console.log(typeof t);//获取到一个对象
console.dir(t);
</script>
</body>
标签名
document.getElementsByTagName()
返回元素对象集合，以伪数组形式存储
用遍历方式打印里面的元素
得到的元素对象是动态的
element.getElementById():获得这个元素的某些标签
再使用getElementsByTagName()
<ul>
<li>oooooo</li>
<li>oooooo</li>
<li>oooooo</li>
</ul>
<ol id="ol">
<li>enenen</li>
<li>enenen</li>
<li>enenen</li>
<li>enenen</li>
</ol>
<script>
//返回的是获取过来的元素对象的集合，以伪数组的形式存储
var lis=document.getElementsByTagName('li');
console.log(lis);
//遍历打印元素
for(var i = 0;i < lis.length;i++){
console.log(lis[i]);
}
//页面只有一个li活着没有这个元素，返回的是伪数组的形式
var ol = document.getElementsByTagName('ol');
console.log(ol[0].getElementsByTagName('li'));
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));
</script>
HTML5新增方法
通过类名获取元素
document.getElementsByClassName()
返回指定选择器的第一个元素
document.querySelector()
类名前加.，id前加#
返回指定选择器的第一个元素
document.querySelectorAll()
特殊元素获取
获取body元素
document.body()
返回元素对象
获取html元素
document.documentElement()
事件基础
触发-响应机制
事件由3部分组成：事件源，事件类型，事件处理程序
事件源：触发对象
事件类型：如何触发 什么事件
事件处理程序：通过函数赋值方式完成
操作元素
改变元素内容、属性
element.innerText(),不识别html标签 非标准 去除换行和空格
不用添加事件 直接使用
获取元素，直接修改内容
element.innerHTML()识别html标签 W3C标准 保留换行和空格
属性操作
获取元素
注册事件、处理程序
表单元素的属性操作
获取元素
注册事件、处理程序
表单里面的值通过value修改
点击后被禁用：disabled
this指向事件函数的调用者
样式属性操作
element.style.
驼峰命名法
JS修改style样式操作，产生的是行内样式，css权重比较高
element.className=’’,修改元素的类名，会修改原来样式的类名，多类名选择器
样式的显示和隐藏
display
焦点
获得焦点事件：onfocus
失去焦点事件：onblur
排他思想
用循环先设置其它的样式，再设置自己的样式
鼠标经过：onmouseover
鼠标离开：ommouseout
cheked可以得到当前复选框的选中状态
自定义属性的操作
获取元素的属性值
element.元素,获取内置属性值
element.getAttribute(‘属性’)，获取自定义属性
H5自定义属性
自定义属性：为了保存并使用数据，有些数据可以保存到页面中二不用保存到数据库中
dataset是一个集合里面存放了所有以data-开头的自定义属性
节点操作
利用节点层级关系获取元素
利用DOM提供的方法获取元素
节点至少拥有nodeType,nodeName,nodeValue三个基本属性
元素节点nodeType：1
属性节点nodeType：2
文本节点nodeType：3
节点操作主要是元素节点
DOM提供的方法（API）获取
子节点childNodes所有的子节点，包含元素节点，文本节点等
children获取所有的子元素节点，也是实际开发常用的
firstChild,lastChild文本节点
firstElementChild,lastElementChild文本节点
nextSibling
previousSibling上一个节点
nextElementSibling
删除元素node.removeChild(),返回删除的节点
复制节点
node.cloneNode(),如果()里面为空或false，则是浅拷贝，值复制节点，不克隆里面的子节点
如果()里为true,深拷贝，复制标签和内容
三种动态创建元素区别
document.write()
直接将内容写入页面的内容六，但是文档执行完毕，会导致页面全部重绘
document.innerHTML
将内容写入某个DOM节点，不会导致页面全部重绘
创建多个元素效率更高，采用数组形式拼接，结构稍微复杂
效率更高
document.createElement()
创建多个元素效率低一点点，但是结构更清晰
DOM
文档对象模型
dom编程接口
返回一个对象
主要有创建、增、删、改、查、属性操作、事件操作
增：appendChild,insertBefore
删：removeChild
改：修改元素属性：src,href,title；修改普通元素内容：innerHTML,innerText;修改表单元素：value,type,disabled;修改元素样式：style,className
查：DOM提供的API方法，不推荐；H5提供的新方法：querySelector,querySelectorAll;利用节点操作获取元素：父，子，兄
自定义属性：setAttribute,设置dom的属性值；getAttribute,得到dom的属性值；removeAttribute，移除属性
事件操作：给元素注册事件，采取事件源.事件类型=事件处理程序
注册事件
传统方式
注册事件的唯一性
同一个元素，同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数
方法监听注册事件
addEventListener()是一个方法
attachEvent事件监听方式
删除事件
DOM事件流
三个阶段：捕获阶段、当前目标阶段、冒泡阶段
事件的传输方式
事件对象
BOM
BOM浏览器对象模型
DOM的顶级对象是document，主要学习的是操作页面元素，w3c标准规范
BOM的顶级对象是window，学习的是浏览器窗口交互的一些对象，浏览器厂商在浏览器上定义的，交互性较差
BOM比DOM更大
它是一个全局对象，定义在全局中的变量，调用时可以省略window
window有一个特殊属性window.name
window.onload是窗口加载事件，当文档内容完全加载完成会触发事件，就调用的处理函数
可以把js代码写道页面元素上方，但是window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准
window.onresize是调整窗口大小事件，当窗口大小像素变化时触发时就调用的函数
定时器
setTimeout(调用函数，延迟的毫秒数):定时器到期后执行调用函数，调用韩素华也成为回调函数，需要等待时间才会取调用这个函数。上一件事干完，再回头调用这个函数
停止定时器：window.clearTimeout(timeoutID)
window.setInterval(回调函数，间隔的毫秒数)：重复调用一个函数，每隔这个时间，就去调用一次回调函数
window.clearInterval
禁用按钮：disabled
this
一般情况下this指向那个调用它的对象
1.全局作用域或普通函数在指向全局对象window，定时器中this指向window
2.方法调用中谁调用指向谁
3.构造函数中this指向构造函数的实例
js执行队列
创建多个线程
同步
前一个任务结束后再执行下一个任务，程序的执行顺序与任务的排列顺序是一样的
同步全部放在主线程执行栈
异步
做一件事时，可以取处理其它事情
通过回调函数实现
执行机制
先执行同步任务
异步任务放入任务队列中
一旦执行栈中所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行
location对象
url:统一资源定位符
属性
href：获取或设置整个url
host:返回主机域名
port:返回端口号
pathname:返回路径
search:返回参数
hash:返回片段#后面内容，常见于链接 锚点
history对象
history对象，域浏览器历史记录进行交互，该对象包含用户访问过的url
方法：back(),forward(),go(参数)
go(参数)，参数如果是1，前进，-1，后退
PC段网页特效
常见的offset系列属性的作用
动态获取元素的位置，大小
offset与style的区别
offset：可以得到任意样式表中的央视之，系列获得的数值是没有单位的，包含padding+border+width,是制度属性只能获取不能赋值。想要获取元素大小位置，用offset
style:只能得到行内样式表 中的样式值，style.width获得的是带有单位的字符串不包含padding和border的值是刻度属性可以获取也可以赋值。想要给元素更改值，用style
常见的client系列属性的作用
获取元素可视区的相关信息，通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等
立即执行函数：不需要调用，立马能够自己执行的函数，(function(){})()或者(function(){})
常见的scroll系列属性的作用
动态得到元素的大小，滚动的距离等
封装简单动画函数
网页轮播图案例
黑马视频学习，发现效率不高，自己听着感觉收获没有太大，打算去看MOOC的一个视频了
139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
