点击	回复
1592	19

【方案】用PHP自帶的DOM類將HTML與PHP標籤分離

巨大八爪鱼

一派掌门二十级

1楼发表于：2016-1-15 12:17

【最終HTML輸出】
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>My PHP Template Example</title><style>
body {
    font-family: Arial;
    font-size: 12px;
}
mark {
    background-color: #F9F9F9;
    border: 1px solid #DDDDDD;
    border-radius: 2px;
    font-family: monospace, Courier;
    padding: 1px 4px;
}
p {
    line-height: 1.5em;
    margin: 3px 0px;
}

footer {
    background-color: #EEEEEE;
    font-size: 13px;
    margin-top: 20px;
    padding: 10px 0px;
    text-align: center;
}
footer span {
    color: red;
}

ul {
    margin: 2px 0px;
    padding-left: 16px;
}

ul.Navigator {
    background-color: #5F5F5F;
    font-family: "Segoe UI", Arial, sans-serif;
    letter-spacing: 1px;
    list-style: none;
    padding-left: 0px;
    overflow: hidden;
}

ul.Navigator li {
    float: left;
}

ul.Navigator a {
    color: white;
    display: inline-block;
    font-size: 17px;
    padding: 10px 15px 9px;
    text-decoration: none;
}
ul.Navigator a:hover {
    background-color: black;
}
ul.Navigator a.active {
    background-color: #73AF21;
}
</style></head><body>
<nav><ul class="Navigator"><li><a href="?language=HTML">HTML</a></li>
    <li><a href="?language=CSS" class="active">CSS</a></li>
    <li><a href="?language=JavaScript">JAVASCRIPT</a></li>
</ul></nav><article><h1>microtime</h1>
<p>microtime() returns <mark>the current Unix timestamp with microseconds</mark>. This function is only available on operating systems that support the gettimeofday() system call.</p>
<ul><li><a href="http://www.php.net/">www.php.net</a></li><li><a href="http://www.youtube.com/">www.youtube.com</a></li>
</ul></article><article><h1>Displaying the widget</h1>
<p>This page explains how to display and customize the reCAPTCHA widget on your webpage.</p>
<ul><li><a href="http://www.google.com/">www.google.com</a></li><li><a href="http://www.facebook.com/">www.facebook.com</a></li><li><a href="http://en.wikipedia.org/">en.wikipedia.org</a></li>
</ul></article><footer>Time Elapsed: <span>0.000s</span></footer></body></html>

【最終頁面效果】

巨大八爪鱼

一派掌门二十级

2楼发表于：2016-1-15 12:18

【HTML模板文件：template_example.html，該模板文件不含任何PHP代碼塊】
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
    font-family: Arial;
    font-size: 12px;
}
mark {
    background-color: #F9F9F9;
    border: 1px solid #DDDDDD;
    border-radius: 2px;
    font-family: monospace, Courier;
    padding: 1px 4px;
}
p {
    line-height: 1.5em;
    margin: 3px 0px;
}

footer {
    background-color: #EEEEEE;
    font-size: 13px;
    margin-top: 20px;
    padding: 10px 0px;
    text-align: center;
}
footer span {
    color: red;
}

ul {
    margin: 2px 0px;
    padding-left: 16px;
}

ul.Navigator {
    background-color: #5F5F5F;
    font-family: "Segoe UI", Arial, sans-serif;
    letter-spacing: 1px;
    list-style: none;
    padding-left: 0px;
    overflow: hidden;
}

ul.Navigator li {
    float: left;
}

ul.Navigator a {
    color: white;
    display: inline-block;
    font-size: 17px;
    padding: 10px 15px 9px;
    text-decoration: none;
}
ul.Navigator a:hover {
    background-color: black;
}
ul.Navigator a.active {
    background-color: #73AF21;
}
</style>
</head>

<body>
<nav>
<ul class="Navigator">
    <li><a class="active" href="?language=HTML">HTML</a></li>
    <li><a href="?language=CSS">CSS</a></li>
    <li><a href="?language=JavaScript">JAVASCRIPT</a></li>
