Document、HTMLDocument关系的探究
首先贴上代码:
console.log(Object.getPrototypeOf(document));
console.log(Object.getPrototypeOf(Object.getPrototypeOf(document)));
在FF上的运行结果如下所示:
第一行代码返回的是一个HTMLDocument对象,第二行代码返回的是一个Document对象。
通过分析我们可以得出document对象的prototype为HTMLDocument对象,HTMLDocument对象的prototype为Document对象。
注意这里的document对象就是我们经常使用的document.getElementById()函数中的document,这个document对象让我想到了JavaScript中的Object。
《Professional JavaScript for Web Developers》中描述如下:
JavaScript represents document nodes via the Document type. In browsers, the document object is an instance of HTMLDocument (which inherits from Document) and represents the entire HTML page. The document object is a property of window and so is accessible globally.
写这段代码时犯了一些错误:
1. 在全局中声明了一个变量document
var document = new Document();
console.log(document.constructor); // HTMLDocument对象
代码分析:
console.log(Object.getOwnPropertyDescriptor(window, "document"));
configurable属性值为false, set函数没有定义,所以我们根本就不可能改变window.document.
上面的代码声明的全局变量document和window.document冲突了,但document的赋值是不会改变window.document的。
这里还有一个误区,其实document对象是HTMLDocument()构造函数的一个实例(上面的高程中也有提到),千万不要误以为document对象是Document()构造函数的实例。
2. 实例对象是不能直接通过prototype属性来访问其prototype对象的。
console.log(document.prototype); // undefined
同样,下面这段代码也是错误的:
console.log(Object.getPrototypeOf(document).prototype);
我们应该明白prototype chain是通过instance来实现的。因此Object.getPrototypeOf(document)返回的是一个Document()构造函数的instance. instance只有[[Prototype]],这个属性是不能外部使用的。
从这个例子中,我们也可以看出JavaScript(Object),DOM,BOM的联系是多么的紧密~
DOM和BOM的关系可以参考我转的一篇博文[http://www.cnblogs.com/linxd/p/4481052.html]
Document、HTMLDocument关系的探究的更多相关文章
- Node、Document关系的探究
上图来自于<JavaScript权威指南(第六版)>P375 受到上图的启发,写了如下测试代码: var head = document.getElementsByTagName(&quo ...
- 一个关于wait/notify与锁关系的探究
wait/notify 机制是解决生产者消费者问题的良药.它的核心逻辑是基于条件变量的锁机制处理.所以,它们到底是什么关系?wait()时是否需要持有锁? notify()是否需要持有锁?先说答案:都 ...
- 深入理解DOM节点关系
× 目录 [1]父级属性 [2]子级属性 [3]同级属性[4]包含方法[5]关系方法 前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点分为12种不同类型,每种类型分别表示文档中不 ...
- Lucene系列五:Lucene索引详解(IndexWriter详解、Document详解、索引更新)
一.IndexWriter详解 问题1:索引创建过程完成什么事? 分词.存储到反向索引中 1. 回顾Lucene架构图: 介绍我们编写的应用程序要完成数据的收集,再将数据以document的形式用lu ...
- 【读书笔记】读《JavaScript高级程序设计-第2版》 - 非函数部分
章节列表: 第08章:BOM 第09章:客户端检测 第10章:DOM 第11章:DOM2和DOM3 第12章:事件 第13章:表单脚本 第14章:错误处理与调试 第17章:Ajax和JSON第20章: ...
- [js]js原型链继承小结
这是之前总结的, 发现有很多的毛病,就是重点不突出,重新翻看的时候还是得耗费很长时间去理解这玩意. js中的继承 js中什么是类 1,类是函数数据类型 2.每个类有一个自带prototype属性 pr ...
- javascript变量的引用类型值
JavaScript变量可以用来保存俩种类型的值:基本类型和引用类型值 前言 JS变量可以用来保存两种类型的值:基本类型值和引用类型值.基本类型的值源自一下5种基本数据类型:Underfined.Nu ...
- JavaScript学习记录
js整理笔记 1.数据类型 2.基本语法 3.js运算符 4.条件语句 5.类型转换 6.函数 7.预编译 8.作用域 9.闭包 10.对象创建方法 11.this 12.dom操作 13.事件 14 ...
- poi读写doc和docx
https://www.cnblogs.com/always-online/p/4800131.html POI是 Apache 旗下一款读写计算机中的 word 以及 excel 文件的工具. po ...
随机推荐
- python操作mysql代码讲解(及其实用,未来测试工作主要操作数据库的方法)
pymsql pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同. 下载安装 1 pip3 install pymysql 使用操作 1.执行SQL 1 2 3 4 ...
- UVa10474 Where is the Marble?(排序sort)
今天开始学STL,这是书上的一道例题,主要是用了sort函数和lower_bound函数,挺容易理解的. lower_bound的作用是查找“大于或等于x的第一个位置”. 需要注意的是,不要忘记alg ...
- IDEA导入maven中导入net.sf.json报错的解决方法
使用IDEA搭建Maven项目导入架包时, 添加net.sf.json的jar包的时候,代码如下: 在pom.xml文件时: <dependency> <groupId>net ...
- layui分页的使用心得
// 执行页面加载的函数 loadData(1) // 每页条数 var limit = 5; // 渲染页面 function loadData(curr){ $.ajax({ type:" ...
- Spring的BeanPostProcessor和BeanFactoryPostProcessor区别
Spring提供了两种后处理bean的扩展接口,分别为BeanPostProcessor和BeanFactoryPostProcessor,这两者在使用上是有所区别的. BeanPostProcess ...
- Ubuntu系统没声音
问题: http://www.linuxdiyf.com/linux/22936.html $aplay -l 得到下面的信息ubuntu aplay: device_list:268: no so ...
- ARDUINO UNO烧录BOOTLOADER
批量烧录为了速度加快,使用USBASP工具,配合PROGISP软件进行烧录. 因为脱离了ARDUINO IDE,所以需要研究AVR单片机的熔丝位设置问题. 刷ATMEGA32U4芯片,需要这样设置: ...
- Java-ZipUtil工具类
import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.BufferedRead ...
- HDU-4300-Clairewd's message(扩展KMP)
链接: https://vjudge.net/problem/HDU-4300 题意: Clairewd is a member of FBI. After several years conceal ...
- vue css采用别名引入背景图
在vue css中采用别名引入 背景图片,可以在前面加一个波浪号 css 属性中: background: url("~@/assets/xxx.jpg") Webpack 会将以 ...