مقارنة إطار عمل جافا سكريبت: اجتياز DOM

اجتياز DOM

يعد البحث عن العناصر بناءً على المعرف ونوع العنصر واسم الفئة أمرًا مفيدًا للغاية، ولكن ماذا لو كنت تريد العثور على عنصر بناءً على موضعه في شجرة DOM؟ بمعنى آخر، لديك عنصر معين وتريد العثور على أصله وأحد أبنائه وشقيقه العقدة السابقة أو التالية. على سبيل المثال، خذ تعليمات HTML البرمجية المجزأة التالية:

القائمة 1: جزء HTML (جدول)

<الجدول>
<الرأس>
<تر>
<th>الاسم</th>
<th>عنوان البريد الإلكتروني</th>
<th>الإجراءات</th>
</tr>
</الرأس>
<الجسم>
<tr معرف = "صف-001">
<td>جو لينون</td>
<td>[email protected]</td>
<td><a href="#">تحرير</a>&nbsp;
<a href="#">حذف</a></td>
</tr>
<tr معرف = "صف-002">
<td>جيل ماك سويني</td>
<td>[email protected]</td>
<td><a href="#">تحرير</a>&nbsp;
<a href="#">حذف</a></td>
</tr>
</tbody>
</الجدول>

تستخدم القائمة 1 المسافة البادئة للإشارة إلى موقع كل عقدة عنصر في شجرة DOM. في هذا المثال، عنصر الجدول هو العنصر الجذري وله عقدتان تابعتان، thead وtbody. يحتوي عنصر thead على عقدة فرعية tr، ويحتوي tr على ثلاثة عناصر فرعية - جميع العناصر. يحتوي عنصر tbody على عقدتين تابعتين tr، ولكل عقدة tr ثلاثة أطفال. تحتوي العقدة الثالثة في كل سطر أعلاه أيضًا على العقد الفرعية، وكلاهما عبارة عن علامتي ارتباط.

كما تعلم، يمكنك بسهولة تحديد عنصر حسب المعرف باستخدام وظيفة التحديد لإطار عمل JavaScript . في هذا المثال، هناك عنصرين بمعرفات، وهما عناصر tr بمعرفات الصف 001 والصف 002. لتحديد tr الأول باستخدام مكتبة النموذج الأولي، يمكنك استخدام الكود التالي:

var theRow = $('row-001');

في الفصل السابق، تعلمت أيضًا كيفية استخدام المحددات لاسترداد العناصر بناءً على نوعها أو فئتها. في هذا المثال، يمكنك استخدام بناء الجملة التالي للحصول على كافة عناصر td.

var allCells = $$('td');

المشكلة الرئيسية في تغيير الكود هي أنه يُرجع كل عنصر td. ولكن ماذا لو كنت تريد فقط الحصول على جميع عناصر td الخاصة بـ tr بمعرف الصف 001؟ هذا هو المكان الذي تلعب فيه وظائف اجتياز DOM. أولاً، دعونا نستخدم النموذج الأولي لتحديد جميع أبناء tr بمعرف الصف-001.

var firstRowCells = theRow.childElements();

سيؤدي هذا إلى إرجاع مصفوفة من كافة العناصر التابعة لمتغير الصف (tr الذي قمت بتعيينه في البداية باستخدام صف ID-001).

بعد ذلك، لنفترض أنك تريد فقط الحصول على العنصر الفرعي الأول في الصف. في هذه الحالة، هذا هو عنصر td الذي يحتوي على النص "Joe Lennon". للقيام بذلك، استخدم العبارة التالية:

var firstRowFirstCell = theRow.down();

بسيط جدا! هذا الاستخدام المحدد يعادل:

var firstRowFirstCell = theRow.childElements()[0];

ويمكن التعبير عنها أيضًا بهذه الطريقة:

var firstRowFirstCell = theRow.down(0);

تبدأ فهارس جافا سكريبت من الصفر، لذا فإن العبارة أعلاه تخبر جافا سكريبت بشكل أساسي بتحديد العنصر الفرعي الأول. لتحديد العنصر الفرعي الثاني (الخلية التي تحتوي على عنوان البريد الإلكتروني [email protected] )، يمكنك استخدام:

var firstRowSecondCell = theRow.down(1);

وبدلاً من ذلك، يمكنك تصفح DOM بين العقد الشقيقة. في هذا المثال، الخلية الثانية هي الشقيق التالي للخلية الأولى. لذلك، يمكنك استخدام العبارة التالية:

var firstRowSecondCell = firstRowFirstCell.next();

تمامًا كما تعمل الدالة down()، يمكن استخدام تحديد الخلية الثالثة بهذه الطريقة.

var firstRowThirdCell = firstRowFirstCell.next(1);

بالإضافة إلى استخدام الفهارس للعثور على عقد محددة، يمكن لمكتبة النموذج الأولي أيضًا استخدام بناء جملة محدد CSS. في القائمة 1، نبحث عن الرابط الثاني (رابط "الإزالة") الذي يحتوي على تفاصيل Jill Mac Sweeney.

var SecondRowSecondLink = $('row-002').down('a', 1);

في هذا المثال، استخدم الدالة $ للعثور على الصف ذو معرف الصف-002، والانتقال إلى العنصر التابع الثاني (المرساة).

تسمح بعض أطر العمل أيضًا بوظيفة الاجتياز "تسلسل ديزي"، مما يعني أنه يمكنك توصيل أوامر الاجتياز ببعضها البعض. في المثال أعلاه، تعبير آخر لمكتبة النموذج الأولي هو كما يلي:

var SecondRowSecondLink = $('row-002').down('a').next();

ألق نظرة على المثال التالي:

var domTraversal = $('row-001').down().up().next().previous();

كما ترى، يتيح لك التسلسل التعاقبي ربط بيانات اجتياز DOM المتعددة. في الواقع، المثال أعلاه ينتهي فعليًا إلى تحديد عنصر tr بمعرف الصف 001، وبالتالي فإن سلسلة ديزي تعود إلى حيث بدأت.

عنوان إعادة الطباعة: http://www.denisdeng.com/?p=708

العنوان الأصلي: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html