</ul>
</nav>
<article>
<h1>Article Example</h1>
<p>This HTML tutorial contains hundreds of HTML examples.<br>
With our online <mark>HTML editor</mark>, you can edit the HTML, and click on a button to view the result.</p>
<ul>
    <li><a href="example">Link Example</a></li>
</ul>
</article>
<footer>Time Elapsed: <span></span></footer>
</body>
</html>

巨大八爪鱼

一派掌门二十级

3楼发表于：2016-1-15 12:18

【index.php】
<?php
$start = microtime(); # 獲取腳本開始執行的時間
libxml_use_internal_errors(true); # 忽略不合法標籤的提示
$doc = new DOMDocument();
$doc->loadHTMLFile('template_example.html'); # 加載模板文件

$languages = array('HTML', 'CSS', 'JavaScript');
$language = filter_input(INPUT_GET, 'language', FILTER_SANITIZE_STRING); # 獲取URL變量：?language
$id = array_search($language, $languages); # 確定當前選中的選項卡的編號
if ($id === false) {
    $id = 0; # 默認選中第一個選項卡
}

$path = new DOMXPath($doc);
$nodes = $path->query('/html/body/nav/ul/li/a');
if ($id != 0) {
    $nodes->item(0)->removeAttribute('class'); # 去除第一個選項卡默認的選中狀態
    $nodes->item($id)->setAttribute('class', 'active'); # 選中新的選項卡
}

$nodes = $path->query('/html/head/title');
$nodes->item(0)->nodeValue = 'My PHP Template Example'; # 設置網頁標題

/* 定義兩篇文章數組，這兩篇文章可以從資料庫中獲取 */
class Article {
    public $title;
    public $content;
    public $links;
}
$arr = array();
$arr[0] = new Article();
$arr[0]->title = 'microtime';
$arr[0]->content = 'microtime() returns <mark>the current Unix timestamp with microseconds</mark>. This function is only available on operating systems that support the gettimeofday() system call. ';
$arr[0]->links = array('www.php.net', 'www.youtube.com');
$arr[1] = new Article();
$arr[1]->title = 'Displaying the widget';
$arr[1]->content = 'This page explains how to display and customize the reCAPTCHA widget on your webpage.';
$arr[1]->links = array('www.google.com', 'www.facebook.com', 'en.wikipedia.org');

function removeChildren($node) {
    while ($node->childNodes->length > 0) {
        $node->removeChild($node->firstChild);
    }
}

function setInnerHTML($node, $newValue) {
    removeChildren($node);
    $doc = $node->ownerDocument;
    $fragment = $doc->createDocumentFragment();
    $fragment->preserveWhiteSpace = false;
    if (!empty($newValue)) {
        $fragment->appendXML(trim($newValue));
        $importedNode = $doc->importNode($fragment, true);
        $node->appendChild($importedNode);
    }
}

function getInnerHTML(DOMNode $element) {
    $innerHTML = '';
    foreach ($element->childNodes as $child) {
        $innerHTML .= $element->ownerDocument->saveHTML($child);
    }
    return $innerHTML;
}

# <artile> 標籤循環
$articleTemplate = $path->query('/html/body/article')->item(0); # 取<article>模板標籤
foreach ($arr as $article) {
    $articleNode = $articleTemplate->parentNode->insertBefore($articleTemplate->cloneNode(true), $articleTemplate); # 根據模板標籤新增節點，並插入到模板標籤之前
    $path->query('.//h1', $articleNode)->item(0)->nodeValue = $article->title; # nodeValue不允許存在HTML標籤
    setInnerHTML($path->query('.//p', $articleNode)->item(0), $article->content); # setInnerHTML允許存在HTML標籤

    # <li> 標籤循環
    $linkTemplate = $path->query('.//ul/li', $articleNode)->item(0); # 取<li>模板標籤
    foreach ($article->links as $link) {
        $linkNode = $linkTemplate->parentNode->insertBefore($linkTemplate->cloneNode(true), $linkTemplate);
        $anchorNode = $path->query('.//a', $linkNode)->item(0);
        $anchorNode->setAttribute('href', "http://$link/"); # 設置連結URL
        $anchorNode->nodeValue = $link; # 設置連結文本
    }
    $linkTemplate->parentNode->removeChild($linkTemplate); # 刪除模板標籤<li>
}
$articleTemplate->parentNode->removeChild($articleTemplate); # 刪除模板標籤<article>

