上图来自于《JavaScript权威指南(第六版)》P375

受到上图的启发,写了如下测试代码:

 var head = document.getElementsByTagName("head");
console.log(Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(head[0]))))); // Node对象 console.log(Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(document)))); // Node对象

沿着上图的文档节点层次结构,上面的代码输出都为Node对象。

那么问题来了,上篇博文引自《Professional JavaScript for Web Developers》中的那段话:

In browser, the document object is an instance of HTMLDocument (which inherits from Document) and presents the entire HTML page.

1. The document object presents the entire 要怎么解释呢?(document.getElementById());

2. Document对象和Element对象在DOM中各扮演了什么角色?(新增了哪些自己的(非继承的)属性和方法?)

部分解答这个问题: (《高程》P354)

  • The Document type represents an entire document and is the root node of a hierarchy. In javaScript, the document object allows for querying and retrieval of nodes in a number of different ways.
  • An Element node represents all HTML or XML elements in a document and can be used to manipulate their contents and attributes.

因此我们认为,首先通过Document方法找到某个节点(宏观),然后再通过手术刀式地对元素节点进行内容和属性上的操作(微观)。

Node、Document关系的探究的更多相关文章

  1. Document、HTMLDocument关系的探究

    首先贴上代码: console.log(Object.getPrototypeOf(document)); console.log(Object.getPrototypeOf(Object.getPr ...

  2. 一个关于wait/notify与锁关系的探究

    wait/notify 机制是解决生产者消费者问题的良药.它的核心逻辑是基于条件变量的锁机制处理.所以,它们到底是什么关系?wait()时是否需要持有锁? notify()是否需要持有锁?先说答案:都 ...

  3. window.onload和window.document.readystate的探究

    在编写前端页面的时候,我们时常需要对页面加载的状态进行判断,以便进行相应的操作. 比如在移动端,时常需要在页面完全加载完成之前,先显示一个loading的图标,等待页面完成加载完成后,才显示出真正要展 ...

  4. 《Kubernetes权威指南》笔记-Pod、容器与Node的关系

  5. 节点NODE

    1.整个文档是一个文档节点 * 每个 XML 标签是一个元素节点 * 包含在 XML 元素中的文本是文本节点 * 每一个 XML 属性是一个属性节点 * 注释属于注释节点2. 获取NODE的方式 2. ...

  6. JS对象之间的关系

    JS对象类型 JS中,可以将对象分为"内部对象"."宿主对象"和"自定义对象"三种. 1.本地对象 ECMA-262定义为"独立于 ...

  7. Eloquent JavaScript #11# The Document Object Model

    索引 Notes js与html DOM 在DOM树中移动 在DOM中寻找元素 改变Document 创建节点 html元素属性 布局 style CSS选择器 动画 Exercises Build ...

  8. Document树的解析方法

    一.本次总结用到的xml文本 1.    <?xml version="1.0" encoding="UTF-8" standalone="no ...

  9. javascript高级程序设计---document节点

    document节点是文档的根节点,每张网页都有自己的document节点,window.document就是指向这个节点.只要浏览器开始载入文档,这个节点就开始了 对于HTML文档来说,docume ...

随机推荐

  1. 学习使用C语言实现线性表

    线性表是最常用且最简单的一种数据结构.一个线性表是n个数据元素的有限序列,序列中的每个数据元素,可以是一个数字,可以是一个字符,也可以是复杂的结 构体或对象.例如:1,2,3,4,5是一个线性表,A, ...

  2. 在ASP.NET MVC项目中使用极验验证(geetest)

    时间 2016-03-02 18:22:37 smallerpig 原文  http://www.smallerpig.com/979.html 主题 ASP.NET MVC   geetest开发体 ...

  3. 【C#-文件管理】 判断文件夹或文件是否存在,并创建文件夹或文件

    1.判断文件夹是否存在 Directory.Exists(“文件夹路径”)    返回false表示不存在,true表示存在 2.判断文件是否存在 File.Exists("文件路径&quo ...

  4. fegin熔断autowired失败

    在SpringBootApplication中加入 @EnableFeignClients(basePackages = "com.supplychain")指定熔断的路径就可以了

  5. jquery selected选择器 语法

    jquery selected选择器 语法 作用::selected 选择器选取被选择的 <option> 元素.直线电机生产厂家 语法:$(":selected") ...

  6. JVM(八),垃圾回收标记算法

    八.垃圾回收标记算法 1.对象被判定成垃圾的标准 没有被其他对象引用 2.判断对象是否为垃圾的算法 (1)引用计数法 优点and缺点 (2)可达性分析算法

  7. LibreOffice/Calc:带条件判断的求和

    本文适用于LibreOffice Calc 5.1.6.2 + Ubuntu 16.04,熊猫帮帮主@cnblogs 2018/3/7 以下图为例,假设要根据C列对D列中被选中单元进行求和,即对D列中 ...

  8. Java进阶知识06 Hibernate一对一单向外键关联(Annotation+XML实现)

    1.Annotation 注解版 1.1.创建Husband类和Wife类 package com.shore.model; import javax.persistence.Entity; impo ...

  9. 洛谷p2375 kmp

    题意 给你一个字符串,让你求一个\(num\)数组,\(num[i]\)为长度为\(i\)的前缀的公共前后缀长度不超过\(\lfloor \frac{i}{2}\rfloor\)的个数, 例如&quo ...

  10. 棋盘问题 ( POJ -1321 )(简单DFS)

    转载请注明出处:https://blog.csdn.net/Mercury_Lc/article/details/82684942作者:Mercury_Lc 题目链接 题解:dfs入门,就是每个点都搜 ...