أحدث البرامج التعليمية وتطوير الشبكة
 

XML DOM تعليمي

❮ السابق التالي الفصل ❯

يحدد DOM معيارا للوصول إلى والتلاعب الوثائق.

يعرض DOM XML وثيقة XML مثل شجرة هيكل.

دوم HTML يقدم وثيقة HTML مثل شجرة هيكل.

فهم DOM أمر لا بد منه لأي شخص يعمل مع HTML أو XML.

XML DOM شجرة مثال

DOM شجرة العقدة

ما هو DOM؟

يحدد DOM معيارا للوصول إلى وثائق مثل XML و HTML:

"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

يتم فصل DOM إلى 3 أجزاء مختلفة / مستويات:

  • Core DOM - نموذج موحد لأية وثيقة منظمة
  • XML DOM - النموذج القياسي للمستندات XML
  • HTML DOM - النموذج القياسي للمستندات HTML

يحدد DOM على objects and properties من كل عناصر المستند، و methods (interface) للوصول إليها.

وHTML DOM

دوم HTML يحدد وسيلة معيارية للوصول إلى والتلاعب مستندات HTML.

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

يحدد DOM HTML على objects, properties and methods من جميع عناصر HTML.

تغيير القيمة من عنصر HTML

يتغير هذا المثال قيمة عنصر HTML مع معرف = "عرض":

مثال

<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 containes واحدة فقط <h1> عنصر لا يزال لديك لتحديد مؤشر مجموعة [0]، لأن getElementsByTagName() الأسلوب بإرجاع دائما صفيف.

يمكنك أن تتعلم الكثير عن DOM HTML في منطقتنا البرنامج التعليمي جافا سكريبت .

وDOM XML

يحدد DOM XML وسيلة معيارية للوصول إلى والتلاعب وثائق XML.

يمكن الوصول إلى جميع عناصر XML من خلال DOM XML.

يحدد DOM XML على objects, properties and methods من جميع عناصر XML.

وDOM XML هو:

  • نموذج كائن القياسي لXML
  • واجهة البرمجة القياسية لXML
  • برمجيات منصات ولغة مستقلة
  • وهناك معيار W3C

وبعبارة أخرى: The XML DOM is a standard for how to get, change, add, or delete XML elements.

الحصول على قيمة عنصر 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 (xhttp.readyState == 4 && xhttp.status == 200) {
    myFunction(xhttp);
    }
};
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 - الكائن DOM XML التي تم إنشاؤها بواسطة محلل.
  • getElementsByTagName("title")[0] - الحصول على أول <title> العنصر
  • childNodes[0] - الطفل الأول من <title> عنصر (عقدة النص)
  • nodeValue - قيمة عقدة (the text itself)

تحميل سلسلة XML

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

مثال

<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>
انها محاولة لنفسك »

واجهة برمجة

وXML نماذج DOM كمجموعة من الأشياء العقدة. العقد يمكن الوصول إليها مع جافا سكريبت أو غيرها من لغات البرمجة. في هذا البرنامج التعليمي استخدام جافا سكريبت.

يتم تعريف واجهة برمجة لDOM من الخصائص والأساليب مجموعة المعيار.

Properties وغالبا ما يشار إلى ما هو (أي nodename هو "الكتاب").

Methods وغالبا ما يشار إلى أن شيئا ما يتم (أي حذف "كتاب").

خصائص DOM XML

هذه هي بعض خصائص DOM النموذجية:

  • x.nodeName - اسم س
  • x.nodeValue - قيمة x
  • x.parentNode - العقدة الأصل من س
  • x.childNodes - العقد التابعة ل x
  • x.attributes - سمات العقد من س

ملاحظة: في القائمة أعلاه، x هو كائن عقدة.

طرق DOM XML

  • x.getElementsByTagName( name ) - الحصول على جميع العناصر مع اسم العلامة المحدد
  • x.appendChild( node ) - إدراج عقدة الطفل إلى x
  • x.removeChild( node ) - إزالة عقدة الطفل من س

ملاحظة: في القائمة أعلاه، x هو كائن عقدة.


❮ السابق التالي الفصل ❯