دليل XML DOM

ما هو DOM؟

تعريف DOM طريقة استندارد لاستدعاء وتعديل المستندات:

W3C Document Object Model (DOM) هو واجهة غير مرتبطة بالمنصة واللغة تسمح للبرامج والسكربتات بتحديث ديناميكي محتوى، بنية وصفة المستند.

تعريف DOM HTML طريقة استاندارد لاستدعاء وتعديل مستندات HTML. إنه يعرض مستند HTML كشجرة.

تعريف XML DOM طريقة استاندارد لاستدعاء وتعديل مستندات XML. إنه يعرض مستند XML كشجرة.

لجميع من يستخدم HTML أو XML، ففهم DOM أمر ضروري.

HTML DOM

جميع عناصر HTML يمكن الوصول إليها من خلال DOM HTML.

مثال 1

هذا المثال يغير قيمة العنصر HTML الذي يحتوي على id="demo":

<h1 id="demo">هذا هو العنوان</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

جربها بنفسك

مثال 2

هذا المثال يغير قيمة العنصر <h1> الأول في ملف HTML:

<h1>هذا هو العنوان</h1>
<h1>هذا هو العنوان</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>

جربها بنفسك

ملاحظة:حتى لو كان ملف HTML يحتوي على عنصر <h1> واحد فقط، يجب عليك تحديد مؤشر المصفوفة [0]، لأن طريقة getElementsByTagName() دائمًا تعود بمصفوفة.

يمكنك تعلم المزيد حول HTML DOM في دروسنا باللغة الإنجليزية.

DOM لـ XML

يمكن الوصول إلى جميع عناصر 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>

جربها بنفسك

توضيح الأمثلة

  1. xmlDoc - كائن XML DOM المكون من معالج
  2. getElementsByTagName("title")[0] - الحصول على العنصر الأول <title>
  3. childNodes[0] - العنصر الأول للعنصر <title> (عنصر نصي)
  4. nodeValue - قيمة العنصر (النص نفسه)

تحميل نص XML

في هذا المثال، يتم تحميل نص字符串 إلى كائن DOM XML، واستخراج المعلومات باستخدام JavaScript:

مثال

<html>
<body>
<p id="demo"></p>
<script>
var text, parser, xmlDoc;
text = "<bookstore><book>" +
"<title>雅舍谈吃</title>" +
"<author>梁实秋</author>" +
"<year>2013</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 مكونة من مجموعة من الخصائص والمسائل المعايير.

الخصائصعادة ما يشير إلى ما هو الشيء (مثل nodename هو "book").

الأساليبعادة ما يشير إلى ما يمكن القيام به (مثل حذف "book" هذا الحركة).

خصائص DOM XML

هذه بعض الخصائص DOM المعتادة:

  • x.nodeName - الاسم الخاص بـ x
  • x.nodeValue - القيمة الخاصة بـ x
  • x.parentNode - عناصر الأب الخاصة بـ x
  • x.childNodes - عناصر الأطفال الخاصة بـ x
  • x.attributes - عناصر الخصائص الخاصة بـ x

注释：في القائمة أعلاه، x هو كائن نقطة.

XML DOM 方法

  • x.getElementsByTagName(name) - 获取拥有指定标签名称的所有元素
  • x.appendChild(node) - 向 x 插入一个子节点
  • x.removeChild(node) - 从 x 中删除子节点

注释：在上面的列表中，x 是一个节点对象。