HTML DOM 知識點整理（一）—— Document對象

xiaochao 發布于2019-04-23 13:09 / 3419人閱讀

摘要：提示對象是對象的一部分，可通過屬性對其進行訪問。方法返回布爾值，用于檢測文檔或文檔內的任一元素是否獲取焦點。布爾值，指定事件是否在捕獲或冒泡階段執行。向元素添加事件句柄移除元素的事件句柄方法級元素參數類型描述對象必須。

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

?——? 待續? ——

云服務器 GPU云服務器刪除dom對象 dom對象操作 javascript的dom對象 js操作dom對象

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1490.html

前端面試（知識點）整理（一）

摘要：接受個參數事件類型，是否冒泡，是否阻止瀏覽器的默認行為觸發上綁定的自定義事件觸發元素上綁定事件事件的委托代理的原理以及優缺點。委托代理事件是那些被綁定到父級元素的事件，但是只有當滿足一定匹配條件時才會被挪。一、頁面布局 1.問題：假設高度已知，請寫出三欄布局，其中左欄、右欄寬度各為300px，中間自適應。解決方案一：使用浮動布局` Document ...

zhichangterry 2019-08-22 11:06 評論0 收藏0
前端面試（知識點）整理（一）

摘要：接受個參數事件類型，是否冒泡，是否阻止瀏覽器的默認行為觸發上綁定的自定義事件觸發元素上綁定事件事件的委托代理的原理以及優缺點。委托代理事件是那些被綁定到父級元素的事件，但是只有當滿足一定匹配條件時才會被挪。一、頁面布局 1.問題：假設高度已知，請寫出三欄布局，其中左欄、右欄寬度各為300px，中間自適應。解決方案一：使用浮動布局` Document ...

Songlcy 2019-08-01 17:36 評論0 收藏0
前端面試（知識點）整理（一）

摘要：接受個參數事件類型，是否冒泡，是否阻止瀏覽器的默認行為觸發上綁定的自定義事件觸發元素上綁定事件事件的委托代理的原理以及優缺點。委托代理事件是那些被綁定到父級元素的事件，但是只有當滿足一定匹配條件時才會被挪。一、頁面布局 1.問題：假設高度已知，請寫出三欄布局，其中左欄、右欄寬度各為300px，中間自適應。解決方案一：使用浮動布局` Document ...

ThreeWords 2019-08-29 13:26 評論0 收藏0
整理DOM事件相關知識點

摘要：事件相關內容當用戶與瀏覽器發生的一些交互時如果希望去獲得用戶行為就需要借助事件來完成事件部分內容在中重要性不言而喻羅列需要了解與事件相關的知識如下這也是面試中遇到的問題事件的級別事件模型事件流事件處理程序描述事件捕獲冒泡的具體流程對象常見的 DOM事件相關內容當用戶與瀏覽器發生的一些交互時, 如果希望去獲得用戶行為, 就需要借助事件來完成. 事件部分內容在 JS中重要性不言而喻. ...

shenhualong 2019-08-02 15:26 評論0 收藏0
整理DOM事件相關知識點

摘要：事件相關內容當用戶與瀏覽器發生的一些交互時如果希望去獲得用戶行為就需要借助事件來完成事件部分內容在中重要性不言而喻羅列需要了解與事件相關的知識如下這也是面試中遇到的問題事件的級別事件模型事件流事件處理程序描述事件捕獲冒泡的具體流程對象常見的 DOM事件相關內容當用戶與瀏覽器發生的一些交互時, 如果希望去獲得用戶行為, 就需要借助事件來完成. 事件部分內容在 JS中重要性不言而喻. ...

red_bricks 2019-08-23 18:25 評論0 收藏0