Dom ：Document Object Model (文檔對象模型)
文檔：HTML頁面
文檔對象：頁面中的元素
文檔對象模型：為了讓對象（js）能夠操作頁面中的元素
DOM把文檔看做是一棵樹，同時(shí)定義了很多方法來操作這棵樹里的每一個(gè)元素（節(jié)點(diǎn)）DOM節(jié)點(diǎn)
方法：
一、獲取子元素
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
一、獲取子節(jié)點(diǎn)：
1、元素.childNodes() 只讀屬性 獲取子元素列表集合
標(biāo)準(zhǔn)瀏覽器：包含文本節(jié)點(diǎn)，元素節(jié)點(diǎn)
ie7/8：只包含元素節(jié)點(diǎn)
類型有12種
1、元素節(jié)點(diǎn)==1
2、屬性節(jié)點(diǎn)==2
3、文本節(jié)點(diǎn)==3
判斷類型：元素.nodeType
元素.attributes() 只讀屬性 獲取元素屬性列表集合（數(shù)組）
/*
eg:
<ul id='oUl' class='aa'></ul>
oUl.attributes.length //2
oUl.attributes[0].nodeType //2 屬性節(jié)點(diǎn)
oUl.attributes[0].name //id
oUl.attributes[1].name //aa
*/
2、元素.children() 只讀屬性 獲取子元素列表集合 推薦使用
標(biāo)準(zhǔn)瀏覽器：只包含元素節(jié)點(diǎn)
ie7/8：只包含元素節(jié)點(diǎn)
3、獲取第一個(gè)子節(jié)點(diǎn)：
元素.firstChild 只讀屬性
標(biāo)準(zhǔn)下包含文本節(jié)點(diǎn)，元素節(jié)點(diǎn)
ie7/8：只包含元素節(jié)點(diǎn)
元素.firstElementFirst
標(biāo)準(zhǔn)下只包含元素節(jié)點(diǎn)
ie7/8無這一屬性
4、獲取最后一個(gè)子節(jié)點(diǎn) 只讀屬性
元素.lastChild;
標(biāo)準(zhǔn)下包含文本節(jié)點(diǎn)，元素節(jié)點(diǎn)
ie7/8：只包含元素節(jié)點(diǎn)
元素.lastElementChild;
標(biāo)準(zhǔn)下只包含元素節(jié)點(diǎn)
ie7/8無這一屬性
二、獲取兄弟節(jié)點(diǎn)
1、獲取下一個(gè)兄弟節(jié)點(diǎn)
元素.nextSibling; 只讀屬性
標(biāo)準(zhǔn)下包含文本節(jié)點(diǎn)，元素節(jié)點(diǎn)
ie7/8只包含元素節(jié)點(diǎn)
元素.nextElementSibling
標(biāo)準(zhǔn)下只包含元素節(jié)點(diǎn)
ie7/8無這一屬性
2、獲取上一個(gè)兄弟節(jié)點(diǎn) 只讀屬性
元素.previousSibling
標(biāo)準(zhǔn)瀏覽器包含文本節(jié)點(diǎn)，元素節(jié)點(diǎn)
ie7/8只包含元素節(jié)點(diǎn)
元素.previousElementSibling
標(biāo)準(zhǔn)下只包含元素節(jié)點(diǎn)
ie7/8無這一屬性
三、獲取當(dāng)前元素父級節(jié)點(diǎn)
1、元素.parentNode 只讀屬性
標(biāo)準(zhǔn)和ie7/8無差別，沒有兼容性問題
2、元素.offsetParent 只讀屬性 獲取離當(dāng)前元素最近的有定位的父級元素
如果沒有定位，默認(rèn)是body
ie7如果當(dāng)前元素沒有定位，默認(rèn)是body 。如果當(dāng)前元素有定位，默認(rèn)是HTML
元素.offsetLeft 元素.offsetTop 當(dāng)前元素到定位父級偏移的位置（offsetParent）
四、獲取元素的各種尺寸寬高
1、元素.offsetTop / 元素.offsetLeft 獲取元素到定位父級的距離（上邊距，左邊距）
如果當(dāng)前元素沒有定位
offsetLeft/offsetTop ---> html
offsetParent ---> body
2、元素.clientWidth：width+padding（可視區(qū)域的寬，如果內(nèi)容過多，自身有滾動(dòng)條或者overflow：hide都不算在內(nèi)）
元素.offsetWidth ：width+padding+border（可視區(qū)域的寬+border）
五、操作元素行間屬性的多種方式
1、元素.getAttribute('屬性名') 獲取指定元素的屬性
2、元素.setAttribute('屬性名','屬性值') 給指定元素的指定屬性設(shè)置值 // oText.setAttribute( 'value', 'hello' );
3、元素.removeAttribute('屬性名') 刪除指定元素的指定屬性
六、動(dòng)態(tài)創(chuàng)建元素
1、var obj = document.createElement('標(biāo)簽名')
將創(chuàng)建的標(biāo)簽添加到頁面中(你要添加在哪個(gè)父級下)
①、父級.appendChild(obj)
②、被插入的元素父級.insertBefore(obj,被插入的元素)
ie(所有版本)下如果被插入的元素不存在，會報(bào)錯(cuò)
標(biāo)準(zhǔn)下（火狐，谷歌）如果被插入的元素不存在，則會以appendChild形式添加元素
2、要?jiǎng)h除的子節(jié)點(diǎn)父元素.removeChild(要?jiǎng)h除的子節(jié)點(diǎn)) 刪除子節(jié)點(diǎn)
3、被替換的節(jié)點(diǎn)父級.replaceChild(新的節(jié)點(diǎn)，被替換的節(jié)點(diǎn)) 替換子節(jié)點(diǎn)
表單操作：
一、獲取表單: formId.name
<input type='radio' name='sex' value='男'/>男
<input type='radio' name='sex' value='女'/>女
radio、CheckBox ：name相同為一組 checked 選中狀態(tài)
formId.sex 是一個(gè)數(shù)組 formId.sex[0] 獲取到第一個(gè)男
<select name='city'>
<option value='北京'>北京</option>
<option value='上海' selected>上海</option>
<option value='廣州'>廣州</option>
</select>
select selected選中 默認(rèn)上海
二、change事件：
type = 'text' 當(dāng)光標(biāo)離開input的時(shí)候執(zhí)行onchange事件
type='radio'/'checkbox' 標(biāo)準(zhǔn)瀏覽器值改變之后就執(zhí)行，ie7/8 光標(biāo)離開之后才執(zhí)行
三、表單事件
<form id='oForm' action='http://www.baidu.com'></form>
oForm.onsubmit = function(){
if(this.text1.value==" "){
alert("請輸入內(nèi)容");
return false;
}
}
onsubmit：表單提交事件
onreset：表單重置事件
return false 阻止事件的發(fā)生
BOM操作：Browser Object Model 瀏覽器對象模型
方法：window.open(地址默認(rèn)是空白頁面，窗口打開方式默認(rèn)新窗口) 打開一個(gè)新窗口 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 ?后面的信息
窗口尺寸大?。? 瀏覽器窗口可視區(qū)的大?。篸ocument.documentElement.clientWidth / document.documentElement.clientHeight
滾動(dòng)條滾動(dòng)距離：document.documentElement.scrollTop/.scrollLeft
div內(nèi)容里的高度（滾動(dòng)高）：document.body.scrollHeight (全部的高度，包括里面子元素的高度) 子元素高+padding 除開border外盒子里的高度
文檔高度：document.body.offsetHeight
window對象常用事件：
window.onscroll：滾動(dòng)條滾動(dòng)時(shí)觸發(fā)
window.onresize：瀏覽器窗口大小改變時(shí)觸發(fā)