7.19 BOM DOM

1. BOM(管理窗口與窗口之間的通信)

窗體控制

• moveBy(x,y)——從當前位置水平移動窗體x個像素，垂直移動窗體y個像素，x爲負數，將向左移動窗體，y爲負數，將向上移動窗體
• moveTo(x,y)——移動窗體左上角到相對於屏幕左上角的(x,y)點，當使用負數作爲參數時會吧窗體移出屏幕的可視區域
• resizeBy(w,h)——相對窗體當前的大小，寬度調整w個像素，高度調整h個像素。若是參數爲負值，將縮小窗體，反之擴大窗體
• resizeTo(w,h)——把窗體寬度調整爲w個像素，高度調整爲h個像素

窗體滾動軸控制

• scrollTo(x,y)——在窗體中若是有滾動條，將橫向滾動條移動到相對於窗體寬度爲x個像素的位置，將縱向滾動條移動到相對於窗體高度爲y個像素的位置
• scrollBy(x,y)—— 若是有滾動條，將橫向滾動條移動到相對於當前橫向滾動條的x個像素的位置(就是向左移動x像素)，將縱向滾動條移動到相對於當前縱向滾動條高度爲y個像素的位置(就是向下移動y像素)

窗體焦點控制

• focus()—— 使窗體或控件獲取焦點
• blur()——與focus函數相反，使窗體或控件失去焦點

新建窗體

• open()——打開(彈出)一個新的窗體
• close()——關閉窗體
• opener屬性——新建窗體中對父窗體的引用，中文"開啓者"的意思

2. DOM（HTML和XML文檔的編程接口）

對話框

alert(str)
複製代碼

確認框 點擊按鈕後有返回值 true、false

confirm(str)
    var tag = confirm('確認關閉嗎？');
複製代碼

3. 獲取元素

• getElementById一個dom對象
• getElementsByTagName類數組
• getElementsByName類數組
• getElementsByClassName類數組

4. 事件

1. 事件

事件	解說
event.preventDefault	阻止默認事件（return false）
e.target	事件源 觸發當前事件的源頭（與this不必定相等 事件冒泡）
event.onclick	鼠標點擊時觸發此事件
event.ondblclick	鼠標雙擊時觸發此事件
onmousedown	按下鼠標時觸發此事件
onmouseup	鼠標按下後鬆開鼠標時觸發此事件
onmouseover	當鼠標移動到某對象範圍的上方時觸發此事件
onmousemove	鼠標移動時觸發此事件
onmouseout	當鼠標離開某對象範圍時觸發此事件
onkeypress	當鍵盤上的某個鍵被按下而且釋放時觸發此事件.
onkeydown	當鍵盤上某個按鍵被按下時觸發此事件
onkeyup	當鍵盤上某個按鍵被按放開時觸發此事件
addEventListener('事件',function(){},false)	監聽事件 能夠給元素綁定多個相同事件 (false事件冒泡,true事件捕獲)

2. 綁定事件

oDiv.onclick = function(){}
複製代碼

• 監聽事件 能夠給元素綁定多個相同事件 (false事件冒泡,true事件捕獲)

addEventListener('click',function(){},false) 
複製代碼

5. 事件對象屬性（鼠標）

屬性名	值類型	讀/寫	描述
clientX	Integer	R	事件發生時，鼠標在客戶端區域的X座標，客戶端區域是指頁面可視區域
clientY	Integer	R	事件發生時，鼠標在客戶端區域的Y座標
screenX	Integer	R(IE) R/W(W3C)	相對於屏幕的鼠標X座標
screenY	Integer	R(IE) R/W(W3C)	相對於屏幕的鼠標Y座標

6. offeset屬性

offsetTop最近的已定位的祖先元素頂部距離 最後body

offesetLeft最近的已定位的祖先元素左側距離 最後body

7. 節點

名稱	節點類型
Node.ELEMENT_NODE（1）	元素節點
Node.ATTRIBUTE_NODE(2)	屬性節點
Node.TEXT_NODE(3)	文本節點
Node.COMMENT_NODE(8)	註釋節點
方 法	描 述
nodeValue	節點的值 元素節點此屬性爲空，文本節點些屬性即爲節點中的字符串，屬性節點返回屬性值
nodeType	節點類型 1 2 3 8
firstChild	指向在childNodes列表中的第一個節點
nextSibling	指向後一個兄弟節點；若是這個節點就是最後一個兄弟節點，那麼該值爲null （標準瀏覽器包括換行空格 IE瀏覽器找到元素節點）
nextElementSibling	下一個元素節點 IE不支持
previousSibling	指向前一個兄弟節點；若是這個節點就是第一個兄弟節點，那麼該值爲null
previousElementSibling	前一個元素節點 IE不支持
children	查找全部子節點 返回類數組
appendChild(node)	將node添加到childNodes的末尾
innerHTML	設置或返回表格行的開始和結束標籤之間的 HTML
removeChild(node)	從childNodes中刪除node
eplaceChild (newnode,oldnode)	將childNodes中的oldnode替換成newnode
insertBefore (newnode,refnode)	在childNodes中的refnode以前插入newnode
createElement (tagname)	建立標籤名爲tagname的元素
createTextNode(text)	建立包含文本text的文本節點
getAttribute(name)	拿到屬性
setAttribute(name, newValue)	建立屬性 html元素可見 p.屬性 不可見
removeAttribute(name)	刪除屬性

8. this

1. 函數中 this是 window
2. 定時器 this是 window
3. 對象 this是當前對象
4. 構造函數 this 是實例化對象
5. 事件綁定 this 綁定事件的那個dom對象
6. 改變this

   • call( ) 方法 改變指針 第一個參數是一個要改變指針的對象，後面的參數是方法須要的參數

   • apply( ) 方法 改變指針 第一個參數是一個要改變指針的對象第二個參數時一個數組，數組裏是方法的參數

   • bind( ) 方法 改變指針 第一個參數是一個要改變指針的對象，後面的參數是方法須要的參數

   • call 和 apply 會自動調用方法 bind須要手動調用方法

f1.call(oDiv,22,33);
    f1.apply(obj,[1,2]);
    f1.bind(oDiv,22,33)();
複製代碼

9. dom屬性設置與獲取

1. 給一個dom元素設置自定義屬性的方法

oDiv.key = value

oDiv.setAttribute(key, value)

oDiv.dataset.key = value

<div data-key=value > </div>

2. 獲取dom元素自定義屬性方法

`oDiv.getAttribute(key)`

`oDiv.key`

`oDiv.dateset.key` key須要用駝峯寫法
複製代碼

3. 區別

setAttribute/dataset 能夠在html中看到

oDiv.key 在html中看不到