كيفية تصفية و اجتياز شجرة DOM مع جافا سكريبت

هل تعلم أن هناك جافا سكريبت API مهمتها الوحيدة هي تصفية وتكرار من خلال العقد نريد من شجرة دوم؟ في الواقع ، ليست واحدة ولكن هناك اثنين من واجهات برمجة التطبيقات هذه: NodeIterator و TreeWalker. إنها تشبه بعضها بعضًا تمامًا ، مع بعض الاختلافات المفيدة. كلاهما يمكن إرجاع قائمة العقد الموجودة تحت عقدة جذر معينة أثناء الامتثال أي قواعد تصفية محددة مسبقا و / أو مخصصة تطبق عليهم.

يمكن أن تساعدنا الفلاتر المحددة مسبقًا المتوفرة في واجهات برمجة التطبيقات استهداف أنواع مختلفة من العقد مثل العقد النصية أو عناصر العقد ، والمرشحات المخصصة (التي تضيفها لنا) يمكن مزيد من تصفية حفنة, على سبيل المثال من خلال البحث عن العقد مع محتويات محددة. تم إرجاع قائمة العقد iterable, أي أنها يمكن أن تكون يحلق من خلال, ويمكننا العمل مع جميع العقد الفردية في القائمة.

كيفية استخدام NodeIterator API

ا NodeIterator كائن يمكن أن تنشأ باستخدام createNodeIterator () طريقة لل وثيقة جهة تعامل. هذه الطريقة يأخذ ثلاث حجج. أول واحد مطلوب ؛ هذا”ليالي عقدة الجذر التي تحمل كل العقد التي نريد تصفية.

الحجج الثانية والثالثة اختياري. هم ال مرشحات محددة مسبقا والعرف, على التوالي. المرشحات المحددة مسبقا متاحة للاستخدام ثوابت من NodeFilter موضوع.

على سبيل المثال ، إذا كان NodeFilter.SHOW_TEXT يضاف ثابت كمعلمة ثانية سيعود التكرار ل قائمة بجميع العقد النصية تحت عقدة الجذر. NodeFilter.SHOW_ELEMENT سيعود فقط عنصر العقد. انظر قائمة كاملة من جميع الثوابت المتاحة.

الوسيطة الثالثة (عامل التصفية المخصص) هي وظيفة التي تنفذ مرشح.

هنا هو مثال مقتطف الشفرة:

        
عنوان
 
 هذا هو غلاف الصفحة 
مرحبا
 
كيف حالكم?
 
 رسالة قصيرة بعض الرابط    

على افتراض أننا نريد أن استخراج محتويات جميع العقد النصية التي هي داخل #غلاف شعبة, هذه هي الطريقة التي نذهب بها باستخدام NodeIterator:

 var div = document.querySelector ('# wrapper')؛ var nodeIterator = document.createNodeIterator (div، NodeFilter.SHOW_TEXT)؛ بينما (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ()) ؛  / * إخراج وحدة التحكم [Log] هذا هو غلاف الصفحة [Log] مرحبًا [Log] [Log] كيف حالك؟ [دخول] * / 

ال nextNode () طريقة لل NodeIterator API إرجاع العقدة التالية في قائمة العقد النصية القابلة للتكرار. عندما نستخدمها في في حين حلقة للوصول إلى كل عقدة في القائمة ، نقوم بتسجيل المحتويات المشذبة من كل عقدة نصية في وحدة التحكم. ال referenceNode ممتلكات NodeIterator إرجاع العقدة التي يتم إرفاق التكرار بها حاليًا.

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

 var div = document.querySelector ('# wrapper')؛ var nodeIterator = document.createNodeIterator (div، NodeFilter.SHOW_TEXT، function (node) return (node.nodeValue.trim ()! == "")؟ NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT؛)؛ بينما (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ()) ؛  / * إخراج وحدة التحكم [Log] هذا هو غلاف الصفحة [Log] مرحبًا [Log] كيف حالك؟ * / 

وظيفة مرشح مخصص إرجاع ثابت NodeFilter.FILTER_ACCEPTإذا كانت عقدة النص غير فارغة, مما يؤدي إلى إدراج تلك العقدة في قائمة العقد التي سيتكرر التكرار عليها. على العكس من ذلك NodeFilter.FILTER_REJECT يتم إرجاع ثابت من أجل استبعاد العقد النصية الفارغة من قائمة العقد القابلة للتكرار.

كيفية استخدام TreeWalker API

كما ذكرت من قبل ، فإن NodeIterator و TreeWalker واجهات برمجة التطبيقات هي مشابهة لبعضها البعض.

TreeWalker يمكن أن تنشأ باستخدام createTreeWalker () طريقة لل وثيقة جهة تعامل. هذه الطريقة ، تماما مثل createNodeFilter (), يأخذ ثلاث حجج: العقدة الجذر ، عامل تصفية محدد مسبقًا ، ومرشح مخصص.

اذا نحن استخدم ال TreeWalker API بدلا من NodeIterator يبدو مقتطف الشفرة السابق كما يلي:

 var div = document.querySelector ('# wrapper')؛ var treeWalker = document.createTreeWalker (div، NodeFilter.SHOW_TEXT، function (node) return (node.nodeValue.trim ()! == "")؟ NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT؛)؛ بينما (treeWalker.nextNode ()) console.log (treeWalker.currentNode.nodeValue.trim ()) ؛  / * إخراج [سجل] هذا هو مجمع الصفحة [سجل] مرحبا [سجل] كيف حالك؟ * / 

بدلا من referenceNode, ال currentNode ممتلكات TreeWalker يستخدم API ل الوصول إلى العقدة التي يتصل بها التكرار حاليًا. بالإضافة الى nextNode () طريقة, Treewalker لديه طرق أخرى مفيدة. ال previousNode () طريقة (موجودة أيضا في NodeIterator) إرجاع العقدة السابقة من العقدة الراسية حاليا ل.

يتم تنفيذ وظائف مماثلة من قبل عقدة الأم(), firstChild (), الطفل الأخير(), previousSibling (), و nextSibling () أساليب. هذه الطرق هي متوفر فقط في TreeWalker API.

هنا مثال على ذلك الرمز إخراج الطفل الأخير من العقدة يرتكز التكرار على:

 var div = document.querySelector ('# wrapper')؛ var treeWalker = document.createTreeWalker (div، NodeFilter.SHOW_ELEMENT)؛ console.log (treeWalker.lastChild ())؛ / * الإخراج [سجل] 
كيف حالكم?
 * / 

أي API للاختيار

اختر ال NodeIterator API ، عندما كنت بحاجة الى مجرد التكرار بسيط لتصفية وحلقة من خلال العقد المحددة. واختيار TreeWalker API ، عندما كنت بحاجة إلى الوصول إلى عائلة العقد المصفاة, مثل أشقائهم على الفور.