Node、Document关系的探究
上图来自于《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关系的探究的更多相关文章
- Document、HTMLDocument关系的探究
首先贴上代码: console.log(Object.getPrototypeOf(document)); console.log(Object.getPrototypeOf(Object.getPr ...
- 一个关于wait/notify与锁关系的探究
wait/notify 机制是解决生产者消费者问题的良药.它的核心逻辑是基于条件变量的锁机制处理.所以,它们到底是什么关系?wait()时是否需要持有锁? notify()是否需要持有锁?先说答案:都 ...
- window.onload和window.document.readystate的探究
在编写前端页面的时候,我们时常需要对页面加载的状态进行判断,以便进行相应的操作. 比如在移动端,时常需要在页面完全加载完成之前,先显示一个loading的图标,等待页面完成加载完成后,才显示出真正要展 ...
- 《Kubernetes权威指南》笔记-Pod、容器与Node的关系
- 节点NODE
1.整个文档是一个文档节点 * 每个 XML 标签是一个元素节点 * 包含在 XML 元素中的文本是文本节点 * 每一个 XML 属性是一个属性节点 * 注释属于注释节点2. 获取NODE的方式 2. ...
- JS对象之间的关系
JS对象类型 JS中,可以将对象分为"内部对象"."宿主对象"和"自定义对象"三种. 1.本地对象 ECMA-262定义为"独立于 ...
- Eloquent JavaScript #11# The Document Object Model
索引 Notes js与html DOM 在DOM树中移动 在DOM中寻找元素 改变Document 创建节点 html元素属性 布局 style CSS选择器 动画 Exercises Build ...
- Document树的解析方法
一.本次总结用到的xml文本 1. <?xml version="1.0" encoding="UTF-8" standalone="no ...
- javascript高级程序设计---document节点
document节点是文档的根节点,每张网页都有自己的document节点,window.document就是指向这个节点.只要浏览器开始载入文档,这个节点就开始了 对于HTML文档来说,docume ...
随机推荐
- runnerw.exe: CreateProcess failed with error 216 (no message available)
看描述,创建进程失败,应该是main这个入口文件的问题. 检查包名.发现问题,IDE自动将包名导成了当前的目录名(模块) 上图两者不一致导致 解决: 修改包名为main 注:一个model下只能有一个 ...
- [uboot] (番外篇)uboot 驱动模型(转)重要
[uboot] uboot流程系列:[project X] tiny210(s5pv210)上电启动流程(BL0-BL2)[project X] tiny210(s5pv210)从存储设备加载代码到D ...
- 移动端H5不常见兼容收集
1.微信分身input不支持上传,无法监听到上传事件 解决方案:判断在微信浏览器端使用微信JSSDK上传
- Django项目开发,XSS攻击,图片防盗链,图片验证码,kindeditor编辑器
目录 一.Django项目开发 1. 项目开发流程 2. auth模块的补充 (1)django的admin可视化管理页面 (2)将admin可视化管理页面的模型表显示成中文 (3)auth模块的用户 ...
- Acwing-168-生日蛋糕(搜索, 剪枝)
链接: https://www.acwing.com/problem/content/170/ 题意: 7月17日是Mr.W的生日,ACM-THU为此要制作一个体积为Nπ的M层生日蛋糕,每层都是一个圆 ...
- 快速傅立叶变换FFT模板
递归版 UOJ34多项式乘法 //容易暴栈,但是很好理解 #include <cmath> #include <iostream> #include <cstdio> ...
- jsp+上传组件+文件夹+文件
上次遇到这样一个问题,客户上传高清视频(1G以上)的时候上传失败. 一开始以为是session过期或者文件大小受系统限制,导致的错误.查看了系统的配置文件没有看到文件大小限制,web.xml中sees ...
- mysql简单用法
来源:http://hi.baidu.com/demon119/item/e4917f30b6482949023edc33 mysql 用法 #mysql -uroot -proot //可直接登录m ...
- JVM之Java类加载机制
什么是类加载机制 虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这既是虚拟机的类加载机制 类的生命周期 生命周期简述 ...
- Git本地安装
1 Git简介 Git是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理. Git是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码 ...