在JavaScript中使用DOM解析XML数据 .
2012-08-01 14:59
459 查看
我不知道有多少人是在使用MSXML2.DOMDocumen来解析XML数据, 这里我说一下如何使用JavaScript内置的DOM来解析
下面是示例代码, 使用JS从XML数据中取一个节点的某属性
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<HTML>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<HEAD>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<TITLE> Test Page </TITLE>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</HEAD>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<BODY>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<xml id="xml1">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<components>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<component cmpnt_id="1" cmpnt_name="FE1001" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<component cmpnt_id="2" cmpnt_name="FE1002" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</components>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</xml>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<form name="form1">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<input type="button" value="test" onclick="test()" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</form>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
<script type="text/javascript">...
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
function test()
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var xml1 = document.getElementById("xml1");
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var node_components = xml1.getElementsByTagName("components")[0];
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
node_components = node_components.getElementsByTagName("component");
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var node_component = node_components[1];
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
alert(node_component.getAttribute("cmpnt_name"));}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</script>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</BODY>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</HTML>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
在代码中, 尽量不使用childNodes属性, 因为MF和IE对其的解析不同, 使用getElementsByTagName以免出错,
下面是示例代码, 使用JS从XML数据中取一个节点的某属性
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<HTML>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<HEAD>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<TITLE> Test Page </TITLE>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</HEAD>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<BODY>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<xml id="xml1">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<components>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<component cmpnt_id="1" cmpnt_name="FE1001" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<component cmpnt_id="2" cmpnt_name="FE1002" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</components>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</xml>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<form name="form1">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<input type="button" value="test" onclick="test()" />
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</form>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
<script type="text/javascript">...
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
function test()
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var xml1 = document.getElementById("xml1");
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var node_components = xml1.getElementsByTagName("components")[0];
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
node_components = node_components.getElementsByTagName("component");
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var node_component = node_components[1];
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
alert(node_component.getAttribute("cmpnt_name"));}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</script>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</BODY>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</HTML>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
在代码中, 尽量不使用childNodes属性, 因为MF和IE对其的解析不同, 使用getElementsByTagName以免出错,
相关文章推荐
- 在JavaScript中使用DOM解析XML数据
- JAva使用DOM读取XML数据(解析)
- 使用javascript解析xxx.xml文档将数据加载到xxx.html文档中的表格元素中
- XML初识(一)--使用DOM解析XML数据
- iOS开发3-使用DOM(GData)解析XML数据
- java学习笔记——使用DOM解析XML和使用SAX解析XML
- 客户端大批量数据更新:使用SQL Server 解析XML数据
- Android成长之路-使用DOM解析XML
- JAVASCRIPT中使用DOM操作XML文档
- 使用JavaScript访问XML数据
- js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
- 【XML】使用DOM解析XML文件
- Javascript里使用Dom操作Xml
- JS解析XML数据,ActiveXObject("Microsoft.XMLDOM")对象兼容IE和火狐
- 关于ios7 使用 GDataXml 解析 xml 数据的问题。
- 使用原生的NSXmlParser解析xml数据
- (五)使用DOM解析XML文档
- 使用javascript访问XML数据的实例
- XML:使用DOM技术解析xML文件中的城市,实现select级联选择
- JAVA操作XML一(读取):使用DOM读取XML数据的两种具体实现