一、DOM對象 DOM對象整體包括： HTML DOM Document對象 HTML DOM 元素對象 HTML DOM 屬性對象 HTML DOM 事件對象 HTML DOM Console 對象 CSS Style Declaration 對象 二、 Document對象詳解 HTML DOM ...
一、DOM對象
DOM對象整體包括：
- HTML DOM Document對象
- HTML DOM 元素對象
- HTML DOM 屬性對象
- HTML DOM 事件對象
- HTML DOM Console 對象
- CSS Style Declaration 對象
二、 Document對象詳解
HTML DOM Document對象
document對象是HTML文檔的根節點，可以使我們從腳本中對HTML頁面中的所有元素進行訪問。
提示：Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行訪問。
三、Document對象的屬性和方法：
1.document.activeElement 屬性
var x = document.activeElement.tagName;
console.log(x);
//BUTTON
提示： 為元素設置焦點，可以使用 element.focus() 方法。
function getfocus() {
document.getElementById("myAnchor").focus();
}
function losefocus() {
document.getElementById("myAnchor").blur();
}
提示：可以使用 document.hasFocus() 方法來查看當前元素是否獲取焦點。hasFocus() 方法返回布爾值，用於檢測文檔(或文檔內的任一元素)是否獲取焦點。
2.document.addEventListener(event, function, useCapture) 方法
參數值：
| 參數 | 描述 |
| event |
必需。描述事件名稱的字元串。 註意：不要使用“on”首碼。例如，使用“click”來取代“onclick”。 |
| function | 必需。描述了事件觸發後執行的函數。 |
| useCapture |
可選。布爾值，指定事件是否在捕獲或冒泡階段執行。 可能值：
|
document.addEventListener() 方法用於向文檔添加事件句柄，因為是2級DOM，因此可以多次添加。
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);
跨瀏覽器解決辦法：
如果瀏覽器不支持 addEventListener() 方法, 你可以使用 attachEvent() 方法替代。
if (document.addEventListener) { //所有主流瀏覽器，除了 IE 8 及更早 IE版本
document.addEventListener("click", myFunction);
} else if (document.attachEvent) { // IE 8 及更早 IE 版本
document.attachEvent("onclick", myFunction);
}
提示： 可以使用 document.removeEventListener() 方法來移除 addEventListener() 方法添加的事件句柄。
提示：使用 element.addEventListener() 方法為指定元素添加事件句柄。
// 向 <div> 元素添加事件句柄 document.getElementById("myDIV").addEventListener("mousemove", myFunction); // 移除 <div> 元素的事件句柄 document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
3.document.adoptNode(node) 方法 （3級DOM元素）
| 參數 | 類型 | 描述 |
|---|---|---|
| node | Node 對象 | 必須。另外一個文檔的節點，可以是任何節點類型。 |
adoptNode() 方法用於從另外一個文檔中獲取一個節點。
節點可以是任何節點類型。
var frame = document.getElementsByTagName("IFRAME")[0]
var h = frame.contentWindow.document.getElementsByTagName("H1")[0];
var x = document.adoptNode(h);
註意: 節點下的所有子節點都會獲取到。
註意: 節點及其子節點會再源文檔中刪除。
提示: 使用 document.importNode() 方法來拷貝節點，但原文檔中的節點不刪除。.
提示: 使用 element.cloneNode() 方法來拷貝當前文檔的節點，且節點不會被刪除。
—— 待續 ——
