enchant.jsはDOM要素をうまく隠蔽してくれているので、どんな要素を使っているのかを開発者が気にする必要はありません。しかし見た目にこだわるゲームを作るときなどは、DOM要素を意識することで可能性が広がるのも事実です。今回はenchant.jsとDOM操作（idやclassなどの属性の変更）を連携させる方法について簡単にまとめておきます。
Entityクラスについて
enchant.jsを使うには、クラスの継承関係を意識することが近道です。今回鍵となるクラス、Entityクラスの継承関係を見てみましょう。
http://enchant.heroku.com/10
- enchant.Event
- enchant.EventTarget
- enchant.Game
- enchant.Node
- enchant.Entity
- enchant.Sprite
- enchant.Label
- enchant.Map
- enchant.Group
- enchant.Scene
- enchant.Surface
- enchant.Class
EntityクラスはDOM要素（div）としての実体を持つという特徴を持っています。試しにLabelを画面に貼り付けてから、開発者ツールで調べてみてください。div要素が見つかるはずです。
またEntityクラスのサブクラスとしてSpriteとLabel、Mapが用意されています。開発者がEntityクラスを直接使うことはまず無いので、実際には「これらのサブクラス＝DOM要素」と考えて良いでしょう。
Entityクラスの見た目を変更する
Entityクラスには背景色や透明度、大きさを変更するメソッドが用意されていますが、Webアプリ開発者としては見た目はCSSで指定したいものです。最新のenchant.jsではこの方法も用意されています。
まずオブジェクトのidプロパティに対して文字列を代入することで、DOM要素のIDを変えることができます。
var label = new Label('Enchant Quest'); label.id = 'title';
次にオブジェクトのclassNameプロパティに対して代入を行うだけで、DOM要素のclassを変えることができます。追記ではなく上書きを行うので、従来設定されていたclassを消してしまう点に注意が必要です。
var label = new Label('HP: 20/35'); label.className = 'swordman hp';
idやclassの設定は、CSSだけでなくjQueryなどの外部ライブラリと連携するためにも使えるでしょう。もちろんdocument.getElementByIdでDOM要素を直接触ることも可能です。
enchant.js自身がstyle属性を動的に書き換えることがある、という点に注意*1しつつ利用してみてください。
