js-bom和dom笔记

js-bom

window.onload()

jsx 复制代码

window.onload()=function(){}

文档页面内容完全加载完成会触发该事件

jsx 复制代码

document.addEventlistener('DOMContentLoaded',function(){})//dom加载完成后执行，ie9以上支持

调整窗口大小事件

窗口大小发生变化则触发，常用window.innerWidth作响应式布局
jsx 复制代码
```
window.addEventListener('resize',function(){
})
```
定时器(回调函数，事件)

只调用一次的定时器
jsx 复制代码
```
setTimeout(function(){},2000);//2000ms
setTimeout('fn()',2000);
```
jsx 复制代码
```
window.clearTimeout(timer);
```
重复调用的定时器
jsx 复制代码
```
setInterval(function(),3000);
clearInterval(timer);
```
定义全局变量var timer = null；
同步和异步

同步任务在主线程上执行，形成执行栈

异步任务通过回调函数实现（包括普通事件：click，resize；资源加载：load，error；定时器），他们的相关回调函数会放在任务队列中

先同步，再异步，同步任务重复获取异步任务并执行，这种机制为事件循环
location
- 统一资源定位符
location常见属性

location对象方法

字符串操作

jsx 复制代码

.substr(起始的位置,几个字符);//第二个参数省略默认取得所有剩余字符
var arr=p.split('=');//将p的=俩边分割为俩部分存入数组

navigator

判断用户pc和手机终端实现跳转
history
offset属性元素位置
client属性元素大小

立即执行函数

jsx 复制代码

（function(){})();
（function(a,b){})(2,3);//传递参数
(function(){}())

scroll属性滚动距离

jsx 复制代码

div.addEventListener('srcoll',function(){
})//滚动事件
window.pageYoffset

mouseover和mouseenter

mouseover事件经过自身和子盒子都会触发，mouseenter只会经过自身盒子触发

mouseenter和mouseleave都不会冒泡

本地存储

1.sessionStorage

jsx 复制代码

sessionStorage.setItem(key,value);
sessionStorage.getItem(key)
sessionStorage.removeTtem(key)
sessionStorage.clear()

2.localStorage

生命周期永久有效，除非手动删除，关闭页面也会存在；可以多窗口共享；以键值对形式存储

jsx 复制代码

localStorage.setItem(key,value);
localStorage.getItem(key)
localStorage.removeTtem(key)
localStorage.clear()

js-dom

文档页面从上往下加载，得先有标签，因此把script写在标签下面

console.dir()打印元素对象

获取元素的方式

一般来说获取的元素大小写敏感

jsx 复制代码

getElementById('')//通过id

var li=document getElementsByTagName('li')//通过标签名
li[0]//标签li的第一个对象

getElementsByClassName('box')//通过类名
box[0]//类名box的第一个对象

document.querySelector('.box')//指定选择器的第一个元素对象
document.querySelector('#box')
document.querySelector('li')
document.querySelectorAll('li')//指定选择器的所有元素对象

获取body和html
jsx 复制代码
```
document.body
document.documentElement
```
注册事件

事件三要素：事件源，事件类型，事件处理程序

以上方法具有唯一性，后注册的处理函数会覆盖前面的。

推荐可叠加的新方法（不用带on）:
jsx 复制代码
```
bt.addEventListener('click',function(){})
```
iE9以下使用attchEvent

删除事件

传统方法删除事件

jsx 复制代码

div.οnclick=null;//在点击事件内添加则该按钮点击一次即失效

addEventListener删除事件

注册事件不能使用匿名函数

jsx 复制代码

div.addEventLitsener('click',fn)
div.removeEventListener('click',fn)
function fn(e){
	e.type;
}

ie9以下使用detachEvent()

改变元素内容

jsx 复制代码

demo.innerHTML=//包括html标签，空格，换行
demo.innerTetx=//去除html标签，空格，换行
input.value='被点击了';

格式化日期年月日

禁用按钮button

jsx 复制代码

btn.disabled=true;//按钮无法再被点击

className

jsx 复制代码

this.className='change';//不保留原来的类
this.className='first change';//保留原来的类名first，即多类名选择器

排他思想

自定义属性获取

jsx 复制代码

div.属性//获取元素自身属性
div.getAttribute('index')
div.setAttribute('index',2)//修改属性值
div.setAttribute('class','container')
div.removeAttribute()//移除属性值

H5规定：自定义属性以data-开头

jsx 复制代码

<div data-index="1"></div>
div.dataset.index或div.getAttribute('data-index')

节点操作

父节点，子节点

jsx 复制代码

close.parentNode//close最近的父节点
close.childNodes//lose所有的子节点包含元素节点和文本节点等
close.children//close所有元素节点
close.children.length-1//close最后一个节点的索引号
close.firstElementChild//close第一个元素节点

兄弟节点

jsx 复制代码

div.nextSibling//下一个兄弟节点，包含元素节点，文本节点等
div.previousSibling//前一个
以下兼容性问题：ie9以上支持
div.nextElementSibling//下一个兄弟元素节点
div.previousElementSibling//前一个

创建节点

jsx 复制代码

li=createElement('li');//创建节点
ul.appendChild(li);//在ul已有节点后插入li
ul.prepend(li);//在ul已有节点前插入li
ul.insertbefore(li,ul.children[0]);//在ul的第一个孩子前插入li

删除节点

jsx 复制代码

ul.removeChlid(ul.children[0]);

克隆节点

jsx 复制代码

ul.cloneNode(true);//深度拷贝，复制节点及里面所有子节点
ul.cloneNode(false);//括号内为空或false，浅拷贝不克隆子节点

document.write()和innerHTML

页面文档流加载完后调用document.write()会导致页面重绘

creatElement（）创建多个元素效率稍低一点，但是结构更清晰

innerHTML创建多个元素时，不要拼接字符串，采用数组形式拼接效率更高，但结构稍复杂
动态创建数组
dom事件流

冒泡阶段从子到父

目标阶段

捕获阶段从父到子

onclick和attachEbentListener只能得到冒泡阶段

addEventListener第三个参数是true则处于捕获阶段

有些事件没有冒泡
事件对象

event包含一系列属性
jsx 复制代码
```
e=e||window.event;//为兼容ie678，一般不考虑
```
jsx 复制代码
```
e.target//返回点击的元素
this//返回绑定的元素
```
retuen false也能阻止默认行为（如a链接跳转）
鼠标事件对象
键盘事件对象

onkeypress不识别功能键（左右箭头，shift），但区别大小写（keyCode），其他俩个相反

执行顺序：keydown，keypress，keyup
事件委托

也称事件代理

原理：不是每个子节点单独设置事件监听器，而是设置在父结点上，如何利用冒泡原理影响设置每个子节点，提高了程序的性能
阻止默认事件的一些示例（禁止右键菜单，阻止表单提交等）

.forEach((item,index)=>{})