HTML DOM 知识点整理（一）—— Document对象

一、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) 方法

参数值：

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元素）

adoptNode() 方法用于从另外一个文档中获取一个节点。

节点可以是任何节点类型。

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

注意: 节点下的所有子节点都会获取到。

注意: 节点及其子节点会再源文档中删除。

提示: 使用 document.importNode() 方法来拷贝节点，但原文档中的节点不删除。.

提示: 使用 element.cloneNode() 方法来拷贝当前文档的节点，且节点不会被删除。

 ——  待续  ——

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有