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

xiaochao 发布于2019-04-23 13:09 / 3424人阅读

摘要：提示对象是对象的一部分，可通过属性对其进行访问。方法返回布尔值，用于检测文档或文档内的任一元素是否获取焦点。布尔值，指定事件是否在捕获或冒泡阶段执行。向元素添加事件句柄移除元素的事件句柄方法级元素参数类型描述对象必须。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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