codestory

Analysieren Sie XML in Javascript mit DOMParser

  1. DOMParser
  2. Das Beispiel mit DOMParser

1. DOMParser

DOMParser ist eine Interface, die die Fähigkeit der Analyse von Source Kode XML oder HTML aus einem String zu einem DOM Document versorgt.
Constructor:
// Create a DOMParser


var parser = new DOMParser();
Analysieren Sie die Source Code XML/HTML in einem DOM Document:
var parser = new DOMParser();

// XMLDocument object:
var doc1 = parser.parseFromString(xmlString, "text/xml");


// Document object:
var doc2 = parser.parseFromString(xmlString, "text/html");
DOMParser kann die Source Code XML nicht analysieren wenn die Source Code ungültig ist. Aber es wirft einen Fehler nicht. Stattdessen gibt es ein Objekt Document mit der Fehlerinformation zurück. Und das Objekt Document hat die etwas unterschiedlichen Inhalt mit der verschiedenen Browsers aber enthalt immer ein Tag <parsererror>.
...
<parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml">

   (error description)

   <sourcetext>(a snippet of the source XML)</sourcetext>

</parsererror>
...
Sie sollen eine Utility Funktion schreiben um XML zu analysieren. Diese Funktion wirft den Fehler wenn XML ungültig ist.
Utility Function
// Utility function:
// Return XMLDocument, or throw an Error!
function parseXML(xmlString) {
    var parser = new DOMParser();
    // Parse a simple Invalid XML source to get namespace of <parsererror>:
    var docError = parser.parseFromString('INVALID', 'text/xml');
    var parsererrorNS = docError.getElementsByTagName("parsererror")[0].namespaceURI;
    // Parse xmlString:
    // (XMLDocument object)
    var doc = parser.parseFromString(xmlString, 'text/xml');
    if (doc.getElementsByTagNameNS(parsererrorNS, 'parsererror').length > 0) {
        throw new Error('Error parsing XML');
    }
    return doc;
}
Achtung: Durch die Verwendung von XMLHttpRequest zum Lesen einer Datenquelle XML aus einem URL können Sie ein Objekt XMLDocument empfangen.

2. Das Beispiel mit DOMParser

DOMParser wird ein XML in einem DOM-Baum (DOM Tree) analysieren (wie folgend). Sie sollen die API benutzen, die durch das Model DOM angeboten werden um die notwendigen Daten abzurufen.
domparser-example.html
<!DOCTYPE html>
<html>

<head>
    <title>DOMParser Example</title>
    <meta charset="UTF-8">

    <script src="domparser-example.js"></script>

</head>

<body>

    <h3>DOMParser example</h3>
    <a href="">Reset</a> <br><br>

    <button onclick = "clickHandler(event)">Click Me</button>
    <br><br>

    <textarea id="textarea-log" rows="15" style="width:100%;"></textarea>

</body>

</html>
domparser-example.js
// Utility function:
// Return XMLDocument, or throw an Error!
function parseXML(xmlString) {
    var parser = new DOMParser();
    // Parse a simple Invalid XML source to get namespace of <parsererror>:
    var docError = parser.parseFromString('INVALID', 'text/xml');
    var parsererrorNS = docError.getElementsByTagName("parsererror")[0].namespaceURI;
    // Parse xmlString:
    // (XMLDocument object)
    var doc = parser.parseFromString(xmlString, 'text/xml');
    if (doc.getElementsByTagNameNS(parsererrorNS, 'parsererror').length > 0) {
        throw new Error('Error parsing XML');
    }
    return doc;
}

// XML String:
var xmlString = "<?xml version = '1.0'?>" +
    "<class> " +
    "   <student rollNo = '393'> " +
    "      <fullName>Putin</fullName> " +
    "      <nickName>putin</nickName> " +
    "      <marks>95</marks> " +
    "   </student> "

    +
    "   <student rollNo = '493'> " +
    "      <fullName>Trump</fullName> " +
    "      <nickName>trump</nickName> " +
    "      <marks>90</marks> " +
    "   </student> "

    +
    "   <student rollNo = '593'> " +
    "      <fullName>Kim</fullName> " +
    "      <nickName>kim</nickName> " +
    "      <marks>85</marks> " +
    "   </student> " +
    "</class> ";


function clickHandler(evt) {

    console.log(xmlString);
    var doc;

    try {
        // XMLDocument object:
        doc = parseXML(xmlString);
        console.log(doc.documentElement);
    } catch (e) {
        alert(e);
        return;
    }
    resetLog();

    // Element object. <--> <class>
    var rootElement = doc.documentElement;
    //
    var children = rootElement.childNodes;

    for(var i =0; i< children.length; i++) {
       var child = children[i];
       // <studen> Element
       if(child.nodeType == Node.ELEMENT_NODE)  {
           var rollNo = child.getAttribute("rollNo");
           var fullNameElement = child.getElementsByTagName("fullName")[0];
           var nickNameElement = child.getElementsByTagName("nickName")[0];
           var marksElement = child.getElementsByTagName("marks")[0];

           var fullName = fullNameElement.textContent;
           var nickName = nickNameElement.textContent;
           var marks = marksElement.textContent;

           appendLog("rollNo: " + rollNo);
           appendLog("fullName: " + fullName);
           appendLog("nickName: " + nickName);
           appendLog("marks: " + marks);
       }
    }

}


function resetLog() {
    document.getElementById('textarea-log').value = "";
}

function appendLog(msg) {
    document.getElementById('textarea-log').value += "\n" + msg;
}
-
Mehr sehen:

Anleitungen ECMAScript, Javascript

Show More

Anleitungen ECMAScript, Javascript

Show More

Neueste Artikel

Show More