成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

HTML DOM 知識(shí)點(diǎn)整理（一）—— Document對(duì)象

xiaochao / 3420人閱讀

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

一、DOM對(duì)象

DOM對(duì)象整體包括：

  • HTML DOM Document對(duì)象
  • HTML DOM 元素對(duì)象
  • HTML DOM 屬性對(duì)象
  • HTML DOM 事件對(duì)象
  • HTML DOM Console 對(duì)象
  • CSS Style Declaration 對(duì)象

二、?Document對(duì)象詳解

HTML DOM Document對(duì)象

document對(duì)象是HTML文檔的根節(jié)點(diǎn)，可以使我們從腳本中對(duì)HTML頁(yè)面中的所有元素進(jìn)行訪問。

提示：Document 對(duì)象是 Window 對(duì)象的一部分，可通過 window.document 屬性對(duì)其進(jìn)行訪問。

三、Document對(duì)象的屬性和方法：

1.document.activeElement 屬性

var x = document.activeElement.tagName;
console.log(x); 
//BUTTON

提示：?為元素設(shè)置焦點(diǎn)，可以使用?element.focus()?方法。

function getfocus() { 
    document.getElementById("myAnchor").focus();
}

function losefocus() {
    document.getElementById("myAnchor").blur();
}

提示：可以使用?document.hasFocus()?方法來查看當(dāng)前元素是否獲取焦點(diǎn)。hasFocus() 方法返回布爾值，用于檢測(cè)文檔(或文檔內(nèi)的任一元素)是否獲取焦點(diǎn)。

2.document.addEventListener(event,?function,?useCapture) 方法

參數(shù)值：

參數(shù) 描述
event

必需。描述事件名稱的字符串。

注意：不要使用“on”前綴。例如，使用“click”來取代“onclick”。
function 必需。描述了事件觸發(fā)后執(zhí)行的函數(shù)。
useCapture

可選。布爾值，指定事件是否在捕獲或冒泡階段執(zhí)行。

可能值：

  • true - 事件句柄在捕獲階段執(zhí)行
  • false - 默認(rèn)。事件句柄在冒泡階段執(zhí)行

?

document.addEventListener() 方法用于向文檔添加事件句柄，因?yàn)槭?級(jí)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級(jí)DOM元素）

參數(shù)類型描述
node? Node 對(duì)象 必須。另外一個(gè)文檔的節(jié)點(diǎn)，可以是任何節(jié)點(diǎn)類型。

adoptNode() 方法用于從另外一個(gè)文檔中獲取一個(gè)節(jié)點(diǎn)。

節(jié)點(diǎn)可以是任何節(jié)點(diǎn)類型。

var frame = document.getElementsByTagName("IFRAME")[0]
var h = frame.contentWindow.document.getElementsByTagName("H1")[0];
var x = document.adoptNode(h);

注意:?節(jié)點(diǎn)下的所有子節(jié)點(diǎn)都會(huì)獲取到。

注意:?節(jié)點(diǎn)及其子節(jié)點(diǎn)會(huì)再源文檔中刪除。

提示:?使用?document.importNode()?方法來拷貝節(jié)點(diǎn)，但原文檔中的節(jié)點(diǎn)不刪除。.

提示:?使用?element.cloneNode()?方法來拷貝當(dāng)前文檔的節(jié)點(diǎn)，且節(jié)點(diǎn)不會(huì)被刪除。

?——? 待續(xù)? ——

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1490.html

相關(guān)文章

  • 前端面試（知識(shí)點(diǎn)）整理（一）

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

    zhichangterry 評(píng)論0 收藏0

  • 前端面試（知識(shí)點(diǎn)）整理（一）

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

    Songlcy 評(píng)論0 收藏0

  • 前端面試（知識(shí)點(diǎn)）整理（一）

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

    ThreeWords 評(píng)論0 收藏0

  • 整理DOM事件相關(guān)知識(shí)點(diǎn)

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

    shenhualong 評(píng)論0 收藏0

  • 整理DOM事件相關(guān)知識(shí)點(diǎn)

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

    red_bricks 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<