JS学习总结之三：DOM和BOM

一、DOM

一个完整的JavaScript实现包含三个部分：ECMAScript、DOM、BOM；
1、那什么是DOM呢？
DOM，全称：Document Object Model（文档对象模型）；
JS中通过DOM来对HTML文档进行操作，从而操作Web页面；
文档—表示的就是整个HTML网页文档；
对象—表示将网页中的每一个部分都转换为一个对象；
模型—使用模型来表示对象之间的关系，这样方便我们获取对象；

2、HTML树

3、节点
节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分的可以称为一个节点。比如：HTML标签，属性，文本……都是一个节点；虽然都为节点，但他们的具体类型是不同的。
1）元素节点 ：HTML文档中的标签；
2）属性节点 ：元素的属性；
3）文本节点 ：标签中的文本内容；
4）文档节点 ：整个HTML文档；
innerText用于获取元素内部的文本内容
innerHTML用于获取元素内部的HTML代码，但对于自结束标签没用
如要获取元素节点属性，可使用元素.属性
如：<input value=‘man’ />，读取value值就直接使用：元素.value
4、获取元素节点
通过document对象调用
1）getElementById()：通过id属性获取一个元素节点对象；
2）getElementsByTagName()：通过标签名获取一组元素节点对象；
3）getElementsByName() ：通过name属性获取一组元素节点对象；
4）getElementsByClassName()：通过class名获取一组元素节点对象
5）querySelector()：需要一个选择器的字符串作为参数，可以根据css选择器来查询一个元素节点对象（只返回第一个）
6）querySelectorAll()：根据css选择器来查询一组元素节点对象（返回满足条件的所有元素）

5、获取元素节点的子节点
通过具体的元素节点调用
1）getElementsByTagName()：----方法，返回当前节点的指定标签名后代节点；
2）childNodes：----属性，表示当前节点的所以子节点；
-----childNodes会获取包括文本节点在内的全部节点，根据DOM标准标签中的空白也会当作文本节点，在IE8以下的浏览器中，标签间空白不会当作文本节点；（不推荐）
children属性可以获取当前元素的所以子元素（即标签）(推荐使用)；
3）firstChild----属性，表示当前节点的第一个子节点；（也包括空白文本）；
-----firstElementChild可以获取当前节点的第一个子元素（不包括空白节点）
但IE8及以下不行，所以如果要兼容IE8及以下不建议使用
4）lastChild----属性，表示当前节点的最后一个子节点；

6、获取父节点和兄弟节点
通过具体的节点调用
1）parentNode----属性，表示当前节点的父节点；
2）previousSibling----属性，表示当前节点的前一个兄弟节点（包括空白文本）；
previousElementSibling 属性：获取前一个兄弟元素；
3）nextSibling----属性，表示当前节点的后一个兄弟节点；

7、DOM的增删改
1）document.createElement()：创建一个元素节点，并将创建好的元素节点返回；需要一个标签名作为参数；
2）document.createTextNode() ： 创建一个文本节点，需要一个文本内容作为参数；
3）appendChild()：向父节点中添加一个子节点；
语法：父节点.appendChild(子节点)
4）insertBefore()： 在指定子节点前面插入一个新节点；
语法：父节点.insertBefore(新的子节点，指定节点)；
5）replaceChild()：用新子节点替换指定子节点；
语法：父节点.replaceChild(新节点，旧节点)；
6）removeChild()：删除指定子节点；
语法：父节点.removeChild(子节点)-----“他杀”；有时情况复杂，难找出父节点时，可用：子节点.parentNode.removeChild(子节点)-----“自杀”；

8、DOM的其他方法
1）获取body：在document中有一个body属性，它保存的是body的引用；
语法：document.body；
2) document.documentElement : 保存的是html根标签;
3) document.all ：代表页面中所以的元素；

二、事件

1)、三种绑定方式

//1
<button id="btn" onclick="alert('1')">按钮<button>
或者在JS代码中绑定：
<button id="btn">按钮<button>
<script type="text/javascript">
	var btn = document.getElementById('btn')
	//2.
	// 使用该方法只能同时为一个元素的一个事件绑定一个响应函数
	//如果绑定了多个，后边的会覆盖前面的，只有最后一个生效
	btn.onclick = function(){
		alert('1')
	}
	//3、
	//该方法可以为一个元素的相同事件绑定的多个响应函数，都会生效，先绑定的先触发
	//参数：1.事件（不要on）；2.回调函数；3.是否在捕获阶段触发事件，一般都传false
	btn.addEventListener('click', function(){
		alert('1')
	}, false)
