完全に余談だけど、IDL Definitions と ECMAScript Language Binding を見ながら、実際に DOM を JavaScript で実装してみても面白い。
// Node ////////////////////
function Node () {
this.nodeName = arguments[0]; /*String*/
this.nodeValue = arguments[1]; /*String*/
this.nodeType = arguments[2]; /*Number*/
}
Node.ELEMENT_NODE = 1;
Node.ATTRIBUTE_NODE = 2;
Node.TEXT_NODE = 3;
Node.prototype.insertBefore = function (newChild /*Node*/, refChild /*Node*/) {
return newChild;
};
Node.prototype.appendChild = function (newChild /*Node*/) {
return newChild;
};
// Document ////////////////////
function Document (nodeAttrs) {
Node.apply (this, nodeAttrs || [ ]);
this.doctype = arguments[1];
this.documentElement = arguments[2];
this.implementation = arguments[3];
}
Document.prototype = new Node;
Document.prototype.constructor = Document;
Document.prototype.getElementsByTagName = function (tagName /*String*/) {
return new NodeList;
};
Document.prototype.createElement = function (tagName /*String*/) {
return new Element (null, tagName);
};
Document.prototype.createTextNode = function (data /*String*/) {
return new Text (null, data);
};
// HTMLDocument ////////////////////
function HTMLDocument (documentAttrs) {
Document.apply (this, documentAttrs || [ ]);
this.title = arguments[1];
this.body = arguments[2];
this.forms = arguments[3];
this.images = arguments[4];
}
HTMLDocument.prototype = new Document;
HTMLDocument.prototype.constructor = HTMLDocument;
HTMLDocument.prototype.getElementsByName = function (elementName /*String*/) {
return new NodeList;
};
HTMLDocument.prototype.open = function () {
};
HTMLDocument.prototype.write = function (text) {
};
// ////////////////////
window.document = new HTMLDocument (...);
いっそのこと、XML パーサを書いて DOM ツリーを構築してみると良い。そうすればブラウザに依存しない DOM 操作ができる。
http://d.hatena.ne.jp/m-hiyama/20050928/1127872305
http://nanto.asablo.jp/blog/2007/03/23/1339498
