DOM 词典练习
使用DOM技术实现如下词典功能(1.查询:根据英文单词查中文意思;2.添加:添加英文和中文单词;3.删除:根据英文或中文单词删除中英文词意;4.修改:根据英文单词修改中文注释。)
【代码如下:】
1.【words.xml】
<?xml version="1.0" encoding="UTF-8"?> <words> <word> <en>woman</en> <ch>女</ch> </word> <word> <en>man</en> <ch>男人</ch> </word> <word> <en>girl</en> <ch>女孩</ch> </word> </words>
2.【WordView.html】
<html> <head> <title>wordQuery</title> <meta http-equiv="content-type" content="text/html; charset:utf-8" /> <script language="javascript"> function fun(table) { if(table == "tab1") { tab1.style.display = "block"; tab2.style.display = "none"; tab3.style.display = "none"; tab4.style.display = "none"; } else if(table == "tab2") { tab1.style.display = "none"; tab2.style.display = "block"; tab3.style.display = "none"; tab4.style.display = "none"; } else if(table == "tab3") { tab1.style.display = "none"; tab2.style.display = "none"; tab3.style.display = "block"; tab4.style.display = "none"; } else if(table == "tab4") { tab1.style.display = "none"; tab2.style.display = "none"; tab3.style.display = "none"; tab4.style.display = "block"; } } </script> </head> <body> <form action="WordProcess.php" nethod="post"> <input type="radio" name="select" onclick="fun('tab1')" /><a>查询单词</a> <input type="radio" name="select" onclick="fun('tab2')" /><a>添加单词</a> <input type="radio" name="select" onclick="fun('tab3')" /><a>删除单词</a> <input type="radio" name="select" onclick="fun('tab4')" /><a>修改单词</a> </form> <form action="WordProcess.php" method="post"> <table id="tab1" style="display:block"> <caption>查询单词</caption> <tr> <td><a>请输入英文单词</a></td> <td><input type="text" name="engword" /></td> </tr> <input type="hidden" name="type" value="query" /> <tr><td colspan="2"><input type="submit" value="查询" /></td></tr> </table> </form> <form action="WordProcess.php" method="post"> <table id="tab2" style="display:none"> <caption>添加单词</caption> <tr> <td><a>请输入英文单词</a></td> <td><input type="text" name="enword" /></td> </tr> <tr> <td><a>请输入中文单词</a></td> <td><input type="text" name="chword" /></td> </tr> <input type="hidden" name="type" value="add" /> <tr><td colspan="2"><input type="submit" value="添加" /></td></tr> </table> </form> <form action="WordProcess.php" method="post"> <table id="tab3" style="display:none"> <caption>删除单词</caption> <tr> <td><a>请输入英文单词</a></td> <td><input type="text" name="delEnWord" /></td> </tr> <tr> <td><a>请输入中文单词</a></td> <td><input type="text" name="delChWord" /></td> </tr> <input type="hidden" name="type" value="del" /> <tr><td colspan="2"><input type="submit" value="删除" /></td></tr> </table> </form> <form action="WordProcess.php" method="post"> <table id="tab4" style="display:none"> <caption>修改单词</caption> <tr> <td><a>请输入英文单词</a></td> <td><input type="text" name="queryWord" /></td> </tr> <tr> <td><a>请输入中文词意</a></td> <td><input type="text" name="updateWord" /></td> </tr> <input type="hidden" name="type" value="update" /> <tr><td colspan="2"><input type="submit" value="修改" /></td></tr> </table> </form> </body> </html>
3.【WordProcess.php】
<?php header("Content-type: text/html; charset=utf-8"); require_once 'GetWord.class.php'; $type = $_REQUEST['type']; $xmldoc = new DOMDocument(); $xmldoc -> load("words.xml"); $getWord = new GetWord(); if($type == 'query') { $queryWord = $_REQUEST['engword']; $words = $xmldoc -> getElementsByTagName('word'); $isEnter = false; for($i=0; $i<$words->length; $i++) { $word = $words -> item($i); $enWord = $getWord->getNodeVal($word, 'en'); if($queryWord == $enWord) { $isEnter = true; echo '"'.$queryWord.'" the Chinese mean:'.$getWord->getNodeVal($word,'ch'); } } if(!$isEnter) { echo 'not find this words!'; } echo "<br /><a href='WordView.php'>BACK</a>"; } else if($type=='add') { $addEnWord = $_REQUEST['enword']; $addChWord = $_REQUEST['chword']; $words = $xmldoc ->getElementsByTagName('words')->item(0); $newWord = $xmldoc->createElement('word'); $newEnWord = $xmldoc->createElement('en'); $newEnWord->nodeValue = $addEnWord; $newChWord = $xmldoc->createElement('ch'); $newChWord->nodeValue = $addChWord; $newWord->appendChild($newEnWord); $newWord->appendChild($newChWord); $words->appendChild($newWord); $saveOk = $xmldoc->save('words.xml'); if(!$saveOk) { echo 'save false!'; }else{ echo 'save successful!'; } echo "<br /><a href='WordView.php'>BACK</a>"; } else if($type=='del') { $delEnWord = $_REQUEST['delEnWord']; $delChWord = $_REQUEST['delChWord']; $root = $xmldoc->getElementsByTagName('words')->item(0); $words = $xmldoc->getElementsByTagName('word'); $isEnter = false; for($i=0; $i<$words->length; $i++) { $word = $words->item($i); $enword = $getWord->getNodeVal($word, 'en'); $chword = $getWord->getNodeVal($word, 'ch'); if($delEnWord == $enword || $delChWord == $chword) { $isEnter = true; $root->removeChild($word); } } $xmldoc->save('words.xml'); if(!$isEnter) { echo '('.$delEnWord.':'.$delChWord.')not find this words,delete false!'; } else{ echo '('.$delEnWord.':'.$delChWord.')delete successful!'; } echo "<br /><a href='WordView.php'>BACK</a>"; } else if($type='update') { $queryWord = $_REQUEST['queryWord']; $updateWord = $_REQUEST['updateWord']; $root = $xmldoc->getElementsByTagName('words')->item(0); $words = $xmldoc->getElementsByTagName('word'); $isEnter = false; for($i=0; $i<$words->length; $i++) { $word = $words->item($i); $enword = $word->getElementsByTagName('en')->item(0); $enwordVal = $enword->nodeValue; if($queryWord == $enwordVal) { $isEnter = true; $enword->parentNode->getElementsByTagName('ch')->item(0)->nodeValue = $updateWord; } } $xmldoc->save('words.xml'); if(!$isEnter) { echo 'the English word('.$queryWord.') is not find.'; } else { echo 'update seccessful!'; } echo "<br /><a href='WordView.php'>BACK</a>"; } // function getNodeVal($node, $tagName) { // return $node -> getElementsByTagName($tagName)->item(0)->nodeValue; // } ?>
4.【GetWord.class.php】
<?php class GetWord{ function getNodeVal($node, $tagName) { return $node -> getElementsByTagName($tagName)->item(0)->nodeValue; } } ?>