removeAttributeどうも。
prototypeを利用してパーサーの概念を示した方が意図が分かりやすいかと思っただけだし(何も考えずに書き進められるという個人的事情もあり)、try catchにしても「主に何がしたいのか」というステートメントを、エラー用の条件式を書く前に記述できるから見やすいと思っただけで、それ以上の意味はありません。次のように書き換えられます。
<script type="text/javascript">
function traceNode(node, handler){
if (node === null)
return;
var func = handler[node.nodeName];
if (func !== undefined)
func.call(handler, node);
traceNode(node.firstChild, handler);
traceNode(node.nextSibling, handler);
}
function MyHandler(){
this.resultNode = document.createDocumentFragment();
this["DIV"] = function(node) {
alert("DIV handler called");
node.removeAttribute("id");
node.style.display = "block";
this.resultNode.appendChild(node);
};
this["H1"] = function(node) {
alert("H1 handler called");
node.firstChild.data = "Title";
};
this["P"] = function(node) {
alert("P handler called");
node.firstChild.data = "Paragraph";
};
this["#text"] = function(node) {
alert("#text handler called");
}
}
function add(){
var handler = new MyHandler();
traceNode(document.getElementById("template").cloneNode(true), handler);
document.getElementById("contents").appendChild(handler.resultNode);
}
</script>
<button onclick="add()">add</button>
<div id="template" style="display: none;">
<h1> </h1>
<p> </p>
</div>
<div id="contents">
</div>
私が言いたかったのは、折角テンプレートを用意しているのに、データを埋める際毎度getElementsByTagNameその他諸々のコードを書いてDOM脳を働かせるのはあまり魅力的でないということです。私のも魅力的ではないですが、頑張ってthis["DIV"]
の"DIV"
の部分をロケーションパスパターン(のサブセット)で記述できるように改良したなら、相当に応用が効くしメンテナンスしやすいのではないかと思うのです。説明が面倒ですがそういう意図がありました。誰かやって。