</script>

2）onload事件：会在整个页面加载完成之后触发；JS代码要想写在header中，就为window绑定onload事件（考虑到性能，其实JS写在下面好）

	window.onload = function(){
		// js代码
	}

1、事件对象
当事件的响应函数被触发时，浏览器每次都会将一个事件对象（event）作为实参传递进响应函数；在事件对象中封装了当前事件的信息，如鼠标的坐标、哪个按键被按下等等；
1）clientX、clientY：获取鼠标指针的水平坐标和垂直坐标
2、事件的冒泡（bubble）和委派
事件冒泡：指的是事件的向上传导，当后代元素的事件被触发时，其祖先元素的相同事件也会被触发；
取消冒泡：event.cancelBubble = true
事件委派：指将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件被触发，可以冒泡到祖先元素上，从而通过祖先元素的响应函数来处理事件；（利用事件的冒泡原理，减少元素绑定的次数）
event.target：触发事件的对象
3、事件的传播
事件的传播分为3个阶段
1、捕获阶段：从最外层的祖先元素，向目标元素进行事件的捕获，默认此时不会触发事件；
2、目标阶段：事件捕获到目标元素，捕获结束，开始在目标元素触发事件；
3、冒泡阶段：事件从目标元素向祖先元素传递，依次触发祖先元素的事件

三、使用DOM操作样式

1、操作内联样式
语法：元素.style.样式名 = 样式值；如修改宽度：元素.style.width = “300px”
如果css样式名中含有 - ，要改成驼峰命名法，如元素.style.backgrundColor
读取样式：元素.style.样式名
2、读取元素当前显示的样式
语法：元素.currentStyle.样式名，如果当前元素没有设置该样式，则获取默认值（只有IE支持，其他浏览器不支持，不推荐使用）
其他浏览器使用getComputedStyle()方法来获取元素的当前样式，该方法是window的方法，直接使用；该方法返回一个封装了当前元素的样式的对象
语法：getComputedStyle(要获取样式的元素，null).样式名
3、其他样式
1、clientWidth、clientHeight：这两个属性可以获取元素的可见宽度和高度（返回值不带px）（包括内容区和内边距）；
2、offsetWidth、offsetHeight：获取元素的整个宽度和高度（包括内容区+内边距+边框）；
3、offsetParent：该属性用来获取当前元素的定位父元素（离当前元素最近的开启了定位 祖先元素，如果所有的祖先元素都没有开启定位，则获取到body）；
4、offsetLeft、offsetTop：获取当前元素相对于定位父元素的水平偏移量和垂直偏移量；
5、scrollWidth、scrollHeight：获取元素整个滚动区域的宽度和高度；
6、scrollLeft、scrollTop：获取水平滚动条好垂直滚动条滚动的距离；
当满足：scrollHeight - scrollTop == clientHeight，说明垂直滚动条滚动到底了。
4、操作class
元素.calssName = ‘class类名’：修改元素的class；
元素.classList：返回元素的类名；
元素.classList.add(‘类名1’，‘类名2’)：向元素添加一个或多个类，如果指定的类已存在，则不会添加；
元素.classList.remove(‘类名’)：删除指定的类；
元素.classList.contains(‘类名’)：判断是否含有某个类

四、BOM

浏览器对象模型
1、BOM对象
1）window：代表浏览器的窗口，也是网页中的全局对象
2）Navigator：浏览器的信息
navigator.userAgent：用来判断不同的浏览器
3）Location：代表当前浏览器的地址栏信息
location.href：当前页面的URL
location.assign(url)：跳转到某个url页面
location.reload()：重新加载页面；如果传递一个true作为参数，表示清空缓存
location.replace(url)：跳转到新页面，用新页面替换旧页面，不会生成历史记录
4）History：浏览器的历时记录，可以操作浏览器向前或向后翻页
history.length：可以获取到当前访问的链接数量
history.back()：回退到上一页面
history.forward()：跳转到下一页面
history.go()：跳转到指定的页面；需要一个整数作为参数，如history.go(2)：表示跳转到前2个页面；如history.go(-1)：表示向后跳转一个页面；
5）Screen：用户的屏幕信息，可以获取用户显示器的信息