DOM 和 BOM

一、DOM基本操作 - Document Object Model

1、节点的类型

节点	值
元素节点	1
属性节点	2
文本节点	3
注释节点	8
document	9
DocumentFragment	11

lastChild：返回最后一个子节点，还需判断节点类型
lastElementChild：返回最后一个元素节点，IE9以下不兼容

getElementsByTagName(’*’)：选所有标签

2、Date对象

getTime()：时间戳
setTime(value);

3、定时器

setInterval()—》clearInterval()
setTimeout()—》clearTimeout()
注：开启定时器时设置的时间，开启后就不能改

4、查看元素的尺寸，包括padding，不包括margin

dom.offsetWidth
dom.offsetHeight

5、查看元素的位置

dom.offsetLeft
dom.offsetTop
对于无定位父级的元素，返回相对于文档的坐标，
对于有定位父级的元素，返回相对于最近的有定位的父级的坐标

6、滚动条

window.scroll() ，一样的效果window.scrollTo()
window.scrollBy()

7、style属性

只有style可读可写，其它的都是只读
style读的是行间样式，所以读出来的不可靠
style可以间接的改变css

8、window.getComputedStyle(div, “after”).prop，获取伪元素的属性

9、js与css不一致

属性	实际写法
float	cssFloat
class	className
复合属性 如：background-color	小驼峰 backgroundColor

二、事件

1、绑定方式

1. ele.onxxx=function(event){}
   兼容性很好，但是一个元素的同一个事件上只能绑定一个处理程序
   基本等同于写在HTML行间上
2. obj.addEventListener(type, fn, false);
   IE9以下不兼容，可以为一个事件绑定多个处理程序
3. obj.attachEvent(‘on’+type, fn);
   IE独有，一个事件同样可以绑定多个处理程序

2、解除事件

1. ele.onxxx=false/’’/null;//3个值都可以
2. ele.removeEventListener(type, fn, false);
3. ele.detachEvent(‘on’+type, fn);
   注：若绑定匿名函数，则无法解除

3、事件处理模型

事件冒泡：结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）

事件捕获：结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）

• IE没有捕获事件

触发顺序，先捕获，后冒泡
focus，blur，change，submit，reset，select等事件不冒泡

4、取消默认事件，如表单提交，a标签跳转，右键菜单等

1. return false;以对象属性的方式注册的事件才生效
2. event.preventDefault();W3C标准，IE9以下不兼容
3. event.returnValue = false;//兼容IE
   注document.oncontextmenu右键事件
   a链接href=“javascript:void(false)”

5、事件委托

利用事件冒泡，和事件源对象进行处理

• 优点：性能，不需要循环所有的元素一个个绑定事件
     灵活，当有新的子元素时不需要重新绑定事件

6、鼠标事件

onmousedown、onmouseup利用event.button区分左右键，0左键，1中间滚轮，2右键
onmouseover、onmouseout
onmouseenter、onmouseleave

7、键盘事件

优先级：keydown > keypress > keyup
区别：keydown可以响应任意键盘按键
   keypress只可以响应字符类键盘按键，返回ASCII码，可以转换成相应的字符，String.fromCharCode(event.charCode)

8、onload和onscroll

onload事件要等一切资源（如图片等）加载完成后才执行

9、JSON

JSON.parse(); //string–》json
JSON.stringify();//json–》string

10、渲染绘制

domTree+cssTree=randerTree渲染绘制
reflow重排：

1. dom节点的删除，添加
2. dom节点的宽高变化，display
3. offsetWidth，offsetLeft

repaint重绘：

11、异步加载

1. defer，只有IE可用，DOM文档全部解析完才加载
2. aysnc，W3C标准方法IE8以下不兼容，加载完就执行
3. 创建script，插入到DOM中，加载完毕后callBack

12、浏览器加载时间线

1. 创建Document对象，开始解析web页面，document.readState=‘loading’
2. 遇到link外部css，创建线程加载，并继续解析文档。
3. 遇到script外部js，并且没有设置async、defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。
4. 遇到script外部js，并且有设置async、defer，浏览器创建线程加载，并继续解析文档。
5. 遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。
6. 当文档解析完成后，document.readState=‘interactive’
7. 文档解析完成后，所有设置有defer的脚本会按照顺序执行
8. document对象触发DOMContentLoaded时间，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。
9. 当所有async的脚本加载完成并执行后，img等加载完成后，document.readState=‘complete’，window对象触发load事件。
10. 从此，以异步相应方式处理用户输入，网络事件等。

13、正则表达式

1. 字面量：var reg = //;
   reg.test();//返回true或false
   reg.exec();
   str.match(reg);
   str.search(reg);
   str.split(reg);
   str.replace(reg, str1)
2. new RegExp("",“i”)

下面3个属性可以同时使用

• i：忽略大小写
• g：全局匹配
• m：多行匹配，通常配合^使用

^：写在表达式[]外面表：非
^：写在表达式里面表：以什么开头，n$：以n结尾

• 表达式[] ，如：[0-9]
• 元字符 ，如：\d
• 量词，如：+或*或?

贪婪匹配原则：能多不少
?：打破贪婪匹配，能少不多

//正向预查，正向断言：?=
var str = "abaaaaa";
reg=/a(?=b)/g;//匹配后面紧跟b的a
console.log(str.match(reg));

练习题一

// 将AABB形式的字符串倒过来显示BBAA
var reg = /(\w)\1(\w)\2/g;
var str = "xxyy";
console.log(str.replace(reg, "$2$2$1$1"));

练习题二

// 将the-first-name转换成theFirstName
var reg = /-(\w)/g;
var str = "the-first-name";
console.log(str.replace(reg, function(s, tmp){
	return tmp.toUpperCase();
}));

练习题三

//转化成100.000.000的形式
var str="100000000";
var reg = /(?=(\B)(\d{3})+$)/g;
console.log(str.replace(reg,"."));

三、BOM - Browser Object Model浏览器对象模型

定义了操作浏览器的接口，用来获取或设置浏览器的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等

BOM对象：Window、History、Navigator、Screen、Location等

由于浏览器厂商的不同，bom对象的兼容性极底，一般情况下，我们只用其中的部分功能