برنامج XML DOM التعليمي
XML DOM
ما هو DOM؟
يحدد DOM معيارًا للوصول إلى المستندات ومعالجتها:
يحدد HTML DOM طريقة قياسية للوصول إلى مستندات HTML ومعالجتها. يقدم مستند HTML كبنية شجرة.
يحدد XML DOM طريقة قياسية للوصول إلى مستندات XML ومعالجتها. يقدم وثيقة XML كهيكل شجرة.
يعد فهم DOM أمرًا ضروريًا لأي شخص يعمل باستخدام HTML أو XML.
HTML DOM
يمكن الوصول إلى جميع عناصر HTML من خلال HTML DOM.
يغير هذا المثال قيمة عنصر HTML بالمعرف = "demo":
مثال
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
يغير هذا المثال قيمة العنصر <h1> الأول في مستند HTML:
مثال
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>
ملاحظة: حتى لو احتوى مستند HTML على عنصر <h1> واحد فقط ، فلا يزال يتعين عليك تحديد فهرس المصفوفة [0] ، لأن طريقة getElementsByTagName () تُرجع مصفوفة دائمًا.
يمكنك معرفة المزيد حول HTML DOM في برنامج JavaScript التعليمي الخاص بنا .
XML DOM
يمكن الوصول إلى جميع عناصر XML من خلال XML DOM.
XML DOM هو:
- نموذج كائن قياسي لـ XML
- واجهة برمجة قياسية لـ XML
- النظام الأساسي واللغة مستقلة
- معيار W3C
بمعنى آخر: يعد XML DOM معيارًا لكيفية الحصول على عناصر XML أو تغييرها أو إضافتها أو حذفها.
احصل على قيمة عنصر XML
يسترد هذا الرمز القيمة النصية لعنصر <title> الأول في مستند XML:
مثال
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
تحميل ملف XML
ملف XML المستخدم في الأمثلة أدناه هو books.xml .
يقرأ هذا المثال "books.xml" في xmlDoc ويسترد القيمة النصية لعنصر <title> الأول في books.xml:
مثال
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}
</script>
</body>
</html>
شرح المثال
- xmlDoc - كائن XML DOM الذي تم إنشاؤه بواسطة المحلل اللغوي.
- getElementsByTagName ("title") [0] - احصل على أول عنصر <title>
- childNodes [0] - الطفل الأول لعنصر <title> (عقدة النص)
- nodeValue - قيمة العقدة (النص نفسه)
تحميل سلسلة XML
يقوم هذا المثال بتحميل سلسلة نصية في كائن XML DOM ، ويستخرج المعلومات منه باستخدام JavaScript:
مثال
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
واجهة البرمجة
يصمم DOM XML كمجموعة من كائنات العقدة. يمكن الوصول إلى العقد باستخدام JavaScript أو لغات برمجة أخرى. في هذا البرنامج التعليمي نستخدم JavaScript.
يتم تعريف واجهة البرمجة الخاصة بـ DOM من خلال مجموعة من الخصائص والأساليب القياسية.
غالبًا ما يشار إلى الخصائص على أنها شيء (أي أن الاسم العقدي هو "كتاب").
غالبًا ما يشار إلى الطرق على أنها شيء يتم القيام به (أي حذف "كتاب").
خصائص XML DOM
هذه بعض خصائص DOM النموذجية:
- x.nodeName - اسم x
- x.nodeValue - قيمة x
- x.parentNode - العقدة الأصل لـ x
- x.childNodes - العقد الفرعية لـ x
- x.attributes - سمات عقد x
ملاحظة: في القائمة أعلاه ، x هو كائن عقدة.
أساليب XML DOM
- x.getElementsByTagName ( name ) - احصل على جميع العناصر باسم علامة محدد
- x.appendChild ( عقدة ) - أدخل عقدة فرعية في x
- x.removeChild ( عقدة ) - إزالة عقدة فرعية من x
ملاحظة: في القائمة أعلاه ، x هو كائن عقدة.