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

参数值:

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

——  待续  ——

HTML DOM 知识点整理(一)—— Document对象的更多相关文章

  1. 报表软件JS开发引用HTML DOM的location和document对象

    上一次提到,在报表软件FineReport的JavaScript开发中,可以访问并处理的HTML DOM对象有windows.location.document三种.这次就继续介绍后两种,locati ...

  2. JS开发引用HTML DOM的location和document对象

    上一次提到,在报表软件FineReport的JavaScript开发中,可以访问并处理的HTML DOM对象有windows.location.document三种.这次就继续介绍后两种,locati ...

  3. JavaScript的DOM操作。Window.document对象

    间隔执行一段代码:window.setlnteval("需要执行的代码",间隔毫秒数) 例 :      window.setlnteval("alert("你 ...

  4. DOM操作(Window.document对象)

    间隔与延迟: 间隔一段代码: window.setInterval("代码",间隔执行秒数) 延迟一段时间后执行一段代码: window.setTimeout("执行代码 ...

  5. Javascript学习8 - 脚本化文档(Document对象)

    原文:Javascript学习8 - 脚本化文档(Document对象) 每个Web浏览器窗口(或帧)显示一个HTML文档,表示这个窗口的Window对象有一个document属性,它引用了一个Doc ...

  6. dom对象详解--document对象(一)

     document对象 Document对象代表整个html文档,可用来访问页面中的所有元素,是最复杂的一个dom对象,可以说是学习好dom编程的关键所在. Document对象是window对象的一 ...

  7. JavaScript -- 时光流逝(十一):DOM -- Document 对象

    JavaScript -- 知识点回顾篇(十一):DOM -- Document 对象 (1) document.activeElement: 返回文档中当前获得焦点的元素. <!doctype ...

  8. HTML DOM Document 对象

    HTML DOM Document 对象 HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点: 文档是一个文档. 所有的HTML ...

  9. 【使用 DOM】使用 Document 对象

    Document 对象时通往DOM功能的入口,它向你提供了当前文档的信息,以及一组可供探索.导航.搜索或操作结构与内容的功能. 我们通过全局变量document访问Document对象,它是浏览器为我 ...

随机推荐

  1. Java - 基础起步

    package basics; //声明该类所在的包为basics,package为包的关键字 import java.util.Date; //导入java.util包中的Date类,用来封装当前的 ...

  2. Python小白学习之路(二十六)—【if __name__ =='__main__':】【用状态标识操作】

    规则一: 一个python文件中,只写一些可以运行的功能测试代码写在这句代码下面 if __name__ =='__main__': 在讲这边的时候,我不是很懂参考了一篇博客,地址如下:http:// ...

  3. 对于opencv全面貌的认识和理解

    1.opencv其实最开始只有源码,也就是sources中的代码,sources中有个modules,进入里面是各个我们平常使用的模块,如下图. 进入任意一个模块,比如calib3d,其中有inclu ...

  4. django操作memcached

    1.首先需要在settings.py中配置好缓存 CACHES = { 'default': { 'BACKEND': 'django.core.cache.backends.memcached.Me ...

  5. 10-04 Java 权限修饰符,类及其组成常见的修饰符

    四种权限修饰符的测试 /* 权限修饰符: 本类 同一个包下(子类和无关类) 不同包下(子类) 不同包下(无关类) private Y 默认 Y Y protected Y Y Y public Y Y ...

  6. docker学习实践之路[第五站]mysql镜像应用

    拉取mysql镜像 docker pull mysql:5.6 #拉取mysql .6版本的镜像 运行mysql镜像 docker run --name some-mysql --restart=al ...

  7. 二分查找的实现(java版本)

    一.二分法查找的定义 依次将所查找数据与中心数据对比,根据大小调整数据边界二.二分查找的条件 数组必须排序三.二分查找的原理 四.二分法查找的代码 /* * 从数组当中找到4所在的索引: * {2,4 ...

  8. Selenium自动化测试Python一:Selenium入门

    Selenium入门 欢迎阅读Selenium入门讲义,本讲义将会重点介绍Selenium的入门知识以及Selenium的前置知识. 自动化测试的基础 在Selenium的课程以前,我们先回顾一下软件 ...

  9. macOS Java安装与配置

    运行环境: macOS Hight Sierra(Version 10.13.6) Terminal(oh my zsh) 下载安装JRE Download URL 下载安装JDK Download ...

  10. linux(centos6.8 64位)下安装mysql5.7(yum方式)

    下载mysql源安装包 # wget http:.noarch.rpm 安装mysql源包 #yum localinstall mysql57.noarch.rpm 检查mysql源是否安装成功 # ...