JavaScript中でのHTML表現にE4Xを提案してみる

JavaScript

E4X使っちゃダメなんかな。XMLそのままなので冗長といえば冗長だが、標準化されていて使いやすいと思う。ただ、使える環境がモダンなブラウザに限定されてしまうので一般的なJavaScriptには使えないかもしれない。
環境が満たされるなら独自フォーマットよりE4Xの方が楽が出来るんじゃないかな。

var html = 
<div id="outer" style="width:100px; height:100px; color: #FFFFFF">
  <a href="http://google.com">google</a>
</div>;

文字列化したいなら

XML.prettyPrinting = false; //おまじない(toString時に綺麗にフォーマットするか否か
var str = html.toString();
// <div id="outer" style="width:100px; height:100px; color: #FFFFFF"><a href="http://google.com">google</a></div>

toStriingよりtoXMLStringを使った方が良いかも。

文字列からXMLにしたいなら

var str = '<div id="outer" style="width:100px; height:100px; color: #FFFFFF"><a href="http://google.com">google</a></div>';
var xml = new XMLList(str);

要素の追加削除

xml.*[0] = <p>before</p> + xml.*[0]; //insertBefore的
// <div id="outer" style="width:100px; height:100px; color: #FFFFFF">
//   <p>before</p>
//   <a href="http://google.com">google</a><
// </div>
xml.*[0] += <p>after</p>; //apendChild的
// <div id="outer" style="width:100px; height:100px; color: #FFFFFF">
//   <p>before</p>
//   <a href="http://google.com">google</a><
//   <p>after</p>
// </div>
delete xml.*[0];
// <div id="outer" style="width:100px; height:100px; color: #FFFFFF">
//   <a href="http://google.com">google</a>
//   <p>after</p>
// </div>

DOMに変換したいなら

innerHTMLが使えない環境だと一個関数を作ってやる必要がある。

function xmlToDom(node, doc) {
  XML.prettyPrinting = false;
  switch(node.nodeKind()) {
    case 'text':
      return doc.createTextNode(node);
    case 'element':
      var ns = doc.documentElement.namespaceURI ?
               doc.documentElement.namespaceURI :
               'http://www.w3.org/1999/xhtml';
      var domnode = doc.createElementNS(ns, node.localName());
      for each(var attr in node.@*)
        domnode.setAttribute(attr.name(), String(attr));
      for each(var child in node.*)
        domnode.appendChild(arguments.callee(child, doc));
      return elm;
  }
}
var elm = xmlToDom(xml, document);

注：この関数はオイラの自作じゃなくて、vimperatorのユーティリティ的な関数群に含まれていたもの。