JS DOM（文檔對象模型）與BOM（瀏覽器對象模型）

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

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

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

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

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

f、計時器相關的
setInterval()和clearInterval 間隔幾秒循環執行/清除定時器
setTimeout 和 clearTimeout() 間隔幾秒執行（單次）/清除定時器

標簽：JS開發
來源：JS DOM（文檔對象模型）與BOM（瀏覽器對象模型）