2007/06/26
Javascripterへ捧げるPHPのDOM
HTMLテンプレートの話題を書こうと思ったけど、その話題に入る前にPHPのDOMについて書きます。
PHPのDOM(DOM関数)はいわゆるDOM APIを操作することのできるモジュールです。
このDOMのインタフェースはDOM Level3をサポートしているので、javascriptでDOM操作をやったことのある人なら日常何度も目にすることがあるメソッドだらけです。
(中略)
以下に簡単なHTMLを用意し、同様の操作をPHPとjsの2つで表現します。
やっている内容はid属性のNodeについて、文字列の置き換えやノードの追加/置換などです。
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ほげったらほげ</title>
</head>
<body>
<div id="head">headだよーん</div>
<div id="contents">
<input type="button" id="btn" value="buttonだよーん" />
</div>
<div id="foot">
<p id="footMessage">footだよーん</p>
</div>
</body>
</html>
まずはJavascript
var head = document.getElementById('head'); alert(head.nodeName); // div alert(head.tagName); // div alert(head.nodeType); // 1 head.textContent = 'headだったの'; var contents = document.getElementById('contents'); var textarea = document.createElement('textarea'); textarea.setAttribute('col', 20); textarea.setAttribute('row', 30); textarea.setAttribute('id', 'textId'); contents.appendChild(textarea); var input = document.getElementById('btn'); input.setAttribute('value', 'hello world'); input.setAttribute('onclock', 'hoge(this)'); var foot = document.getElementById('foot'); var p = document.createElement('p'); p.textContent = 'My Message'; foot.replaceChild(p, document.getElementById('footMessage')); var textareas = document.getElementsByTagName('textarea'); for(var i = 0; i < textareas.length; i++){ var textarea = textareas.item(i); textarea.value = 'qwerty'; alert(textarea.getAttribute('id')); } alert(document.body.innerHTML);
なんてことはない、ただのDOM操作です。
textContentとかは動かないのがあるかもわからない。
次にPHP
$document = new DOMDocument('1.0', 'UTF-8'); $document->load(dirname(__FILE__) . '/index.html'); if(!$document->validate()){ throw new Exception('invalid file'); } $head = $document->getElementById('head'); echo $head->nodeName, PHP_EOL; // div echo $head->tagName, PHP_EOL; // div echo $head->nodeType, PHP_EOL; // 1 $head->nodeValue = 'headだったの'; $contents = $document->getElementById('contents'); $textarea = $document->createElement('textarea'); $textarea->setAttribute('col', 20); $textarea->setAttribute('row', 30); $textarea->setAttribute('id', 'textId'); $contents->appendChild($textarea); $input = $document->getElementById('btn'); $input->setAttribute('value', 'hello world'); $input->setAttribute('onclock', 'hoge(this)'); $foot = $document->getElementById('foot'); $p = $document->createElement('p'); $p->nodeValue = 'My Message'; $foot->replaceChild($p, $document->getElementById('footMessage')); $textareas = $document->getElementsByTagName('textarea'); //foreach($textareas as $textarea){ for($i = 0; $i < $textareas->length; $i++){ $textarea = $textareas->item($i); $textarea->nodeValue = 'qwerty'; echo $textarea->getAttribute('id'), PHP_EOL; } var_dump($document->saveXML());
javascriptで操作したときと同じですよね（たぶん)
出力結果
この2つの出力結果はどちらも同じで、次のようにでます。
div
div
1
textId
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ほげったらほげ</title>
</head>
<body>
<div id="head">headだったの</div>
<div id="contents">
<input type="button" id="btn" value="hello world" onclock="hoge(this)" />
<textarea col="20" row="30" id="textId">qwerty</textarea></div>
<div id="foot">
<p>My Message</p>
</div>
</body>
</html>
PHPでもjsでも似たコードでDOMを扱えるってのは、便利です。（それだけ)
(後略)
HTMLテンプレートを作るならDOMモジュールが一番便利で、とっつきやすいです。
また、デザイナーさんとかが作った綺麗なXHTMLをSmartyとかでぶっ壊すこと無くDOM操作できるのは非常に良い点であるといえます。
できるだけカスタマイズ性を残しつつ、フレームワーク的な要素を採り入れると強力なテンプレートエンジンができるんじゃないかなーと思いつつ色々触っている今日このごろ。
Trackback
No Trackbacks
Track from Your Website
http://blog.xole.net/trackback/tb.php?id=577
Comment
No Comments