原型链与继承（六）：通过继承来理解DOM
这篇文章来源于最初的一个问题：Javascript中的对象与DOM对象的区别？
首先看看MDN对DOM的定义：
文档对象模型 (DOM) 将 web 页面与到脚本或编程语言连接起来。通常是指 JavaScript，但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。DOM模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点(node)，每个节点都包含着对象(objects)。DOM的方法(methods)让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。
一、DOM中的原型链
有点难理解，还是先看一个HTML基本结构：
<!DOCTYPE html><html lang="en"><head><title>HTML</title></head><body><p></p></body></html>
我们通过一个p元素的__proto__属性来查看他的原型链条，可以看到原型链条最终是查找到Object.prototype上面的。
更加直观一点的解释：结合原型链与继承（五）中的图，可以看到DOM规范中规定的Node构造函数就类似于JS基本语法中的Array、String等构造函数,下面的Element、HTMLElement、HTMLParagraphElement都是通过原型链链接起来的。
再来看看textNode,从console里面可以看到，t的构造器链条是：Text--->CharacterData--->Node.从中可以看出，p(段落节点)和t（文本节点）仅仅是位置上的关系，两者并没有直接的继承关系。
看下document对象。document 对象是 Window 对象的一部分，当浏览器载入 HTML 文档, 它就会成为 document 对象，可通过 window.document 属性对其进行访问。
二、修改DOM中的原型链
Element.prototype.hide = function() {
this.style.display = 'none';
};
修改完之后还是看看上面的例子
p.style.display; // ''
p.hide();//p元素消失了。
p.style.display; // 'none'
但是当你尝试着在对t调用该函数的时候，会出现报错，原因是t继承于Text.prototype,而在Text.prototype上找不到hide()函数。
注意：不要随意修改DOM上面的prototype，具体原因可以参见这里
扩展阅读：DOM