تحديد عنصر DOM XML

يمكن تحديد العقدة باستخدام العلاقات بين العقدات.

تحديد العقدة DOM

باستخدام العلاقات بين العقدات لتحديد العقدة في شجرة العقدات، يُطلق عليها عادةً "تحديد العقدة" (أو توجيه العقدة، navigating nodes).

في XML DOM، تعرف العلاقات بين العقدات بأنها خصائص العقدة:

  • parentNode
  • childNodes
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

الشكل التالي يعرض books.xml جزء من شجرة العقدات ويوضح العلاقات بين العقدات:

شجرة العناصر DOM

DOM - عقدة الأم

جميع العقدات لديها عقدة أم واحدة فقط. النص التالي يتحرك إلى عقدة الأم لـ <book>:

مثال

function myFunction(xml) {
var xmlDoc = xml.responseXML;
    var x = xmlDoc.getElementsByTagName("book")[0];
    document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}

جربها بنفسك

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

  1. تحويل books.xml تحميل إلى xmlDoc في
  2. الحصول على العنصر الأول من <book>
  3. عرض اسم العقدة الأم لـ "x"

تجنب العقدة النصية الفارغة

قد يعتبر بعض المتصفحات الفراغ أو السطور عقدة نصية. هذا قد يؤدي إلى مشاكل عند استخدام التوقيع التالي:

  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

لإزالة التوجيه إلى عقدة نصية فارغة (الفضاءات والسطور بين عناصر النص)، نستخدم دالة لتحقق من نوع العقدة:

function get_nextSibling(n) {}}
    var y = n.nextSibling;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}

مع هذه الوظيفة، يمكننا استخدام get_nextSibling(node) بدلاً من خاصية node.nextSibling.

توضيح الكود:

نوع العنصر للعنصر هو 1. إذا لم يكن العنصر في نفس المستوى عنصرًا، انتقل إلى العنصر التالي حتى تجد عنصرًا.

الحصول على العنصر الأول

أما الأنقاط التالية من الكود تظهر العنصر الأول للعنصر <book> الأول:

مثال

<!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;
    var x = get_firstChild(xmlDoc.getElementsByTagName("book")[0]);
    document.getElementById("demo").innerHTML = x.nodeName;
}
// التحقق من أن العنصر الأول هو عنصر
function get_firstChild(n) {
    var y = n.firstChild;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}
</script>
</body>
</html>

جربها بنفسك

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

  1. تحويل books.xml تحميل إلى xmlDoc
  2. استخدام وظيفة get_firstChild على العنصر الأول <book> للحصول على العنصر الأول
  3. إخراج اسم العنصر للعنصر الأول

مزيد من الأمثلة

lastChild()
استخدام طريقة lastChild() ووظيفة مخصصة للحصول على آخر فرع من العنصر.
nextSibling()
استخدام طريقة nextSibling() ووظائف مخصصة لاستخراج العقدة التالية للمساوية.
previousSibling()
استخدام طريقة previousSibling() ووظائف مخصصة لاستخراج العقدة السابقة للمساوية.