# 在頁面底部顯示本頁面的總執行時間
$nodes = $path->query('/html/body/footer/span');
$now = microtime();
$nodes->item(0)->nodeValue = number_format($now - $start, 3) . 's';

echo $doc->saveHTML(); # 輸出整個頁面
?>

巨大八爪鱼

一派掌门二十级

4楼发表于：2016-1-15 12:21

製作HTML模板文件時，可用瀏覽器直接訪問這個HTML文件。

為了讓正式伺服器上的HTML模板文件不能被惡意訪問，可以創建一個目錄專門存放HTML模板，然後在該目錄下設置一個.htaccess文件，寫上Deny from all（注意Apache 2.2和2.4使用的指令完全不同）。

巨大八爪鱼

一派掌门二十级

5楼发表于：2016-1-15 12:34

網站目錄結構：
/css 存放CSS樣式
/templates 存放HTML模板文件
/xxx.php 實際PHP頁面
當使用Dreamweaver製作HTML模板文件時，為了在設計視圖中能正確顯示CSS樣式，可以將<link>標籤中的CSS href文件路徑寫成"../css/xxx.css"的格式。
而在xxx.php中調用HTML模板文件的時候，自動把所有引用CSS的<link>標籤中的文件路徑全部改為「css/xxx.css」。（當然如果使用了URL重寫規則的話，則再作其他判斷）

如果使用了gettext多語言庫，可以在HTML模板文件上全寫英文原文，這樣可以在Dreamweaver設計視圖中顯示，方便製作網頁。然後PHP在調用HTML模板的時候，自動將模板文件中的所有標籤（也可以設置一個標籤列表）的nodeValue全部執行一次_()函數，將其翻譯成當前所設語言的mo文件中的內容。

巨大八爪鱼

一派掌门二十级

6楼发表于：2016-1-15 12:41

在PHP自帶的DOM類中，還有getElementById和getElementsByTagName方法，使用這兩個方法可以簡化模板標籤的提取。
在上面的例子中，<article>標籤循環的基本思路是：先取出模板文件中的<article>標籤，複製該標籤後插入到該標籤的前面，循環結束後刪除模板標籤。

巨大八爪鱼

一派掌门二十级

7楼发表于：2016-1-15 15:51

【示例2】
下面這個示例演示了如何把一段用戶輸入的亂七八糟的HTML代碼顯示到模板HTML文檔中。
<?php
libxml_use_internal_errors(true);
$doc = new DOMDocument();
$doc->loadHTMLFile('template_example.html');

function removeChildren($node) {
   while ($node->childNodes->length > 0) {
       $node->removeChild($node->firstChild);
   }
}

function setInnerHTML($node, $html) {
   removeChildren($node);
   if (empty($html)) {
       return;
   }

   $doc = $node->ownerDocument;
   $htmlclip = new DOMDocument();
   $htmlclip->loadHTML($html);
   $clipNode = $doc->importNode($htmlclip->getElementsByTagName('body')->item(0), true);
   while ($item = $clipNode->firstChild) {
       $node->appendChild($item);
   }
}

$articleNode = $doc->getElementsByTagName('article')->item(0);
$html = '<P ID=id10 class=strangeclass>A paragraph<BR>   </p><br>
<NAV class=sxxx>A HTML5 LABEL</NAV><p>Another paragraph</p><label><BR><A id=a48';
setInnerHTML($articleNode, $html);

echo $doc->saveHTML();
libxml_clear_errors();

