JS DOM（文檔對(duì)象模型）與BOM（瀏覽器對(duì)象模型）

在JS中，對(duì)DOM（Document Object Model）對(duì)象和BOM（Browser Object Model ）對(duì)象的操作是非常重要的內(nèi)容。DOM主要包括HTML文檔的屬性和方法，像對(duì)HTML節(jié)點(diǎn)的操作，CSS的操作和HTML事件的監(jiān)聽和處理。BOM不要包括瀏覽器相關(guān)的一些屬性和方法。

DOM知識(shí)點(diǎn)
1、改變頁(yè)面的元素和屬性
a、獲取元素的方法：
document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()
b、js輸出HTML內(nèi)容
document.write();
c、獲取和修改元素的內(nèi)容：
document.getElementById(id).innerHTML
document.getElementById(id).innerHTML=new HTML；
d、獲取和修改元素的屬性值：
document.getElementById(id).attribute
document.getElementById(id).attribute=new value；
e、添加html標(biāo)簽：document.createElement
f、添加html文本內(nèi)容：document.createTextNode
g、追加元素：document.appendChild();
h、從父元素中刪除子元素：parent.removeChild(child)

2、改變頁(yè)面元素的樣式
a、修改css樣式：
document.getElementById(id).style.property
document.getElementById(id).style.property=new style；

3、對(duì)頁(yè)面元素事件的監(jiān)聽和處理
常用的事件：
onload：當(dāng)文檔加載時(shí)運(yùn)行腳本
onblur：當(dāng)窗口失去焦點(diǎn)時(shí)運(yùn)行腳本
onfocus：當(dāng)窗口獲得焦點(diǎn)時(shí)運(yùn)行腳本
onchange：當(dāng)元素改變時(shí)運(yùn)行腳本
onsubmit：當(dāng)提交表單時(shí)運(yùn)行腳本
onkeydown：當(dāng)按下按鍵時(shí)運(yùn)行腳本
onkeypress：當(dāng)按下并松開按鍵時(shí)運(yùn)行腳本
onkeyup：當(dāng)松開按鍵時(shí)運(yùn)行腳本
onclick：當(dāng)單擊鼠標(biāo)時(shí)運(yùn)行腳本
ondblclick：當(dāng)雙擊鼠標(biāo)時(shí)運(yùn)行腳本
onmousedown：當(dāng)按下鼠標(biāo)按鈕時(shí)運(yùn)行腳本
onmousemove：當(dāng)鼠標(biāo)指針移動(dòng)時(shí)運(yùn)行腳本
onmouseout：當(dāng)鼠標(biāo)指針移出元素時(shí)運(yùn)行腳本
onmouseover：當(dāng)鼠標(biāo)指針移至元素之上時(shí)運(yùn)行腳本
onmouseup：當(dāng)松開鼠標(biāo)按鈕時(shí)運(yùn)行腳本
onabort：當(dāng)發(fā)生中止事件時(shí)運(yùn)行腳本

BOM知識(shí)點(diǎn)
a、窗口
window.open()：打開新窗口
window.close()：關(guān)閉當(dāng)前窗口
window.moveTo()：移動(dòng)當(dāng)前窗口
window.resizeTo()：調(diào)整當(dāng)前窗口的尺寸
b、窗口的內(nèi)部高度和寬度
標(biāo)準(zhǔn)瀏覽器：
window.innerHeight
window.innerWidth
對(duì)于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight 或者 document.body.clientHeight
document.documentElement.clientWidth 或者 document.body.clientWidth
c、屏幕對(duì)象
screen.availWidth：可用的屏幕寬度
screen.availHeight：可用的屏幕高度
d、地址欄對(duì)象
location.hostname：web 主機(jī)的域名
location.pathname：當(dāng)前頁(yè)面的路徑和文件名
location.port：主機(jī)的端口 （80 或 443）
location.protocol：所使用的 web 協(xié)議（http:// 或 https://）
history.back()：與在瀏覽器點(diǎn)擊后退按鈕相同
history.forward()：與在瀏覽器中點(diǎn)擊按鈕向前相同
e、瀏覽器自帶的信息
navigator.appVersion：瀏覽器版本
navigator.platform：瀏覽器平臺(tái)
navigator.userAgent：瀏覽器User-agent header

f、計(jì)時(shí)器相關(guān)的
setInterval()和clearInterval 間隔幾秒循環(huán)執(zhí)行/清除定時(shí)器
setTimeout 和 clearTimeout() 間隔幾秒執(zhí)行（單次）/清除定時(shí)器

標(biāo)簽：JS開發(fā)
來(lái)源：JS DOM（文檔對(duì)象模型）與BOM（瀏覽器對(duì)象模型）