如何使用javascript访问XML子节点 [英] how to access XML subnodes using javascript
问题描述
我想使用javascript从加载到网页的xml文件中获取信息。
I want to use javascript to get information from a xml file loaded into a webpage.
下面给出的是我正在使用的xmlfile（a.xml）。
The below given is the xmlfile(a.xml) i am using.
a.xml
<?xml version="1.0"?>
<Step rID="T6">
<Obj ><![CDATA[Get Data Table - Passed]]></Obj>
<Details ><![CDATA[]]></Details>
<Time><![CDATA[7/5/2018 - 13:16:26]]></Time>
<TimeTick>1530810986</TimeTick>
<NodeArgs eType="User" icon="5" nRep="9" >
<Disp><![CDATA[Get Data Table - Passed]]></Disp>
</NodeArgs>
</Step>
<Step rID="T7">
<Obj ><![CDATA[GetDataTable - Successful]]></Obj>
<Details ><![CDATA[Toral Row get:65534]]></Details>
<Time><![CDATA[7/5/2018 - 13:16:26]]></Time>
<TimeTick>1530810986</TimeTick>
<NodeArgs eType="User" icon="5" nRep="10" status="Passed" >
<Disp><![CDATA[GetDataTable - Successful]]></Disp>
</NodeArgs>
</Step>
我想使用java脚本访问xml中特定节点下的节点？
这是我想访问步骤节点后访问时间节点。
以下给出的是我要加载xml数据的index.html页面
I want to access nodes under a specific node in xml using java script? That is i want to access Time node after i access step node. And the below given is the index.html page to which i want to load the xml data
index.html
<html>
<head>
<title>Report</title>
<style></style>
</head>
<body>
<p>Results of <b>Test cases</b> </p>
<div id="books"></div>
</body>
<script>
var oXHR = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
var testcase_Number = 0;
var endOfTest= 0;
function reportStatus() {
if (oXHR.readyState == 4) // REQUEST COMPLETED.
showTheList(this.responseXML); // ALL SET. NOW SHOW XML DATA.
}
oXHR.onreadystatechange = reportStatus;
oXHR.open("GET", "a.xml", true); // true = ASYNCHRONOUS REQUEST
//(DESIRABLE), false = SYNCHRONOUS REQUEST.
oXHR.send();
function showTheList(xml) {
var divBooks = document.getElementById('books'); // THE PARENT DIV.
var Book_List = xml.getElementsByTagName('Step'); // THE XML TAG NAME.
var divLeft = document.createElement('div');
divLeft.className = 'col1';
for (var i = 0; i < Book_List.length; i++) {
divLeft.innerHTML=Book_List[i].getChildElementsByTagName("Time")[0].nodeValue;
divBooks.appendChild(divLeft);
}
};
</script>
</html>
在上面的代码中，我试图访问步骤节点下的Time子节点。
我在上面的例子中使用了数组，因为我使用的xml页面有很多Step子节点，我想在Step下为每一个访问Time子节点。
In the above code I am trying to access the Time subnode under the step node. and I have used arrays in the above example as the xml page i am using have lots of Step subnodes , and i want to access the Time subnodes under Step for each one of them.
谢谢，
任何帮助表示赞赏
thanks, Any help is appreciated
推荐答案
您可以选择迭代直接使用xml节点，使用 XPath处理API 。它基本上足以重写你的 showTheList 函数。以下是一个完整的独立解决方案：
You have the option of iterating over the xml nodes directly, employing one of the XPath processing APIs. It basically suffices to rewrite your showTheList function. What follows is a complete standalone solution, however:
<html>
<head>
<title>Report</title>
<style>
</style>
<script>
function showTheList() {
let x_xmlisland = document.getElementById("template_xml");
let s_xmlsource = x_xmlisland.textContent;
// Parse xml. This may beunnecessary depending on the ajax lib used.
let parser = new DOMParser();
let xmlDoc = parser.parseFromString(s_xmlsource, "application/xml");
// Obtain the xml node set containing the needed info.
// In this case, these are the textual contents of all 'Time' elements that are children of a 'Step' node.
let xpr_time = xmlDoc.evaluate("//Step/Time/text()", xmlDoc, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
let node_time
;
let divBooks = document.getElementById('books'); // THE PARENT DIV.
// debugger; // uncomment for tracing
while ( ( node_time = xpr_time.iterateNext() ) !== null ) { // iterate over xml nodes
let divLeft = document.createElement('div');
divLeft.className = 'col1';
divLeft.innerHTML = node_time.textContent; // The xpath expression references the 'text()' function which provides a text node. String must still be extracted.
divBooks.appendChild(divLeft);
}
}
</script>
</head>
<body onLoad="showTheList()">
<script type="text/xml" id="template_xml"><?xml version="1.0"?>
<Steps>
<Step rID="T6">
<Obj ><![CDATA[Get Data Table - Passed]]></Obj>
<Details ><![CDATA[]]></Details>
<Time><![CDATA[7/5/2018 - 13:16:26]]></Time>
<TimeTick>1530810986</TimeTick>
<NodeArgs eType="User" icon="5" nRep="9" >
<Disp><![CDATA[Get Data Table - Passed]]></Disp>
</NodeArgs>
</Step>
<Step rID="T7">
<Obj ><![CDATA[GetDataTable - Successful]]></Obj>
<Details ><![CDATA[Toral Row get:65534]]></Details>
<Time><![CDATA[7/5/2018 - 13:16:27]]></Time>
<TimeTick>1530810986</TimeTick>
<NodeArgs eType="User" icon="5" nRep="10" status="Passed" >
<Disp><![CDATA[GetDataTable - Successful]]></Disp>
</NodeArgs>
</Step>
</Steps>
</script>
<p>Results of <b>Test cases</b> </p>
<div id="books"></div>
</body>
</html>
代码已经过测试。
注意
问题中提供的示例xml格式不正确，因为它缺少唯一的根元素。该解决方案仍然有效，但只考虑第一个 Step 元素。
The sample xml provided in the question is not well-formed since it lacksa unique root element. The solution would still work but only consider the first Stepelement.
更新
要允许来自外部源的xml，ajax代码需要重新引入：
To allow for xml from an external source, the ajax code needs to be reintroduced:
function getData() {
let oXHR = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
oXHR.onreadystatechange = function() {
if (oXHR.readyState == 4 && oXHR.status == 200) {
showTheList(oXHR);
}
};
oXHR.open("GET", "state_data.xml", true); // ...or whatever else
oXHR.send();
} // getData
缺乏本地数据，注册<$不再有意义c $ c> showTheList 作为onLoad处理程序。
Lacking local data, it makes no longer sense to register showTheList as an onLoad handler.
<body onLoad="getData()">
这篇关于如何使用javascript访问XML子节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