【最終輸出】
article標籤附近：
<article><p id="id10" class="strangeclass">A paragraph<br></p><br><nav class="sxxx">A HTML5 LABEL</nav><p>Another paragraph</p><label><br><a id="a48"></a></label></article>

【顯示效果】

巨大八爪鱼

一派掌门二十级

8楼发表于：2016-1-15 15:56

對於亂七八糟破爛不堪的HTML代碼，如果使用3樓所示的setInnerHTML函數的話，運行就會出現錯誤。因此，示例2中的setInnerHTML函數更完善一些，也更符合DOM標準。
另外，關於在3樓的代碼中用到的DOMDocumentFragment::appendXML函數，PHP官方手冊上提到過這樣一句話：If you want to stick to the standards, you will have to create a temporary DOMDocument with a dummy root and then loop through the child nodes of the root of your XML data to append them.
這說明DOMDocumentFragment::appendXML是不符合DOM標準的。

巨大八爪鱼

一派掌门二十级

9楼发表于：2016-1-15 16:06

index.php中的代碼仍然比較亂。但是如果把頁面處理封裝成一個類，並繼承HTMLPage類，且把removeChildren、setInnerHTML、getInnerHTML這樣的通用函數放置到HTMLPage類中的話，代碼就要簡潔很多。
在頁面處理類IndexPage類中，顯示底部footer的PHP代碼可以單獨弄一個方法，循環顯示文章列表再單獨弄一個函數，把所有函數公用的變量都設置為類實例變量，訪問控制屬性設置為privare。這樣的話，就會使得以後的閱讀和維護工作更加方便。

巨大八爪鱼

一派掌门二十级

10楼 发表于：2016-1-15 16:09

在HTMLPage類中，可以加入一個方法，使得模板頁面中所有的TextNode中的文字全部自動被gettext庫翻譯一次（也就是執行_()函數）。當然，也要允許子類重寫這個方法。

巨大八爪鱼

一派掌门二十级

11楼 发表于：2016-1-15 19:01

【更新】
以下setInnerHTML函數解決了當$html未被任何節點包圍時會自動產生<p>節點擾亂頁面布局的問題。
function setInnerHTML($node, $html) {
    removeChildren($node);
    if (empty($html)) {
        return;
    }

    $doc = $node->ownerDocument;
    $htmlclip = new DOMDocument();
    $htmlclip->loadHTML("<div>$html</div>");
    $clipNode = $doc->importNode($htmlclip->getElementsByTagName('body')->item(0)->firstChild, true);
    while ($item = $clipNode->firstChild) {
        $node->appendChild($item);
    }
}

以下setInnerHTML函數不僅解決了上面的問題，還阻止了$htmlclip自動產生HTML4文檔聲明部分以及head, body等多餘的內容。
該函數必須在PHP版本>=5.4.0以上的伺服器環境中使用。如果環境不滿足的話，就用上面的函數。
function setInnerHTML($node, $html) {
    removeChildren($node);
    if (empty($html)) {
        return;
    }

    $doc = $node->ownerDocument;
    $htmlclip = new DOMDocument();
    $htmlclip->loadHTML("<div>$html</div>", LIBXML_HTML_NODEFDTD | LIBXML_HTML_NOIMPLIED);
    $clipNode = $doc->importNode($htmlclip->firstChild, true);
    while ($item = $clipNode->firstChild) {
        $node->appendChild($item);
    }
}

巨大八爪鱼

一派掌门二十级

12楼 发表于：2016-1-15 20:50

【更新】
以下版本的setInnerHTML函數解決了中文亂碼的問題。
function setInnerHTML($node, $html) {
    removeChildren($node);
    if (empty($html)) {
        return;
    }

    $doc = $node->ownerDocument;
    $htmlclip = new DOMDocument();
    $htmlclip->loadHTML('<meta http-equiv="Content-Type" content="text/html;charset=utf-8"><div>' . $html . '</div>');
    $clipNode = $doc->importNode($htmlclip->documentElement->lastChild->firstChild, true);
    while ($item = $clipNode->firstChild) {
        $node->appendChild($item);
    }
}

