Javascript中的XML解析。 需要帮助

Question

Firstly I have created a javascript which positions, and animates certain parts of a site

example:

<ul>
<li transition="fade" amount="5" thumb="images/thumb1.jpg>
<div class="item rotate"
      width = "18"
      height= "550"
      speed="600"
      start="1100"
      easing="easeOutExpo"><img src="images/cheese.png" alt="Cheese">
<div>

<div class="caption black sfb stb"
      width = "950"
      height= "600"
      speed="600"
      start="1100"
      easing="easeOutExpo">10.99
<div>
</li>

<li transition="cut" amount="15" speed="300" delay="9400" thumb="images/thumb2.jpg>
<div class="item rotate"
      width = "18"
      height= "550"
      speed="600"
      start="1100"
      easing="easeOutExpo"><img src="images/pork.png" alt="Pork">
<div>

<div class="caption white lfl stl"
      width = "950"
      height= "600"
      speed="600"
      start="1100"
      easing="easeOutExpo">15.99
<div>
</li>
</ul>

Now instead of having to place this in the html, I am now wanting to place this in an XML since later I will be making a webservice.

But for now, I need to get my javascript to work so it will read all these from an xml.

What I was thinking of (maybe I am on the wrong path here) is the following for the xml

<spot>
 <effect type="fade"></effect>
 <amount>5</amount>
 <thumb>thumb1.jpg</thumb>
   <item ="item rotate">
    <width>18</width>
    <height>550</height>
    <speed>600</speed>
    <start>1100</start>
    <easing>easeOutExpot</easing>
    <img alt="Cheese">images/cheese.png></image>
   </item>
  </spot>

Now I have no clue as in how to sort this out within a javascript. Could someone please give me some hints tips etc.?

Answer 1

You can find an example of how to parse XML using jQuery in this StackOverflow answer . Just look for the tags you want by using css selectors, and extract the data you need. You can build the necessary HTML using jQuery or the javascript DOM methods( document.createElement# etc.)

If you don't want to use jQuery, this blog entry explains how to create a XML-DOM object from the XML string. You can then use the browsers DOM methods to get the data you want.