Dom ：Document Object Model (文档对象模型)
文档：HTML页面
文档对象：页面中的元素
文档对象模型：为了让对象（js）能够操作页面中的元素
DOM把文档看做是一棵树，同时定义了很多方法来操作这棵树里的每一个元素（节点）DOM节点
方法：
一、获取子元素
obj.childNodes
obj.children
obj.firstElementChild || obj.firstChild
obj.lastElementChild || obj.lastChild
obj.nextElementSibling || obj.nextSibling
obj.previousElementSibling || obj.previousSibling
二、获取父元素
obj.parentNode
obj.offsetParent
三、各种位置宽高
obj.offsetTop/obj.offsetLeft
obj.clientWidth
obj.offsetWodth
一、获取子节点：
1、元素.childNodes() 只读属性 获取子元素列表集合
标准浏览器：包含文本节点，元素节点
ie7/8：只包含元素节点
类型有12种
1、元素节点==1
2、属性节点==2
3、文本节点==3
判断类型：元素.nodeType
元素.attributes() 只读属性 获取元素属性列表集合（数组）
/*
eg:
<ul id='oUl' class='aa'></ul>
oUl.attributes.length //2
oUl.attributes[0].nodeType //2 属性节点
oUl.attributes[0].name //id
oUl.attributes[1].name //aa
*/
2、元素.children() 只读属性 获取子元素列表集合 推荐使用
标准浏览器：只包含元素节点
ie7/8：只包含元素节点
3、获取第一个子节点：
元素.firstChild 只读属性
标准下包含文本节点，元素节点
ie7/8：只包含元素节点
元素.firstElementFirst
标准下只包含元素节点
ie7/8无这一属性
4、获取最后一个子节点 只读属性
元素.lastChild;
标准下包含文本节点，元素节点
ie7/8：只包含元素节点
元素.lastElementChild;
标准下只包含元素节点
ie7/8无这一属性
二、获取兄弟节点
1、获取下一个兄弟节点
元素.nextSibling; 只读属性
标准下包含文本节点，元素节点
ie7/8只包含元素节点
元素.nextElementSibling
标准下只包含元素节点
ie7/8无这一属性
2、获取上一个兄弟节点 只读属性
元素.previousSibling
标准浏览器包含文本节点，元素节点
ie7/8只包含元素节点
元素.previousElementSibling
标准下只包含元素节点
ie7/8无这一属性
三、获取当前元素父级节点
1、元素.parentNode 只读属性
标准和ie7/8无差别，没有兼容性问题
2、元素.offsetParent 只读属性 获取离当前元素最近的有定位的父级元素
如果没有定位，默认是body
ie7如果当前元素没有定位，默认是body 。如果当前元素有定位，默认是HTML
元素.offsetLeft 元素.offsetTop 当前元素到定位父级偏移的位置（offsetParent）
四、获取元素的各种尺寸宽高
1、元素.offsetTop / 元素.offsetLeft 获取元素到定位父级的距离（上边距，左边距）
如果当前元素没有定位
offsetLeft/offsetTop ---> html
offsetParent ---> body
2、元素.clientWidth：width+padding（可视区域的宽，如果内容过多，自身有滚动条或者overflow：hide都不算在内）
元素.offsetWidth ：width+padding+border（可视区域的宽+border）
五、操作元素行间属性的多种方式
1、元素.getAttribute('属性名') 获取指定元素的属性
2、元素.setAttribute('属性名','属性值') 给指定元素的指定属性设置值 // oText.setAttribute( 'value', 'hello' );
3、元素.removeAttribute('属性名') 删除指定元素的指定属性
六、动态创建元素
1、var obj = document.createElement('标签名')
将创建的标签添加到页面中(你要添加在哪个父级下)
①、父级.appendChild(obj)
②、被插入的元素父级.insertBefore(obj,被插入的元素)
ie(所有版本)下如果被插入的元素不存在，会报错
标准下（火狐，谷歌）如果被插入的元素不存在，则会以appendChild形式添加元素
2、要删除的子节点父元素.removeChild(要删除的子节点) 删除子节点
3、被替换的节点父级.replaceChild(新的节点，被替换的节点) 替换子节点
表单操作：
一、获取表单: formId.name
<input type='radio' name='sex' value='男'/>男
<input type='radio' name='sex' value='女'/>女
radio、CheckBox ：name相同为一组 checked 选中状态
formId.sex 是一个数组 formId.sex[0] 获取到第一个男
<select name='city'>
<option value='北京'>北京</option>
<option value='上海' selected>上海</option>
<option value='广州'>广州</option>
</select>
select selected选中 默认上海
二、change事件：
type = 'text' 当光标离开input的时候执行onchange事件
type='radio'/'checkbox' 标准浏览器值改变之后就执行，ie7/8 光标离开之后才执行
三、表单事件
<form id='oForm' action='http://www.baidu.com'></form>
oForm.onsubmit = function(){
if(this.text1.value==" "){
alert("请输入内容");
return false;
}
}
onsubmit：表单提交事件
onreset：表单重置事件
return false 阻止事件的发生
BOM操作：Browser Object Model 浏览器对象模型
方法：window.open(地址默认是空白页面，窗口打开方式默认新窗口) 打开一个新窗口 window可以省略
属性：1、window.navigator.userAgent 浏览器信息
检查是否为ie浏览器
if ( window.navigator.userAgent.indexOf('MSIE') != -1 ) {
alert('我是ie');
} else {
alert('我不是ie');
}
2、window.location 地址栏的信息
window.location.href 地址栏的信息
window.location.hash #后面的信息
window.location.search ?后面的信息
窗口尺寸大小：
浏览器窗口可视区的大小：document.documentElement.clientWidth / document.documentElement.clientHeight
滚动条滚动距离：document.documentElement.scrollTop/.scrollLeft
div内容里的高度（滚动高）：document.body.scrollHeight (全部的高度，包括里面子元素的高度) 子元素高+padding 除开border外盒子里的高度
文档高度：document.body.offsetHeight
window对象常用事件：
window.onscroll：滚动条滚动时触发
window.onresize：浏览器窗口大小改变时触发