巨大八爪鱼

一派掌门二十级

13楼 发表于：2016-1-15 20:55

【以下演示如何在加載HTML模板文件時自動用gettext翻譯其中的文本內容，以及之後如何用sprintf替換其中的變量】
【translate_example.php】
<?php
libxml_use_internal_errors(true);

# 模擬gettext的_()函數
function ____($text) {
    switch ($text) {
    case 'Untitled Document':
        return '無標題文檔';
    case 'Article Example':
        return '文章示例';
    case 'This HTML tutorial contains %d HTML examples.':
        return '這個HTML教程中包含了%d個HTML示例。';
    case 'There are %s options in total.':
        return '共有%s個選項。';
    case 'Apple':
        return '蘋果';
    case 'Orange':
        return '橘子';
    case 'Link Example':
        return '示例連結';
    case "\r\nWith our online ":
        return "\r\n使用我們的在線";
    case 'HTML editor':
        return 'HTML編輯器';
    case ', you can edit the HTML, and click on a button to view the result.':
        return '，您可以編輯HTML代碼，並且點擊按鈕後就能看到運行結果。';
    case 'Time Elapsed: ':
        return '消耗的時間：';
    default:
        return $text; # 不能翻譯的文字
    }
}

function translate($doc) {
    $path = new DOMXPath($doc);
    $textNodes = $path->query('/descendant::*/text()');
    for ($i = 0; $i < $textNodes->length; $i++) {
        $value = $textNodes->item($i)->nodeValue;
        if (trim($value) == '') {
            continue;
        }
        $textNodes->item($i)->nodeValue = ____($value);
    }
}

function removeChildren($node) {
    while ($node->childNodes->length > 0) {
        $node->removeChild($node->firstChild);
    }
}

function setInnerHTML($node, $html) {
    removeChildren($node);
    if (empty($html)) {
        return;
    }

    $doc = $node->ownerDocument;
    $htmlclip = new DOMDocument();
    $htmlclip->loadHTML('<meta http-equiv="Content-Type" content="text/html;charset=utf-8"><div>' . $html . '</div>');
    $clipNode = $doc->importNode($htmlclip->documentElement->lastChild->firstChild, true);
    while ($item = $clipNode->firstChild) {
        $node->appendChild($item);
    }
}

$doc = new DOMDocument();
$doc->loadHTMLFile('template_example.html');
$doc->formatOutput = true;

translate($doc); # 翻譯HTML模板中的文字

# 選中第二個單選框
$path = new DOMXPath($doc);
$radios = $path->query('/html/body/form/input');
$radios->item(1)->setAttribute('checked', 'checked');

# 顯示選項數量
$pNode = $doc->getElementById('CountExamples');
$pNode->firstChild->nodeValue = sprintf($pNode->firstChild->nodeValue, $radios->length); # $pNode指向<p>，firstChild指向<p>中的文本節點
# 最好不要直接設置<p>的nodeValue的值，這樣可能會導致兩個相鄰的<p>節點被合併而破壞頁面布局
$pNode = $doc->getElementById('CountOptions');
setInnerHTML($pNode, sprintf($pNode->firstChild->nodeValue, '<span style="color:red">' . $radios->length . '</span>'));

echo html_entity_decode($doc->saveHTML(), ENT_QUOTES, 'utf-8');

/*
PHP DOM不能識別HTML5的<meta charset="utf-8">標籤
但是能夠識別HTML4的<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
所以在輸出的時候要使用html_entity_decode函數防止源文件中的中文被轉換成HTML Entity表示。
*/

【HTML模板：template_example.html】
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
    font-family: Arial;
    font-size: 12px;
}
mark {
    background-color: #F9F9F9;
    border: 1px solid #DDDDDD;
    border-radius: 2px;
    font-family: monospace, Courier;
    padding: 1px 4px;
}
p {
    line-height: 1.5em;
    margin: 3px 0px;
}

