JavaScript可以操作整個瀏覽器，但是這個瀏覽器對象比較大，因此為了操作方便，又分為三個對象。

1.BOM對象

BOM對象主要操作地址欄，瀏覽歷史，窗口高度等。

2.DOM對象

DOM對象主要操作網頁上的元素和相關元素的CSS樣式。

3.Window對象

Window對象是瀏覽器的宿主對象，其提供的方法和屬性和JavaScript沒什麽關系。

上面三個對象，我們主要學習的是DOM對象，通過DOM編程，可以輕易實現我們常見的一些效果。

Window對象

Window對象方法

alert()            顯示帶有一段消息和一個確認按鈕的警告框。
setInterval()      按照指定的周期（以毫秒計）來調用函數或計算表達式。
clearInterval()    取消由 setInterval() 設置的 timeout。
setTimeout()       在指定的毫秒數後調用函數或計算表達式。
clearTimeout()     取消由 setTimeout() 方法設置的 timeout。
scrollTo()         把內容滾動到指定的坐標。

confirm()          顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
prompt()           顯示可提示用戶輸入的對話框。
open()             打開一個新的瀏覽器窗口或查找一個已命名的窗口。
close()            關閉瀏覽器窗口。
 

Window常用屬性

window.location

利用該屬性的location的href屬性可以完成簡單的頁面操作

window.location.href  獲取URL
window.location.href="URL" 重定向
window.location.reload 重新加載

DOM對象

根據 W3C 的 HTML DOM 標準，HTML 文檔中的所有內容都是節點(NODE)：

• 整個文檔是一個文檔節點(document對象)
• 每個 HTML 元素是元素節點(element 對象)
• HTML 元素內的文本是文本節點(text對象)
• 每個 HTML 屬性是屬性節點(attribute對象)
• 註釋是註釋節點(comment對象)

查找標簽

document.getElementById                根據ID獲取一個標簽
document.getElementsByName         根據name屬性獲取標簽集合
document.getElementsByClassName 根據class屬性獲取
document.getElementsByTagName    根據標簽名獲取標簽合集

間接查找

parentNode  父節點
childNodes  所有子節點
firstChild  第一個子節點
lastChild  最後一個子節點
nextSibling 下一個兄弟節點
previousSibling  上一個兄弟節點
parentElement 父節點標簽元素
children  所有子標簽
firstElementChild  第一個子標簽元素
lastElementChild  最後一個子標簽元素
nextElementSibling  下一個兄弟標簽元素
previousElementSibling  上一個兄弟標簽元素
 

操作內容

innerText  文本
innerHTML  HTML內容
value  值

操作屬性

attributes                       獲取所有標簽屬性
setAttribute(key, value)  設置標簽屬性
getAttribute(key)           獲取指定標簽屬性
removeAttribute(key)     刪除屬性

樣式操作

操作class類

className  獲取所有樣式類名
classList.remove(cls)  刪除指定類
classList.add(cls)  添加類

指定CSS操作

obj.style.backgroundColor="red"

JS操作CSS屬性的規律：

1.對於沒有中橫線的CSS屬性一般直接使用style.屬性名即可。如：

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

2.對含有中橫線的CSS屬性，將中橫線後面的第一個字母換成大寫即可。如：

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

事件

HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標簽來定義事件動作。

onclick        當用戶點擊某個對象時調用的事件句柄。
ondblclick     當用戶雙擊某個對象時調用的事件句柄。

onfocus        元素獲得焦點。               //練習：輸入框
onblur         元素失去焦點。               應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange       域的內容被改變。             應用場景：通常用於表單元素,當元素內容被改變時觸發.（三級聯動）

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並松開。
onkeyup        某個鍵盤按鍵被松開。
onload         一張頁面或一幅圖像完成加載。
onmousedown    鼠標按鈕被按下。
onmousemove    鼠標被移動。
onmouseout     鼠標從某元素移開。
onmouseover    鼠標移到某元素之上。
onmouseleave   鼠標從元素離開

onselect      文本被選中。
onsubmit      確認按鈕被點擊。

[ Day51 ]Python之路----JavaScript --DOM操作