可用PHP解析,也可用js解析。PHP和js直接的区别是,一个是用 . ,一个是 -> ,其他都一样
PHP中loadXML方法中参数是xml的字符串,load方法中参数是xml文件路径
$dom = new DOMDocument(); $dom->loadXML($xmlstring); $rootNode = $dom->documentElement;
node属性
nodeType:显示节点的类型
nodeName:显示节点的名称
nodeValue:显示节点的值
attributes:获取一个属性节点
firstChild:表示某一节点的第一个节点
lastChild:表示某一节点的最后一个子节点
childNodes:表示所在节点的所有子节点
parentNode:表示所在节点的父节点
nextSibling:紧挨着当前节点的下一个节点
prevIoUsSibling:紧挨着当前节点的上一个节点
node方法
asChildNodes()方法:判定一个节点是否有子节点,有返回true,没有返回false
removeChild()方法:去除一个节点
appendChild()方法:添加一个节点,如果文档树中已经存在该节点,则将它删除,然后在新位置插入
replaceChild()方法:从文档树中删除(并返回)指定的子节点,用另一个节点来替换它
insertBefore()方法:在指定节点的前面插入一个节点,如果已经存在,则删除原来的,然后在新位置插入
cloneNode()方法:复制一个节点,该方法有一个参数,true表示同时复制所有的子节点,false表示近复制当前节点\
下面是js解析Dom
PHP解析xml:PHP用DOMDocument解析xml,不能解析含有命名空间的xml,而且对节点的值有点问题,它包含子节点的值
xml:
<!DOCTYPE html> <html> <head> <Meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>页面编辑</title> <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.5/themes/default/easyui.css"/> <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.5/themes/icon.css"/> <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.5/demo/demo.css"/> <link rel="stylesheet" type="text/css" href="../css/index.css"/> <link rel="stylesheet" type="text/css" href="../css/easyui-change.css"/> <script type="text/javascript" src="../jquery-easyui-1.4.5/jquery.min.js"></script> <script type="text/javascript" src="../jquery-easyui-1.4.5/jquery.easyui.min.js"></script> <script type="text/javascript" src="../jsPackage/datagrid-groupview.js"></script> <script type="text/javascript" src="../jsPackage/datagrid-cellediting.js"></script> <script type="text/javascript" src="../JS/init/html_init.js"></script> <script type="text/javascript" src="../JS/topPanel/file_operations.js"></script> <script type="text/javascript" src="../JS/topPanel/edit_operations.js"></script> <script type="text/javascript" src="../JS/multipleUse/module_load.js"></script> <script type="text/javascript" src="../JS/rightPanel/output_tree_data.js"></script> </head> <body> <div id="topPanel" class="topPanel"> <div class="easyui-panel" style="padding:5px;"> <a href="#" class="easyui-menubutton" data-options="menu:'#mm0'">文件</a> <a href="#" class="easyui-menubutton" data-options="menu:'#mm1',iconCls:'icon-edit'">编辑</a> </div> <div id="mm0" style="width:150px;"> <div id="menubutton_file_add" data-options="iconCls:'icon-add'">新建</div> <div class="menu-sep"></div> <div id="menubutton_file_open" data-options="iconCls:'icon-redo'">打开</div> <div class="menu-sep"></div> <div id="menubutton_file_save" data-options="iconCls:'icon-save'">存储</div> <div class="menu-sep"></div> <div id="menubutton_file_saveIN" data-options="iconCls:'icon-undo'">存储为</div> <div id="menubutton_file_out" class="menu-sep"></div> <div data-options="">退出</div> </div> <div id="mm1" style="width:150px;"> <div> <span>插入JS脚本</span> <div> <div id="menubutton_edit_elementBefore">元素之前</div> <div class="menu-sep"></div> <div id="menubutton_edit_elementAfter">元素之后</div> </div> </div> <div class="menu-sep"></div> <div id="menubutton_edit_style">样式</div> <div class="menu-sep"></div> <div id="menubutton_edit_debug" data-options="iconCls:'icon-tip'">调试</div> </div> </div> <div id="leftPanel" class="leftPanel"></div> <div id="centerPanel" class="centerPanel"> <!-- <iframe id="centerShow" src="../show/show.html" style="width:100%;height:100%;overflow:auto;"></iframe> --> <div style="margin-top:50px;margin-left:50px;"><font size="4" color="blue">欢迎进入web页面编辑器</font></div> </div> <div id="rightPanel" class="rightPanel"> <div id="edit" style="display:none"> <div> <ul id="rightTreePanel" class="rightTreePanel"></ul> <div id="rightTree_menu"></div> </div> <div> <div id="rightDataGridPanel" class="rightDataGridPanel"></div> <div style="margin-top:2px"> <input type="text" name="searchProperties" id="searchProperties"/> <font>自动刷新</font> <div id="autoRefresh_switchBtn"></div> <span id="handRefresh"></span> </div> </div> </div> </div> <div id="bottomPanel" class="bottomPanel"> <div id="bottomPanel_panel" class="easyui-panel" style="padding:5px;height:50px;overflow-y:auto;"></div> </div> <div id="win"></div> <div id="style_window"> </div> </body> </html>
PHP代码:
<?PHP $myfile = fopen("comp.xml","r") or die("Unable to open file!"); $xmlstring=fread($myfile,filesize("comp.xml")); fclose($myfile); $dom = new DOMDocument(); $dom->loadXML($xmlstring); $ary = array(); $num = 0; $flag = "①"; genArray($dom->documentElement,$ary,$num,$flag); print_r(json_encode($ary)); function genArray($node,&$ary,&$num,$flag){ $nodeArray = array(); $num = $num + 1; $numStr = $flag.$num; if ($node->hasAttributes()) { foreach ($node->attributes as $attr) { $nodeArray[$attr->nodeName] = $attr->nodeValue; } } if(isset($node->nodeValue)){ echo "nodepath:".($node->getNodePath())."<br/>"; $nodeArray['textValue'] = trim($node->nodeValue); } if ($node->hasChildNodes()) { if ($node->childNodes->length == 1) { genArray($node->firstChild,$nodeArray,$flag); } else { foreach ($node->childNodes as $childNode) { if ($childNode->nodeType != XML_TEXT_NODE) { genArray($childNode,$flag); } } } } $ary[($node->nodeName).$numStr] = $nodeArray; } ?>
$childNode = $node->getElementsByTag("div").item(0);PHP和js直接的区别是,js中直接用document相当于PHP中的$PHPDocument
$dom = new DOMDocument(); $dom->loadXML($xmlstring); $PHPDocument = $dom->documentElement;