Web前端技術：JavaScript部分2---DOM事件（經常使用的DOM操做，DOM查找），BOM事件（窗口大小，週期性定時器、一次性定時器）

1、什麼是DOM？

 

DOM（document object model）是W3C（萬維網聯盟）的標準，是平臺和語言的接口，它容許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。可對網頁進行增刪改查的操做。

經常使用的DOM操做：

查找節點   讀取節點信息   修改節點信息   建立新節點   刪除節點

 

DOM查找

*1. 按id屬性 精確查找一個元素對象

var elem=document.getElementById("id") 效率很是高！getElementById只能用在document上

 問題：不是全部元素都有id

*2. 按標籤名找

 

var elems=parent.getElementsByTagName("tag"); 查找指定parent節點下的全部標籤爲tag的子代節點

問題：不但找直接，並且找全部子代。

強調：

可用在任意父元素上

不只查直接子節點，並且查全部子代節點

返回一個動態集合即便只找到一個元素，也返回集合必須用[0]，取出惟一元素

*3. 經過name屬性查找

document.getElementsByName(‘name屬性值’)

能夠返回DOM樹中具備指定name屬性值的全部子元素集合

*4. 經過class查找

查找父元素下指定class屬性的元素

var elems=parent.getElemnetsByClassName("class");

有兼容性問題: IE9+

*5. 經過CSS選擇器查找

2、什麼是BOM（Browser Object Model）

專門操做瀏覽器窗口的API （沒有標準, 有兼容性問題）

窗口大小

完整窗口大小：window.outerWidth/outerHeight（顯示屏窗口大小）

文檔顯示區大小：window.innerWidth/innerHeight（獲取當前窗口大小）

 

定時器及其分類

讓程序按指定時間間隔自動執行任務

網頁動態效果、計時功能等

定時器的分類：

1*週期性定時器（讓程序按指定時間間隔反覆自動執行一項任務）

2*一次性定時器（讓程序延遲一段時間執行）