HTML DOM 知識點整理（一）—— Document物件

執白發表於2018-11-29
HTML物件

一、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

可選。布林值，指定事件是否在捕獲或冒泡階段執行。

可能值：

  • true – 事件控制程式碼在捕獲階段執行
  • false – 預設。事件控制程式碼在冒泡階段執行

 

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() 方法來拷貝當前文件的節點，且節點不會被刪除。

 ——  待續  ——

相關文章