Разбор XML в Javascript с помощью DOMParser

View more Tutorials:

Pуководства ECMAScript, Javascript

DOMParser
Пример с DOMParser

Сайт бесплатного изучения языков:

Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи.

Facebook

1- DOMParser

DOMParser это интерфейс, предоставляющий возможность парсировать исходный код XML или HTML из String в DOM Document.

Constructor:


// Create a DOMParser


var parser = new DOMParser();

Парсировать исходный код XML/HTML в 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 не может парисировать исходный код XML если данный исходный код недействителен, но он не выдает ошибку. Вмесо этого, он возвращает объект Document содержащий информацию ошибки. И данный объект Document này имеет немного разные содержания с разными браузерами, но всегда содержит тег (tag) <parsererror>.


...
<parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml">

   (error description)

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

</parsererror>
...

Вам стоит написать утилитарную функцию для парсирования XML, данная функция выбрасывает ошибки если XML не действителен.

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;
}

Примечание: Используя XMLHttpRequest для чтения исходных данных XML из URL вы можете получить объект XMLDocument.

Javascript XMLHttpRequest

2- Пример с DOMParser

DOMParser будет парсировать XML в дерево DOM (DOM Tree) (Похоже на изображение ниже). Вам нужно использовать API предоставленные моделью DOM чтобы получить нужные данные.

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;
}

Смотрите также:

Element (API)

Node (API)

View more Tutorials:

Pуководства ECMAScript, Javascript