JSXML XML Tools

Version 1.2 Documentation



REXML

The first step to accessing an XML document through the REXML parser is creating the object, passing it the XML document.

    var xmlDoc = new REXML(strXML);


Alternatively, the parser object can be created, the XML property set, and the parse method called.

    var xmlDoc = new REXML();
    ...
    xmlDoc.XML = strXML;
    xmlDoc.parse();


Once the object is created and XML parsed, the following objects, methods, and properties are used to access the XML.

Objects
    XMLElement

    Each node in the XML document is exposed by an XMLElement object.

    XMLElement Properties
    • type The type of the element can be:
      • element
      • text
      • comment
      • pi
      • cdata
    • name If the type is "element," the tag name
    • childElements[] An array of XMLElements
    • parentElement The XML Element's parent XML Element
    • text The concatenated value of all text and cdata elements for the element
    XMLElement Methods
    • getText() Returns all text and cdata of all child elements
    • childElement(strElementName) Takes the elements tag name and returns the XMLElement if it's found in the element's children
    • attribute(strAttributeName) Takes the attribute name and returns the value, if found. Returns an empty string if the attribute isn't found.
Methods
    parse()

    The parse method is called for you if you pass the REXML object a string of XML. Otherwise you must call the parse method before you begin working with the XML.
Properties
    rootElement

    The rootElement property is the entry point, returning the XMLElement for the first node of the document. To work with an XML document the next thing to do after creating the object is to access the rootElement property and use its properties and methods to navigate through the XML.

function ShowXML(strXML) {
    var xmlDoc = new REXML(strXML);
    
    alert("The root element " + xmlDoc.rootElement.name + " has " xmlDoc.rootElement.childElements.length + " child elements.");
    for (var i=0; i<xmlDoc.rootElement.childElements.length; i++) {
        alert("Child element of type " + xmlDoc.rootElement.childElements[i].type);
    }
}


JSXMLBuilder

To manipulate the XML you use the JSXMLBuilder object. Rather than using the structure of the API to give the elements position in the document, the position is given as a vertical and horizontal index (think rows and columns). This makes coding GUIs that manipulate XML a simpler matter, it's the reason there is a separation between the parser that reads and the builder that builds. The specialized roles make REXML a great JavaScript parser, and JSXMLBuilder a great way to manipulate XML through a user interface.

Objects
    XMLElement

    Each node in the XML document is exposed by an XMLElement object.

    XMLElement Properties
    • type The type is always "element," JSXMLBuilder only supports normal ("tag") elements since support for CDATA, comment, etc would add to code size without any benefit.
    • name The element name
    • text The text of the element
    • index The vertical index of the element in the document
    • level The horizontal index of the element in the document
    • xmlBuilder A reference back to the xmlBuilder object
    XMLElement Methods
    • attribute(sAttributeName) Returns attribute value by name
    • setAttribute(sAttributeName, sValue) edits or adds an attribute
    • removeAttribute(sAttributeName) Removes an attribute
    • parentElement() Returns the elements parent element
    • childElement(Child) Returns a child element by name or number (0 is the first child element, 1 is the second, etc)
Methods
    addElementAt(strElement,Attributes,strText,iElemIndex,iElemLevel)

    Inserts the element at the specified level and index, after elements at the same level

    insertElementAt(strElement,Attributes,strText,iElemIndex,iElemLevel)

    Inserts the element at the specified level and index

    removeElement(iElemIndex)

    removes the element at the specified index

    moveElement(iElem1Index,iElem2Index)

    moves the element and child elements at index 1 to index 2.

    generateXML()

    returns an updated string of XML.

Properties
    XML

    The string of XML. This is not updated when a change is made, generateXML must be called to get the new XML.

    elements

    an array of JSXMLBuilder XMLElements. This is the entry point into the XML document, navigating through this array and associating indexes of nodes to pieces of the user interface looks something like this:

  xmlForm = new JSXMLBuilder();
  xmlForm.load(document.Form.FormXML.value,xmlpForm.rootElement);

  // draws interface for adding, deleting, and resizing columns (column slider)
  function DrawTabs() {
    var L = "";
    var iIndex = LayoutRowSelector.Key;
    var iTab = 0;
    for (var i=iIndex+1; i<xmlForm.elements.length && xmlForm.element(i).level > xmlForm.element(iIndex).level; i++) {
      xmleElem = xmlForm.element(i);
      if (xmleElem.name == "CELL") {
        L += '<td style="width:' + xmleElem.attribute("WIDTH") + '"'
          + ' index=' + i
          + ' tab=' + iTab
          + ' onmousedown="StartDrag(this);" class="HashTD"'
          + ' onclick=AddTab() style="font-size:12px">
          + '<img scr="../images/spacer.gif" width=4 height=10 style="cursor:move" class="DragSpacerGif"></td>';
        iTab++;
      }
    }
    L = '<table id=TabSettings border=1 bordercolor="#0033ff" bgcolor="#ffffff" cellspacing=0 cellpadding=0 '
      + 'style="TABLE-LAYOUT:fixed; overflow: hidden;'
      + ' border: 1px thin; border-left: #0033ff 1px solid; border-right: #0033ff 1px solid" class="TabTable">'
      + '<tr tabcount=' + iTab + '>'
      + L
      + '</tr></table>';

    document.all["TabsHTML"].innerHTML = L;
    document.all["TabSettingPane"].style.display = 'inline';
  }
    load

    Takes either a REXML XML Element or a string of XML, if a string of XML is passed it will still need REXML to load the XML.



JSXMLIterator

JSXMLIterator iterates through the tree structure of a REXML XMLElement object without using recursion. It's easy to iterate tree structures with recursion, but costly. Avoiding recursion saves valuable time.

This example is the same as above but instead of only revealing the child elements of the root element it shows all the elements in the document.
function ShowXML(strXML) {
    var xmlDoc = new REXML(strXML);
    
    for (var xmlIterator=new JSXMLIterator(xmlDoc.rootElement); xmlIterator.getNextNode();) {
        alert("Child element of type " + xmlIterator.xmleElem.type);
    }
}


Methods
    getNextNode()

    Moves to the next element and sets xmleElem
    Returns true if there is a next element, false if the end of the document has been reached.
Properties
    xmleElem

    The current XML Element