Javascripterへ捧げるPHPのDOM

2007-06-26T02:21:37+09:00

HTMLテンプレートの話題を書こうと思ったけど、その話題に入る前にPHPのDOMについて書きます。

PHPのDOM(DOM関数)はいわゆるDOM APIを操作することのできるモジュールです。
このDOMのインタフェースはDOM Level3をサポートしているので、javascriptでDOM操作をやったことのある人なら日常何度も目にすることがあるメソッドだらけです。

(中略)

以下に簡単なHTMLを用意し、同様の操作をPHPとjsの2つで表現します。
やっている内容はid属性のNodeについて、文字列の置き換えやノードの追加/置換などです。

まずは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



    
        
        ほげったらほげ
    
    
        headだったの
        
            
        qwerty
        
            My Message

PHPでもjsでも似たコードでDOMを扱えるってのは、便利です。（それだけ)

(後略)

HTMLテンプレートを作るならDOMモジュールが一番便利で、とっつきやすいです。
また、デザイナーさんとかが作った綺麗なXHTMLをSmartyとかでぶっ壊すこと無くDOM操作できるのは非常に良い点であるといえます。
できるだけカスタマイズ性を残しつつ、フレームワーク的な要素を採り入れると強力なテンプレートエンジンができるんじゃないかなーと思いつつ色々触っている今日このごろ。

ハタさんのブログ(復刻版)

Javascripterへ捧げるPHPのDOM

まずはJavascript

次にPHP

出力結果

(後略)