footer {
    background-color: #EEEEEE;
    font-size: 13px;
    margin-top: 20px;
    padding: 10px 0px;
    text-align: center;
}
footer span {
    color: red;
}

ul {
    margin: 2px 0px;
    padding-left: 16px;
}

ul.Navigator {
    background-color: #5F5F5F;
    font-family: "Segoe UI", Arial, sans-serif;
    letter-spacing: 1px;
    list-style: none;
    padding-left: 0px;
    overflow: hidden;
}

ul.Navigator li {
    float: left;
}

ul.Navigator a {
    color: white;
    display: inline-block;
    font-size: 17px;
    padding: 10px 15px 9px;
    text-decoration: none;
}
ul.Navigator a:hover {
    background-color: black;
}
ul.Navigator a.active {
    background-color: #73AF21;
}

form {
    padding: 5px 0px;
}
</style>
</head>

<body>
<nav>
<ul class="Navigator">
    <li><a class="active" href="?language=HTML">HTML</a></li>
    <li><a href="?language=CSS">CSS</a></li>
    <li><a href="?language=JavaScript">JAVASCRIPT</a></li>
</ul>
</nav>
<article>
<h1>Article Example</h1>
<p id="CountExamples">This HTML tutorial contains %d HTML examples.<br>
With our online <mark>HTML editor</mark>, you can edit the HTML, and click on a button to view the result.</p>
<ul>
    <li><a href="example">Link Example</a></li>
</ul>
</article>
<form id="form1" name="form1" method="post">
<input type="radio" name="radio" id="radio" value="apple"><label for="radio">Apple</label><br>
<input type="radio" name="radio" id="radio2" value="orange"><label for="radio2">Orange</label>
</form>
<p id="CountOptions">There are %s options in total.</p>
<footer>Time Elapsed: <span></span></footer>
</body>
</html>

巨大八爪鱼

一派掌门二十级

14楼 发表于：2016-1-15 20:57

【運行效果】

巨大八爪鱼

一派掌门二十级

15楼 发表于：2016-1-15 20:59

由於HTML模板文件中的文字仍是英文，所以在Dreamweaver的設計視圖中仍然能夠看到這些文字，方便編輯。
如果只用PHP的代碼塊（例如<?=_('Orange')?>），那麼在設計視圖中就只能看到PHP塊標記

，十分影響網頁設計。

巨大八爪鱼

一派掌门二十级

16楼 发表于：2016-1-15 21:01

【HTML輸出內容】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
body {
    font-family: Arial;
    font-size: 12px;
}
mark {
    background-color: #F9F9F9;
    border: 1px solid #DDDDDD;
    border-radius: 2px;
    font-family: monospace, Courier;
    padding: 1px 4px;
}
p {
    line-height: 1.5em;
    margin: 3px 0px;
}

footer {
    background-color: #EEEEEE;
    font-size: 13px;
    margin-top: 20px;
    padding: 10px 0px;
    text-align: center;
}
footer span {
    color: red;
}

ul {
    margin: 2px 0px;
    padding-left: 16px;
}

ul.Navigator {
    background-color: #5F5F5F;
    font-family: "Segoe UI", Arial, sans-serif;
    letter-spacing: 1px;
    list-style: none;
    padding-left: 0px;
    overflow: hidden;
}

ul.Navigator li {
    float: left;
}

ul.Navigator a {
    color: white;
    display: inline-block;
    font-size: 17px;
    padding: 10px 15px 9px;
    text-decoration: none;
}
ul.Navigator a:hover {
    background-color: black;
}
ul.Navigator a.active {
    background-color: #73AF21;
}

form {
    padding: 5px 0px;
}
</style>
</head>
<body>
<nav><ul class="Navigator">
<li><a class="active" href="?language=HTML">HTML</a></li>
    <li><a href="?language=CSS">CSS</a></li>
    <li><a href="?language=JavaScript">JAVASCRIPT</a></li>
