document与Object的关系

window与Objet

1、 window.__proto__ === Window.prototype

2、 window.__proto__.__proto__ === 窗口属性(WindowProperties)

3、 window.__proto__.__proto__.__proto__ === EventTarget.prototype

4、 EventTarget.prototype.__proto__ === Object.prototype

5、 Event.prototype.__proto__ === Object.prototype

document与Objet

1、 document.__proto__ === HTMLDocument.prototype

2、 HTMLDocument.prototype.__proto__ === Document.prototype

3、 Document.prototype.__proto__ === Node.prototype

4、 Node.prototype.__proto__ === EventTarget.prototype

5、 EventTarget.prototype.__proto__ === Object.prototype

元素节点与Objet

var h = getElementById('id');

1、 h.__proto__ === HTMLDivElement.prototype

2、 HTMLDivElement.prototype.__proto__ === HTMLElement.prototype

3、 HTMLElement.prototype.__proto__ === Element.prototype

4、 Element.prototype.__proto__ === Node.prototype

5、 Node.prototype.__proto__ === EventTarget.prototype

6、 EventTarget.prototype.__proto__ === Object.prototype

属性节点与Objet

var attr = h. attributes[0];

1、 h.attributes.__proto__ === NamedNodeMap.prototype

2、 NamedNodeMap.prototype.__proto__=== Object.prototype

---

1、 h.attributes[0].__proto__ === Attr.prototype

2、 Attr.prototype.__proto__ === Node.prototype

3、 Node.prototype.__proto__ === EventTarget.prototype

4、 EventTarget.prototype.__proto__ === Object.prototype

属性获取与赋值

1、 h.id === h.attributes.id.value === h.attributes[n].value

2、 h.className === h.attributes.class.value === h.attributes[n].value

dom对象api扩展

1、Document

Document.prototype.aa = function(){console.log(1)}
document.aa(); //1
document.getElementById('id').aa(); // Uncaught TypeError: h.aa is not a function

2、Element

Element.prototype.bb = function(){console.log(1)}
document.bb(); // Uncaught TypeError: document.bb is not a function
document.getElementById('id').bb(); // 1

3、Object

Object.prototype.cc = function(){console.log(1)}
document.cc(); //1
document.getElementById('id').cc(); // 1

来源：https://segmentfault.com/a/1190000017547967