如何使用仅Javascript

时间:2016-04-07 09:29:55

标签: javascript html xml

如何使用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>

0 个答案:

没有答案