总结-document&遗留DOM&相互关系查询&元素节点&属性节点&CSS样式&绑定事件

document&遗留DOM&相互关系查询&元素节点&属性节点&CSS样式&绑定事件
	什么是DOM
		DOM全称Document Object Model文章对象模型
		作用：使JavaScript有了访问HTML的能力
		浏览器会自动加：thead；tbody
	document.
		getElementById(元素id)
			单个dom对象
		getElementsByTagName(标签名)
			包含dom对象的数组
		getElementsByClassName(类名)
			包含dom对象的数组
				IE8+
		getElementsByName(元素的name属性)
			包含dom对象的数组
		querySelector(css选择器)
			单个dom对象
				IE7+
		querySelectorAll(css选择器)
			包含dom对象的数组
				IE7+
	遗留DOM
		document.body
			返回body节点
		document.forms[0]
			返回表单数组
		document.formName.name
			返回单个表单项或数组
		document.anchors
			返回锚点数组
		document.links
			返回链接数组
		document.images
			返回图片数组
		document.all
			返回所有的元素数组
	相互关系查询
		父节点.children
			返回所有元素类型的子节点数组
		父节点.childNodes
			返回所有子节点，包括文本节点数组
		父节点.firstChild
			返回第一个子节点，包括文本节点的单个对象
		父节点.firstElementChild
			返回第一个子节点，不包括文本节点的单个对象
				IE8+
		父节点.lastChild
			返回最后一个子节点，包括文本节点的单个对象
		父节点.lastElementChild
			返回最后一个子节点，不包括文本节点的单个对象
				IE8+
		父节点.getElementBy....()
			返回继续调用getEle...系列方法查询子节点的数组/对象
		子节点.parentNode
			返回父节点的单个对象
		兄弟.previousSibling
			返回上一个兄弟，包括文本节点的单个对象
		兄弟.previousElementSibling
			返回上一个兄弟，不包括文本节点的单个对象
				IE8+
		兄弟.nextSibling
			返回下一个兄弟，包括文本节点的单个对象
		兄弟.nextElementSibling
			返回下一个兄弟，不包括文本节点的单个对象
				IE8+
	元素节点
		增
			创建文本节点：document.createTextNode('文本值');
			创建元素节点：document.createElement('标签名');
			方法一：父节点.appendChild(子节点);
			方法二：父节点.insertBefore(新节点, 参照的节点);
		克隆
			原来的节点.cloneNode([true]); 
		替换
			父节点.replaceChild(新节点, 待替换的节点);
		删除
			父节点.removeChild(子节点);
	属性节点
		获取
			元素节点.attributes
				获取元素的所有属性
			元素节点.getAttribute(属性名)
				获取指定属性的值
			元素节点.属性名
				获取指定属性的值
		添加/修改
			元素节点.setAttribute(属性名，属性值)
			元素节点.属性名 = 值
		删除
			元素节点.removeAttribute(属性名)  //删除一个属性
		判断元素是否存在某属性
			elementNode.hasAttribute(属性名)  检测是否有某个属性，有返回true，没有返回false
	设置/获取css样式
		设置
			 elementNode.style.css样式 = 值
		获取
			node.currentStyle.样式名称
				IE支持
			getComputedStyle(node).样式
				非IE支持
		1.可以获取行内样式
		2.可以获取js已经设置过的样式
		3.不可以获取没有设置过的样式
		4.不可以获取内联样式
	事件和事件对象
		事件
			事件绑定
				dom对象.事件名 = 处理函数;
			页面事件
				onload ：当页面载入完毕（页面中的标签和外部资源）后触发
			焦点事件
				onfocus ：当获取焦点时触发
				onblur ：当失去焦点时触发
			鼠标事件
				onmouseover ：当鼠标悬浮时触发
				onmouseout ：当鼠标离开时触发
			键盘事件
				onkeypress ：当键盘按下时触发（如果按住某个键不松开，会一直触发press事件）
				onkeydown ：当键盘按下时触发
				onkeyup ：当键盘弹起时触发
			其他事件
				onchange ：内容改变时会触发，常用于select>option。
				onsubmit ：表单提交时触发，这个事件要给form绑定而不是给提交按钮绑定
				onresize ： 页面窗口改变大小时会触发
				onscroll ：滚动条滚动时触发
			事件处理函数中的this 表示绑定事件的那个对象。换句话说，点击的是谁，this就表示谁
		事件对象
			获取
				window.event;
					IE
				传递给事件处理函数的形参
					非IE
			keyCode：表示键盘上的键对应的数值。
			altKey：表示是否按了alt键，按了结果为true，没按结果为false（组合按键的时候，才会有作用）
			shiftKey：表示是否按了shift键，按了结果为true，没按结果为false（组合按键的时候，才会有作用）
			ctrlKey：表示是否按了ctrl键，按了结果为true，没按结果为false（组合按键的时候，才会有作用）
			pageX: 鼠标距离页面左边的距离
			pageY: 鼠标距离页面上面的距离
			screenX: 鼠标距离屏幕左边的距离
			screenY: 鼠标距离屏幕上面的距离