إفادة! ! ، هذه المقالة عبارة عن إعادة طبع لمقالة شخص آخر، لأنه تم استخدامها وشعرت أنها عملية للغاية، لذلك التقطتها لاستخدامها في المستقبل! !
شكرا للمؤلف الأصلي! ! ! ,
في تطوير تطبيقات الويب، وخاصة برامج الويب 2.0، غالبًا ما يكون من الضروري الحصول على عنصر في الصفحة ثم تحديث نمط العنصر ومحتواه وما إلى ذلك. إن كيفية الحصول على العناصر المراد تحديثها هي المشكلة الأولى التي يجب حلها. لحسن الحظ، هناك العديد من الطرق للحصول على العقد باستخدام JavaScript، فيما يلي ملخص مختصر (تم اختبار الطريقة التالية في IE7 وFirefox2.0.0.11):
1. احصل على عقدة مستند المستوى الأعلى:
(1) document.getElementById(elementId): يمكن لهذه الطريقة الحصول على العنصر المطلوب بدقة من خلال معرف العقدة، وهي طريقة بسيطة وسريعة نسبيًا. إذا كانت الصفحة تحتوي على عقد متعددة بنفس المعرف، فسيتم إرجاع العقدة الأولى فقط.
في الوقت الحاضر، هناك العديد من مكتبات JavaScript، مثل النموذج الأولي وMootools، والتي توفر طريقة أبسط: $(id)، ولا تزال المعلمة هي معرف العقدة. يمكن اعتبار هذه الطريقة طريقة أخرى لكتابة document.getElementById()، لكن وظيفة $() أكثر قوة للاستخدام المحدد، يرجى الرجوع إلى مستندات API الخاصة بها.
(2) document.getElementsByName(elementName): تحصل هذه الطريقة على العقدة باسمها، كما يتبين من الاسم، لا تُرجع هذه الطريقة عنصر عقدة، بل تُرجع مصفوفة من العقد بنفس الاسم. بعد ذلك، يمكننا التكرار خلال سمة معينة للعقدة لتحديد ما إذا كانت هي العقدة المطلوبة.
على سبيل المثال: في HTML، يستخدم كل من مربع الاختيار والراديو نفس قيمة سمة الاسم لتحديد العناصر داخل المجموعة. إذا أردنا الحصول على العنصر المحدد الآن، فسنحصل أولاً على العنصر المختلط، ثم نكرر لتحديد ما إذا كانت قيمة السمة المحددة للعقدة صحيحة.
(3) document.getElementsByTagName(tagName): تحصل هذه الطريقة على العقدة من خلال علامتها. تقوم هذه الطريقة أيضًا بإرجاع مصفوفة. على سبيل المثال: document.getElementsByTagName('A') سيُرجع جميع عقد الارتباط التشعبي الموجودة على الصفحة. قبل الحصول على العقدة، يكون نوع العقدة معروفًا بشكل عام، لذا فإن استخدام هذه الطريقة بسيط نسبيًا. لكن العيب واضح أيضًا، وهو أن المصفوفة التي تم إرجاعها قد تكون كبيرة جدًا، مما سيضيع الكثير من الوقت. إذن هل هذه الطريقة عديمة الفائدة؟ بالطبع لا، تختلف هذه الطريقة عن الطريقتين المذكورتين أعلاه، فهي ليست طريقة خاصة بعقدة المستند ويمكن تطبيقها أيضًا على العقد الأخرى، والتي سيتم ذكرها أدناه.
2. الحصول على العقدة الأصلية:
(1)parentObj.firstChild: يمكن استخدام هذه الطريقة إذا كانت العقدة هي العقدة الفرعية الأولى لعقدة معروفة (parentObj). يمكن استخدام هذه السمة بشكل متكرر، أي أنها تدعم شكلparentObj.firstChild.firstChild.firstChild...، بحيث يمكن الحصول على العقد الأعمق.
(2)parentObj.lastChild: من الواضح أن هذه السمة هي الحصول على العقدة الفرعية الأخيرة للعقدة المعروفة (parentObj). مثل firstChild، يمكن أيضًا استخدامه بشكل متكرر.
في الاستخدام، إذا جمعنا بين الاثنين، سنحقق نتائج أكثر إثارة، وهي:parentObj.firstChild.lastChild.lastChild...
(3)parentObj.childNodes: احصل على مصفوفة العقدة الفرعية لعقدة معروفة، ثم ابحث عن العقدة المطلوبة من خلال التكرار أو الفهرسة.
ملحوظة: بعد الاختبار، وجد أنه في IE7، ما يتم الحصول عليه هو مجموعة العقد الفرعية المباشرة، بينما في Firefox2.0.0.11، ما يتم الحصول عليه هو جميع العقد الفرعية، بما في ذلك العقد الفرعية للعقدة الفرعية.
(4)parentObj.children: احصل على مصفوفة العقدة الفرعية المباشرة لعقدة معروفة.
ملحوظة: بعد الاختبار، على IE7، التأثير هو نفس تأثير ChildNodes، لكن Firefox2.0.0.11 لا يدعمه. ولهذا السبب أستخدم أسلوبًا مختلفًا عن الطرق الأخرى. لذلك لا ينصح باستخدامه.
(5)parentObj.getElementsByTagName(tagName): لن يتم وصف طريقة الاستخدام بالتفصيل، فهي تُرجع مصفوفة من العقد الفرعية ذات القيمة المحددة بين جميع العقد الفرعية للعقدة المعروفة. على سبيل المثال:parentObj.getElementsByTagName('A') يُرجع كافة الارتباطات التشعبية في العقد الفرعية المعروفة.
3. الحصول على من العقد المجاورة:
(1) NeighbourNode.previousSibling: احصل على العقدة السابقة للعقدة المعروفة (neighbourNode). يبدو أن هذه السمة تُستخدم بشكل متكرر مثل firstChild وlastChild السابقين.
(2) NeighbourNode.nextSibling: احصل على العقدة التالية من العقدة المعروفة (neighbourNode)، كما يدعم التكرار.
4. الحصول على العقد الفرعية:
(1) ChildNode.parentNode: احصل على العقدة الأصلية لعقدة معروفة.
الطرق المذكورة أعلاه ليست سوى بعض الطرق الأساسية إذا كنت تستخدم مكتبات JavaScript مثل Prototype، فقد تحصل أيضًا على طرق مختلفة أخرى، مثل الحصول على فئة العقدة، وما إلى ذلك. ومع ذلك، إذا كان بإمكانك استخدام الطرق المختلفة المذكورة أعلاه بمرونة، فأعتقد أنك يجب أن تكون قادرًا على التعامل مع معظم البرامج.
لاحظ أن هذا مستند مستنسخ: ليس من المستحسن الحصول على عقدة HTML من خلال firstChild وlastChild. لأنه، اعتمادًا على المتصفح، قد يقوم firstChild بإرجاع كائن السمة الخاص بـparentObj.