</ul></nav><article><h1>文章示例</h1>
<p id="CountExamples">這個HTML教程中包含了2個HTML示例。<br>
使用我們的在線<mark>HTML編輯器</mark>，您可以編輯HTML代碼，並且點擊按鈕後就能看到運行結果。</p>
<ul>
<li><a href="example">示例連結</a></li>
</ul></article><form id="form1" name="form1" method="post">
<input type="radio" name="radio" id="radio" value="apple"><label for="radio">蘋果</label><br><input type="radio" name="radio" id="radio2" value="orange" checked><label for="radio2">橘子</label>
</form>
<p id="CountOptions">共有<span style="color:red">2</span>個選項。</p>
<footer>消耗的時間：<span></span></footer>
</body>
</html>

巨大八爪鱼

一派掌门二十级

17楼 发表于：2016-2-10 22:52

【示例代碼】用面向對象的方法來實現上述內容：
【ExamplePage.php】
<?php
class ExamplePage extends HTMLPage {
    private $startTime;

    function __construct() {
        $this->startTime = microtime();
        parent::__construct('template_example.html');

        $this->title = 'My Test Page';
        $this->changeTabs();
        $this->showArticles();
        $this->showFooter();
    }

    private function changeTabs() {
        $this->setActiveTab('/nav/ul/li/a', 1); // 選中第二個選項卡
        $this->setText('/nav/ul/li[1]/a', 'HTML5');
        $this->setText('/nav/ul/li[2]/a', 'CSS3');
        $this->setInnerHTML('/nav/ul/li[3]/a', '<b style="color:red">Java</b>Script');
    }

    private function showArticles() {
        $t_article = $this->queryBody('/article');
        for ($i = 1; $i <= 4; $i++) {
            $article = $this->duplicate($t_article);
            $this->setChildText($article, 'h1', "Article $i");
            $this->setChildHTML($article, 'p', "This is a <mark>paragraph</mark> of Article $i...");

            $t_link = $this->queryIn('ul/li', $article);
            for ($j = 1; $j <= 5; $j++) {
                $link = $this->duplicate($t_link);
                $n = ($i - 1) * 5 + $j;
                $this->setChildText($link, 'a', "Link $j")->setAttribute('href', "page$n.php");
                //$this->setChildAttribute($link, 'a', 'href', 'anotherpage.php');
            }
            $this->delete($t_link);
        }
        $this->delete($t_article);
    }

    private function showFooter() {
        $str = number_format(microtime() - $this->startTime, 3) . 's';
        $this->setText('/footer/span', $str);
    }
}

巨大八爪鱼

一派掌门二十级

18楼 发表于：2016-2-10 22:52

【訪問頁：example.php】
<?php
libxml_use_internal_errors(true);
include_once('HTMLPage.php');
include_once('ExamplePage.php');
$page = new ExamplePage();
$page->show();

巨大八爪鱼

一派掌门二十级

19楼 发表于：2016-2-10 22:53

【封裝的HTMLPage基類：HTMLPage.php】
<?php
class HTMLPage extends DOMDocument {
    private $path;

    function __construct($template) {
        $this->loadHTMLFile($template);
        $this->path = new DOMXPath($this);
    }

    function __get($property) {
        if ($property == 'title') {
            return $this->queryHead('/title', 0)->nodeValue;
        }
    }

    function __set($property, $value) {
        if ($property == 'title') {
            $this->queryHead('/title', 0)->nodeValue = $value;
        }
    }

    public function delete($node) {
        if (is_string($node)) {
            $node = $this->queryBody($node, 0);
        } elseif ($node instanceof DOMNodeList) {
            $node = $node->item(0);
        }
        return $node->parentNode->removeChild($node);
    }

    public function duplicate($templateNode) {
        if ($templateNode instanceof DOMNodeList) {
            $templateNode = $templateNode->item(0);
        }
        return $templateNode->parentNode->insertBefore($templateNode->cloneNode(true), $templateNode);
    }

    public function getInnerHTML(DOMNode $element) {
        $innerHTML = '';
        foreach ($element->childNodes as $child) {
            $innerHTML .= $element->ownerDocument->saveHTML($child);
        }
        return $innerHTML;
    }

