در این بخش از آموزش xml میخواهیم مفهوم و نحوه ی کار با XML DOM را برای شما بیان می کنیم .
همانطور که قبلا گفته شد از XML DOM یک روش استاندارد برای دسترسی به اجزای یک فایل XML و همچنین خواندن و یا تغییر آنها را میتوان انجام داد.مدل XML DOM فایل XML را به شکل نمودار درختی تبدیل می کند به صورتی که PARENT مانند شاخه های درخت و فرزندان آن ها برگ ها می باشد..هر المنت و متن نوشته شده در فایل XML به عنوانیک گره یا node در صفحه شناخته شده و قابل دسترسی می باشد .در مثال زیر ، محتویات یک فایل XML به نام note.xml را خوانده و اجزای درونی آن را در یک شی به نام xmlDoc ریخته ایم . سپس به وسیله متد ( ) getElementsByTagName ، اجزای درونی آن را با یک تگ <div> ترکیب کرده ایم.
<?xml version="1.0" encoding="utf-8" ?>
<note>
<to> Hamed </to>
<from>Ali</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
کد و خروجی :
<html>
<body>
<h1> Developer1 Internal Note</h1>
<div>
<b>To:</b> <span id="to"></span><br />
<b>From:</b> <span id="from"></span><br />
<b>Message:</b> <span id="message"></span>
</div>
<script>
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest(); // ساخت یک شی جدید ایجکس برای ارتباط با سرور
}
xmlhttp.open("GET", "note.xml", false); // و خواندن آن XML باز کردن فایل
xmlhttp.send( ); // ارسال اطلاعات به سرور
xmlDoc = xmlhttp.responseXML; // xmlDoc در شی XML تجزیه و ریختن محتویات فایل
document.getElementById("to").innerHTML = xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML = xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML = xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
در این مقاله از طراحی سایت به نحوه کار با متد ( ) getElementsByTagName در XML DOM می پردازیم:
برای استخراج متن " Hamed " از المنت <to> ، ساختار دستوری آن به صورت زیر است . دقت داشته باشید که اگر حتی هر عنصر XML مثل <to> حتی دارای یک فرزند هم باشد ، شما بایستی اندیس آرایه که در اینجا 0 است را تعیین نمایید . زیرا متد ( ) getElementsByTagName ، با آرایه ها کار می کند .
getElementsByTagName("to")[0].childNodes[0].nodeValue ;