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) 方法
参数值:
参数 | 描述 |
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() 方法来拷贝当前文档的节点,且节点不会被删除。
—— 待续 ——