如何使用Javascript从xml文件输入创建HTML视图中的树视图?
这是我的xml文件。在html页面中,我使用XMLHttpRequest
来获取此文件
<part id="P1">
<measure number="1" width="199">
<print>
<system-layout>
<top-system-distance>266</top-system-distance>
</system-layout>
<measure-numbering>none</measure-numbering>
</print>
<attributes>
<divisions>8</divisions>
<key>
<fifths>-1</fifths>
<mode>major</mode>
</key>
<clef>
<sign>F</sign>
<line>4</line>
</clef>
</attributes>
<sound tempo="60"/>
<direction placement="above">
<direction-type>
<words default-y="37" relative-x="-46">Chorus</words>
</direction-type>
</direction>
<note default-x="70">
<pitch>
<step>C</step>
<octave>4</octave>
</pitch>
<duration>8</duration>
<voice>1</voice>
<type>quarter</type>
<stem>none</stem>
<lyric default-y="-64" justify="left" number="1" relative-x="-18">
<syllabic>begin</syllabic>
<text>Ma</text>
</lyric>
</note>
<note default-x="95">
<pitch>
<step>D</step>
<octave>4</octave>
</pitch>
<duration>8</duration>
<voice>1</voice>
<type>quarter</type>
<stem>none</stem>
<lyric default-y="-64" justify="left" number="1" relative-x="-12">
<syllabic>middle</syllabic>
<text>gni</text>
</lyric>
</note>
<note default-x="119">
<pitch>
<step>C</step>
<octave>4</octave>
</pitch>
<duration>8</duration>
<voice>1</voice>
<type>quarter</type>
<stem>none</stem>
<notations>
<slur number="1" placement="above" type="start"/>
</notations>
<lyric default-y="-64" justify="left" number="1">
<syllabic>middle</syllabic>
<text>fi</text>
</lyric>
</note>
<note default-x="143">
<pitch>
<step>F</step>
<octave>4</octave>
</pitch>
<duration>8</duration>
<voice>1</voice>
<type>quarter</type>
<stem>none</stem>
<notations>
<slur number="1" type="stop"/>
</notations>
</note>
<note default-x="170">
<pitch>
<step>F</step>
<octave>4</octave>
</pitch>
<duration>8</duration>
<voice>1</voice>
<type>quarter</type>
<stem>none</stem>
<lyric default-y="-64" justify="left" number="1" relative-x="-6">
<syllabic>end</syllabic>
<text>cat</text>
</lyric>
</note>
</measure>
<!--=======================================================-->
<measure number="2" width="192">
<print new-system="no"/>
<attributes>
<time>
<beats>3</beats>
<beat-type>4</beat-type>
</time>
</attributes>
<direction placement="above">
<direction-type>
<words default-y="22" relative-x="-84">(C.)</words>
</direction-type>
</direction>
<note default-x="105">
<rest/>
<duration>8</duration>
<voice>1</voice>
<type>quarter</type>
</note>
<note default-x="134">
<rest/>
<duration>8</duration>
<voice>1</voice>
<type>quarter</type>
</note>
<note default-x="162">
<pitch>
<step>F</step>
<octave>4</octave>
</pitch>
<duration>8</duration>
<voice>1</voice>
<type>quarter</type>
<stem default-y="-20">down</stem>
<lyric default-y="-64" justify="left" number="1">
<syllabic>begin</syllabic>
<text>A</text>
</lyric>
</note>
</measure>
</part>
<part id="P2">
<measure number="1" width="199">
<print>
<staff-layout number="1">
<staff-distance>101</staff-distance>
</staff-layout>
<measure-numbering>none</measure-numbering>
</print>
<attributes>
<divisions>8</divisions>
<key>
<fifths>-1</fifths>
<mode>major</mode>
</key>
<instruments>2</instruments>
<clef>
<sign>F</sign>
<line>4</line>
</clef>
<staff-details print-object="no" print-spacing="yes"/>
</attributes>
<sound tempo="60"/>
<note>
<rest measure="yes"/>
<duration>40</duration>
<voice>1</voice>
</note>
</measure>
<!--=======================================================-->
<measure number="2" width="192">
<print new-system="no"/>
<attributes>
<time>
<beats>3</beats>
<beat-type>4</beat-type>
</time>
</attributes>
<attributes>
<staff-details print-object="yes"/>
</attributes>
<direction placement="above">
<direction-type>
<words default-y="19" relative-x="-85">(CT.)</words>
</direction-type>
</direction>
<note default-x="105">
<rest/>
<duration>8</duration>
<instrument id="P2-I4"/>
<voice>1</voice>
<type>quarter</type>
</note>
<note default-x="134">
<rest/>
<duration>8</duration>
<instrument id="P2-I4"/>
<voice>1</voice>
<type>quarter</type>
</note>
<note default-x="162">
<pitch>
<step>F</step>
<octave>3</octave>
</pitch>
<duration>8</duration>
<instrument id="P2-I4"/>
<voice>1</voice>
<type>quarter</type>
<stem default-y="-45">down</stem>
<lyric default-y="-72" justify="left" number="1">
<syllabic>begin</syllabic>
<text>A</text>
</lyric>
</note>
<backup>
<duration>24</duration>
</backup>
<note default-x="105">
<rest/>
<duration>8</duration>
<instrument id="P2-I3"/>
<voice>2</voice>
<type>quarter</type>
</note>
<note default-x="134">
<rest/>
<duration>8</duration>
<instrument id="P2-I3"/>
<voice>2</voice>
<type>quarter</type>
</note>
<note default-x="162">
<pitch>
<step>F</step>
<octave>3</octave>
</pitch>
<duration>8</duration>
<instrument id="P2-I3"/>
<voice>2</voice>
<type>quarter</type>
<stem default-y="-45">down</stem>
</note>
</measure>
<!--=======================================================-->
<measure number="3" width="174">
<print new-system="no"/>
<note default-x="13">
<pitch>
<step>D</step>
<octave>3</octave>
</pitch>
<duration>4</duration>
<instrument id="P2-I4"/>
<voice>1</voice>
<type>eighth</type>
<stem default-y="12">up</stem>
<beam number="1">begin</beam>
<lyric default-y="-72" justify="left" number="1">
<syllabic>middle</syllabic>
<text>ni</text>
</lyric>
</note>
<note default-x="42">
<pitch>
<step>C</step>
<octave>3</octave>
</pitch>
<duration>4</duration>
<instrument id="P2-I4"/>
<voice>1</voice>
<type>eighth</type>
<stem default-y="10">up</stem>
<beam number="1">end</beam>
</note>
<note default-x="66">
<pitch>
<step>E</step>
<octave>3</octave>
</pitch>
<duration>8</duration>
<instrument id="P2-I4"/>
<voice>1</voice>
<type>quarter</type>
<stem default-y="-50">down</stem>
<lyric default-y="-72" justify="left" number="1">
<syllabic>end</syllabic>
<text>ma</text>
</lyric>
</note>
<note default-x="112">
<pitch>
<step>F</step>
<octave>3</octave>
</pitch>
<duration>4</duration>
<instrument id="P2-I4"/>
<voice>1</voice>
<type>eighth</type>
<stem default-y="-42">down</stem>
<beam number="1">begin</beam>
<lyric default-y="-72" justify="left" number="1">
<syllabic>begin</syllabic>
<text>me</text>
</lyric>
</note>
<note default-x="142">
<pitch>
<step>G</step>
<octave>3</octave>
</pitch>
<duration>4</duration>
<instrument id="P2-I4"/>
<voice>1</voice>
<type>eighth</type>
<stem default-y="-39.5">down</stem>
<beam number="1">end</beam>
</note>
<backup>
<duration>24</duration>
</backup>
<note default-x="13">
<pitch>
<step>D</step>
<octave>3</octave>
</pitch>
<duration>4</duration>
<instrument id="P2-I3"/>
<voice>2</voice>
<type>eighth</type>
<stem default-y="12">up</stem>
<beam number="1">begin</beam>
</note>
<note default-x="42">
<pitch>
<step>C</step>
<octave>3</octave>
</pitch>
<duration>4</duration>
<instrument id="P2-I3"/>
<voice>2</voice>
<type>eighth</type>
<stem default-y="10">up</stem>
<beam number="1">end</beam>
</note>
<note default-x="66">
<pitch>
<step>E</step>
<octave>3</octave>
</pitch>
<duration>8</duration>
<instrument id="P2-I3"/>
<voice>2</voice>
<type>quarter</type>
<stem default-y="-50">down</stem>
</note>
<note default-x="112">
<pitch>
<step>F</step>
<octave>3</octave>
</pitch>
<duration>4</duration>
<instrument id="P2-I3"/>
<voice>2</voice>
<type>eighth</type>
<stem default-y="-42">down</stem>
<beam number="1">begin</beam>
</note>
<note default-x="142">
<pitch>
<step>G</step>
<octave>3</octave>
</pitch>
<duration>4</duration>
<instrument id="P2-I3"/>
<voice>2</voice>
<type>eighth</type>
<stem default-y="-39.5">down</stem>
<beam number="1">end</beam>
</note>
</measure>
</part>