XML با جاوااسکریپت

جاوااسکریپت و XML

جاوااسکریپت ابزارهای داخلی خوبی برای کار با XML دارد. در این درس همه چیزهایی که در مرورگر نیاز دارید را یک‌جا مرور می‌کنیم:

۱. پارس XML با DOMParser

const xmlText = `<books>
    <book category="web"><title>XPath</title></book>
    <book category="dev"><title>XML Guide</title></book>
</books>`;

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlText, "text/xml");

// بررسی خطا
const error = xmlDoc.querySelector("parsererror");
if (error) {
    console.error("سند نامعتبر:", error.textContent);
}

۲. پیمایش عناصر

// با نام تگ
const books = xmlDoc.getElementsByTagName("book");

// با CSS Selector (روی XML هم کار می‌کند!)
const webBooks = xmlDoc.querySelectorAll('book[category="web"]');

// فرزندان و والد
const firstBook = books[0];
const title = firstBook.children[0];        // اولین فرزند
const parent = firstBook.parentNode;        // والد

// متن و ویژگی
console.log(title.textContent);             // "XPath"
console.log(firstBook.getAttribute("category"));

۳. ویرایش سند

// افزودن عنصر جدید
const newBook = xmlDoc.createElement("book");
newBook.setAttribute("category", "database");

const newTitle = xmlDoc.createElement("title");
newTitle.textContent = "SQL Guide";
newBook.appendChild(newTitle);

xmlDoc.documentElement.appendChild(newBook);

// حذف عنصر
books[0].parentNode.removeChild(books[0]);

۴. تبدیل XML به متن

const serializer = new XMLSerializer();
const xmlString = serializer.serializeToString(xmlDoc);
console.log(xmlString);

۵. XPath در جاوااسکریپت

// انتخاب با document.evaluate
const result = xmlDoc.evaluate(
    "//book[price > 30]/title",   // عبارت XPath
    xmlDoc,                        // گره شروع
    null,                          // resolver فضای نام
    XPathResult.FIRST_ORDERED_NODE_TYPE,
    null
);

const title = result.singleNodeValue;
console.log(title.textContent);

۶. دریافت XML از سرور

// روش ۱: XMLHttpRequest با responseXML
const xhr = new XMLHttpRequest();
xhr.open("GET", "data.xml");
xhr.onload = () => {
    const xmlDoc = xhr.responseXML;  // آماده پارس‌شده!
};
xhr.send();

// روش ۲: fetch + DOMParser
const res = await fetch("data.xml");
const text = await res.text();
const xmlDoc = new DOMParser().parseFromString(text, "text/xml");

۷. XML به JSON و برعکس

تبدیل دستی ساده:

function xmlToJson(xmlNode) {
    const obj = {};
    for (const child of xmlNode.children) {
        obj[child.tagName] = child.textContent;
    }
    return obj;
}

const bookJson = xmlToJson(books[0]);
// { title: "XPath", price: "35" }

مقایسه نهایی: XML یا JSON در جاوااسکریپت؟