document與Object的關係

window與Objet

一、 window.__proto__ === Window.prototype

二、 window.__proto__.__proto__ === 窗口屬性(WindowProperties)

三、 window.__proto__.__proto__.__proto__ === EventTarget.prototype

四、 EventTarget.prototype.__proto__ === Object.prototype

五、 Event.prototype.__proto__ === Object.prototype

document與Objet

一、 document.__proto__ === HTMLDocument.prototype

二、 HTMLDocument.prototype.__proto__ === Document.prototype

三、 Document.prototype.__proto__ === Node.prototype

四、 Node.prototype.__proto__ === EventTarget.prototype

五、 EventTarget.prototype.__proto__ === Object.prototype

元素節點與Objet

var h = getElementById('id');

一、 h.__proto__ === HTMLDivElement.prototype

二、 HTMLDivElement.prototype.__proto__ === HTMLElement.prototype

三、 HTMLElement.prototype.__proto__ === Element.prototype

四、 Element.prototype.__proto__ === Node.prototype

五、 Node.prototype.__proto__ === EventTarget.prototype

六、 EventTarget.prototype.__proto__ === Object.prototype

屬性節點與Objet

var attr = h. attributes[0];

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

二、 NamedNodeMap.prototype.__proto__=== Object.prototype

---

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

二、 Attr.prototype.__proto__ === Node.prototype

三、 Node.prototype.__proto__ === EventTarget.prototype

四、 EventTarget.prototype.__proto__ === Object.prototype

屬性獲取與賦值

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

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

dom對象api擴展

一、Document

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

二、Element

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

三、Object

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