How to traverse through custom XML structure and u

Question

As a side project I am currently trying some stuff out and getting my head around XML interpretation by the browser. What I am trying to achieve is: read and transform XML into a visible HTML structure.

Let's say that this is my XML. (For those who are curious, it is a linguistic representation of a Dutch sentence.) I want to be able to traverse through this structure, and gather information from it. (And, as an extension, transform it into my own HTML as I please.)

<node begin="0" cat="top" end="11" id="0" rel="top">
    <node begin="0" cat="smain" end="10" id="1" rel="--">
        <node begin="0" cat="np" end="5" id="2" rel="su">
            <node begin="0" end="1" id="3" lemma="de" pos="det" pt="lid" rel="det" root="de" word="De"/>
            <node begin="1" end="2" genus="zijd" getal="ev" graad="basis" id="4" lemma="helft" ntype="soort" pos="noun" pt="n" rel="hd" root="helft" word="helft"/>
            <node begin="2" cat="pp" end="5" id="5" rel="mod">
                <node begin="2" end="3" id="6" lemma="van" pos="prep" pt="vz" rel="hd" root="van" word="van"/>
                <node begin="3" cat="np" end="5" id="7" rel="obj1">
                    <node begin="3" end="4" id="8" lemma="al" pos="det" positie="prenom" pt="vnw" rel="det" root="alle" word="alle"/>
                    <node begin="4" end="5" getal-n="mv-n" id="9" lemma="werkloos" pos="adj" positie="nom" pt="adj" rel="hd" root="werkloos" word="werklozen"/>
                </node>
            </node>
        </node>
        <node begin="5" end="6" id="10" lemma="zijn" pos="verb" pt="ww" pvagr="ev" rel="hd" root="ben" word="is" wvorm="pv"/>
        <node begin="6" cat="ap" end="10" id="11" rel="predc">
            <node begin="6" buiging="zonder" end="7" graad="comp" id="12" lemma="jong" pos="adj" pt="adj" rel="hd" root="jong" word="jonger"/>
            <node begin="7" cat="cp" end="10" id="13" rel="obcomp">
                <node begin="7" conjtype="onder" end="8" id="14" lemma="dan" pos="comparative" pt="vg" rel="cmp" root="dan" word="dan"/>
                <node begin="8" cat="np" end="10" id="15" rel="body">
                    <node begin="8" end="9" id="16" lemma="30" pos="num" positie="prenom" pt="tw" rel="det" root="30" word="30"/>
                    <node begin="9" end="10" genus="onz" getal="ev" id="17" lemma="jaar" pos="noun" pt="n" rel="hd" root="jaar" word="jaar"/>
                </node>
            </node>
        </node>
    </node>
    <node begin="10" end="11" id="18" lemma="." pos="punct" postag="LET()" pt="let" rel="--" root="." word="."/>
</node>

However, this didn't work as easily as expected. I tried to use jQuery's $.parseXML(data) and then transforming it into a jQuery object, but I don't seem to be able to travel through the internal structure of the XML that ought to be generated.

If #xml-input is a code-tag which contains the above XML, then the following log returns undefined.

var xml = $("#xml-input").html(),
    xmlParsed = $.parseXML(xml),
    xmlObject = $(xmlParsed);

console.log(xmlObject.node);

How would I transform an input into XML that I can travel to and manipulate with jQuery? Here's a fiddle to play with.

Answer 1

I trust the following demo may help you figure it all out. It traverses all the nodes and outputs, id, begin and end values. Let us know if you have any questions.

$(document).ready(function() {
  var xml = $("#xml_input").val(),
    xmlParsed = $.parseXML(xml),
    xmlObject = $(xmlParsed);
  function output( nodes ) {
    nodes.each(function() {
      $('pre.out').append( 'id='+this.id + ',\t\tbegin='+$(this).attr('begin') +  ',\tend='+ $(this).attr('end') + '\n' );
      output( $(this).children('node') );
    });
  }

  output( xmlObject.children('node') );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
INPUT: <br>
<textarea id="xml_input"><node begin="0" cat="top" end="11" id="0" rel="top">
    <node begin="0" cat="smain" end="10" id="1" rel="--">
        <node begin="0" cat="np" end="5" id="2" rel="su">
            <node begin="0" end="1" id="3" lemma="de" pos="det" pt="lid" rel="det" root="de" word="De"/>
            <node begin="1" end="2" genus="zijd" getal="ev" graad="basis" id="4" lemma="helft" ntype="soort" pos="noun" pt="n" rel="hd" root="helft" word="helft"/>
            <node begin="2" cat="pp" end="5" id="5" rel="mod">
                <node begin="2" end="3" id="6" lemma="van" pos="prep" pt="vz" rel="hd" root="van" word="van"/>
                <node begin="3" cat="np" end="5" id="7" rel="obj1">
                    <node begin="3" end="4" id="8" lemma="al" pos="det" positie="prenom" pt="vnw" rel="det" root="alle" word="alle"/>
                    <node begin="4" end="5" getal-n="mv-n" id="9" lemma="werkloos" pos="adj" positie="nom" pt="adj" rel="hd" root="werkloos" word="werklozen"/>
                </node>
            </node>
        </node>
        <node begin="5" end="6" id="10" lemma="zijn" pos="verb" pt="ww" pvagr="ev" rel="hd" root="ben" word="is" wvorm="pv"/>
        <node begin="6" cat="ap" end="10" id="11" rel="predc">
            <node begin="6" buiging="zonder" end="7" graad="comp" id="12" lemma="jong" pos="adj" pt="adj" rel="hd" root="jong" word="jonger"/>
            <node begin="7" cat="cp" end="10" id="13" rel="obcomp">
                <node begin="7" conjtype="onder" end="8" id="14" lemma="dan" pos="comparative" pt="vg" rel="cmp" root="dan" word="dan"/>
                <node begin="8" cat="np" end="10" id="15" rel="body">
                    <node begin="8" end="9" id="16" lemma="30" pos="num" positie="prenom" pt="tw" rel="det" root="30" word="30"/>
                    <node begin="9" end="10" genus="onz" getal="ev" id="17" lemma="jaar" pos="noun" pt="n" rel="hd" root="jaar" word="jaar"/>
                </node>
            </node>
        </node>
    </node>
    <node begin="10" end="11" id="18" lemma="." pos="punct" postag="LET()" pt="let" rel="--" root="." word="."/>
</node>
</textarea><br><br>

OUTPUT:<br>
<pre class="out"></pre>

Answer 2

You can use jQuery methods to manipulate the XML document parsed with $.parseXML. For instance,

console.log(xmlObject.find("node"));

Returns all the node elements in your document

Fiddle: http://jsfiddle.net/rj3hpy6m/

For the attributes you can then use .attr() to get the attributes. For example getting the attribute "cat" from the first node.

xmlObject.find("node").first().attr("cat") // top