    public function query($path, $item = NULL) {
        if (is_null($item)) {
            return $this->path->query($path);
        } else {
            return $this->path->query($path)->item($item);
        }
    }

    public function queryBody($path, $item = NULL) {
        return $this->query("/html/body$path", $item);
    }

    public function queryHead($path, $item = NULL) {
        return $this->query("/html/head$path", $item);
    }

    public function queryIn($path, $node, $item = NULL) {
        if (is_string($node)) {
            $node = $this->queryBody($node);
        }
        if (is_null($item)) {
            return $this->path->query(".//$path", $node);
        } else {
            return $this->path->query(".//$path", $node)->item($item);
        }
    }

    public function removeChildren($node) {
        while ($node->childNodes->length > 0) {
            $node->removeChild($node->firstChild);
        }
    }

    public function setActiveTab($nodeList, $index) {
        if (is_string($nodeList)) {
            $nodeList = $this->queryBody($nodeList);
        }
        $nodeList->item(0)->removeAttribute('class');
        $nodeList->item($index)->setAttribute('class', 'active');
    }

    public function setChildAttribute($node, $path, $attribute, $value) {
        $node = $this->queryIn($path, $node, 0);
        $node->setAttribute($attribute, $value);
        return $node;
    }

    public function setChildText($node, $path, $text) {
        $node = $this->queryIn($path, $node, 0);
        $node->nodeValue = $text;
        return $node;
    }

    public function setChildHTML($node, $path, $html) {
        $node = $this->queryIn($path, $node, 0);
        $this->setInnerHTML($node, $html);
        return $node;
    }

    public function setInnerHTML($node, $html) {
        if (is_string($node)) {
            $node = $this->queryBody($node, 0);
        }
        $this->removeChildren($node);
        if (empty($html)) {
            return;
        }

        $doc = $node->ownerDocument;
        $htmlclip = new DOMDocument();
        $htmlclip->loadHTML('<meta http-equiv="Content-Type" content="text/html;charset=utf-8"><div>' . $html . '</div>');
        $clipNode = $doc->importNode($htmlclip->documentElement->lastChild->firstChild, true);
        while ($item = $clipNode->firstChild) {
            $node->appendChild($item);
        }
    }

    public function setText($node, $text) {
        if (is_string($node)) {
            $node = $this->queryBody($node, 0);
        }
        $node->nodeValue = $text;
    }

    public function show() {
        echo $this->saveHTML();
    }
}

巨大八爪鱼

一派掌门二十级

20楼 发表于：2016-2-10 22:53

【最終輸出頁面】

回复帖子


内容：	图片视频表情
用户名：	您目前是匿名发表
验证码：
	看不清？换一张
	（快捷键：Ctrl+Enter）

本帖信息

点击数：1592

回复数：19

评论数：	?
作者：巨大八爪鱼
最后回复：巨大八爪鱼
最后回复时间：2016-2-10 22:53

本吧热门帖子

今天我來系統地學習一下PDO

公告板

	【新功能】現在手機版發帖也可以上傳圖片了
	【公告】布拉斯侃吧（Purasbar）全站已啟用HTTP/2訪問以及TLS1.3加密
	【新功能】樓中樓功能已上線
	【公告】Purasbar http訪問方式已關閉，從現在起只能通過https方式訪問
	【新功能】現在可以直接在發帖框中粘貼圖片啦！
	【新功能】搜索框提示功能上線了
	【公告】第十五次補丁包安裝完畢
	【公告】從現在開始，管理員將停止審批會員
	【公告】阿斯蘭侃吧現在開始支持簡繁混合搜索
	【公告】阿斯蘭侃吧啟用https訪問
	【公告】從今天開始，本站實行主題編號制
	【新功能】圖片縮放功能上線了

	©2010-2025 Purasbar Ver2.0 ▲
	除非另有声明，本站采用知识共享署名-相同方式共享 3.0 Unported许可协议进行许可。