BOM
(Browser Object Model)瀏覽器對象模型,控制瀏覽器的一些行為
window對象
代表一個HTML文檔
屬性
頁面導航的5個屬性 self, parent, top, opener, frames
方法
彈出對話框 3個: alert, confirm, prompt
頁面定時器. setInterval, clearInterval, setTimeout, clearTimeout
窗口打開關閉 open, close
History
瀏覽器的歷史記錄 前進, 后退.
屬性 length
方法 forward 前進, back 后退, go 前進/后退
Location 瀏覽器地址欄 跳轉,刷新
屬性 href 改變當前頁面位置
方法 reload 刷新
DOM
(Document Object Model) 文檔對象模型 讓JS 和 HTML ,css結合. 可以使用 JS 來控制他們.
原理 將頁面中所有內容, 都封裝成了對象.
Dom中的五類對象
Document 文檔(重點)
Element 元素(重點)
Attribute 屬性
Text 文本
Commons 注釋
以上五類對象抽取了一個父類: Node
自身屬性 nodeType, nodeName, nodeValue
導航屬性
父找兒 firstChild, lastChild, childNodes
兒找父: parentNode (重要)
找兄弟: nextSibling, priviousSibling
獲取Element的方式(重點):
從Document中獲得ELement:
1.getElementById
2.getElementsByTagName
3.getElementsByClassName
4.getElementsByName
從Element中獲得ELement:
1.getElementsByTagName
2.getElementsByClassName
DOM中的事件
給Element對象添加一個Function類型的屬性. 那么這個Function的運行時機與屬性的名稱有關.例如:
屬性名 觸發時機
onClick 單擊 ondblclick 雙擊 onload 當加載完畢 onchange 當內容改變 onblur 當失去焦點 onfocus 當得到焦點
在事件中我們想要獲得事件的詳情, 那么我們需要拿到Event(偵探)對象.
獲得 事件函數是由瀏覽器在對應時機調用的, 瀏覽器在調用的時候, 已經Event傳給我們了.對於我們來講. 接受下就可以了.
屬性
keyCode 按鍵的編碼
button 鼠標按鍵的編碼
clientX/clientX 鼠標所在位置的x, y軸坐標
方法
preventDefault 阻止默認行為. 例如 在點擊submit按鈕時,表單提交就是默認動作.
stopPropergation 停止事件的繼續傳播. 例如 在嵌套的DIV中, 點擊里面的div, 同時也會觸發外層div的onclick事件. 如果不想觸發外層使用該方法.
Dom中常見操作
增
創建元素: document.createElement
添加: element.appendChild ==> 添加到末尾
element.insertBefore ==> 指定添加位置
刪
removeAttribute 刪除屬性
removeChild 刪除子節點
改
replaceChild 改元素
setAttribute 改屬性
查
getAttribute 查屬性值
getElementById
getElementsByTagName
getElementsByClassName
getElementsByName
DHTML技術
由微軟提出, Dynamic HTML 動態網頁技術. 整合了 HTML CSS Javascript DOM 4個技術.
可以理解為對DOM對象的增強: 增加了一些新的屬性和方法.讓我們開發更加便捷.
例如
一個元素的class屬性, 我們想改變, 我們使用setAttribute("class","類名")可以. 但是DHTML提供了更方便的操作,className屬性.