اختيار المحدد المناسب لكشط الويب: CSS أو XPath
هل تعرف ما هو المحدد الصحيح لاستخدامه في كشط الويب؟ كان كشط الويب شائعًا جدًا في العقد الأخير لاستخراج البيانات من الإنترنت. فهو يساعد الشركات في الحصول على البيانات وتحليلها لاتخاذ قرارات تجارية أفضل. وبفضل التقنيات الآلية، لم يكن كشط الويب أسهل مما هو عليه الآن.
Do you know which is the correct selector to use in web scraping? Web scraping has been quite popular in the recent decade to extract data from the internet. It helps businesses acquire and analyze data to make better business decisions. Thanks to automated technologies, web scraping has never been easier than it is now.
ومع ذلك، وبغض النظر عن الأداة أو إطار العمل الذي تختاره، يجب عليك اتخاذ قرار حاسم لضمان أن تقوم أداة الكشط بكشط البيانات بشكل مهذب. وهذا هو ما إذا كنت ستستخرج عناصر الويب باستخدام محددات XPath أو محددات CSS، والتي ستتعلمها في هذه المقالة.
دعنا نتعمق في بعض الأمثلة الموجودة.
ما هو محدد XPath؟
يرمز XPath إلى لغة مسار XML. ومع ذلك، فإنها تستخدم بناء جملة غير XML لتحديد علامات أو مجموعات من العلامات من مستند XML أو HTML، كما هو الحال مع كشط الويب. يمكّنك XPath من كتابة تعابير للوصول إلى عنصر HTML أو XML مباشرةً دون اجتياز شجرة HTML بأكملها.
لفهم كيف يمكنك الوصول إلى عنصر ما باستخدام XPath، دعنا نتعمق أكثر مع كود HTML. أفترض أنك تعرف بالفعل بعض أساسيات HTML.
<!doctype html>
<html xmlns=”http://www.w3.org/1999/xhtml” lang="en" xml:lang="en">
<head>
<meta charset="utf-8">
<title>Awesome Products at your Fingertips</title>
</head>
<body>
<h1>Description of product features</h1>
<p>These products are great. So let's just look at the features !</p>
<ul id="product-list" class=”basic-list”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
يمكنك كتابة الشيفرة أعلاه في محرر من اختيارك وحفظها بصيغة products.html. ثم يمكنك عرضه في متصفح (يُفضَّل أن يكون جوجل كروم حيث سنستعرض هذا المثال باستخدامه).
عندما يقوم المتصفح بتشغيل هذه التعليمات البرمجية، فإنه يقوم بصياغة HTML وإنشاء تمثيل شجري للعناصر. يُعرف باسم DOM (نموذج كائن المستند) بالشكل التالي:
يمكنك قراءة المزيد عن DOM على الرابط المذكور. الآن ينصب تركيزنا هنا على XPath حول كيفية الانتقال إلى كل عنصر من هذه العناصر مباشرةً دون اجتياز الشجرة بأكملها. لذا لنبدأ بالمصطلحات الأساسية لـ Xpath.
ما هي العقد؟
مع XPath، العنصر الأساسي هو العقدة. حسنًا، العقد هي ببساطة العناصر الفردية التي رأيتها للتو في شجرة DOM. بينما نمضي قدمًا في هذه المقالة، ستكتشف أكثر أن العقد تتكون من عناصر العلامات والسمات وقيم السلاسل المعينة لها، وهكذا. هناك سبعة في كل صفحة XML أو HTML، ودعنا نلقي نظرة على كل نوع عقدة عن كثب.
- Element node – These are the major tags in an HTML document. For instance, in our example, the elements nodes are <title>,<meta>,<body>,<h1>,<p>,<ul>,and <li>.
- Attribute node – You can provide elements nodes with properties to give them unique names or apply CSS styles. In this example, we have provided the <ul> element with attributes “id” and “class”. More on ids and classes later.
- Atomic values – these are the values that are inside the node elements. Over here, the atomic values are the text inside the <title>, <h1>,<p> and each of the three <li> elements.
في حين أن الثلاثة المذكورة أعلاه هي الأكثر أهمية، إلا أنه من الضروري أيضًا معرفة الأربعة التالية للعلم فقط.
- Namespace: Since XPath also deals with XML documents, it is a standard that specifies how you can use elements and attributes. It is identified by URI (Uniform Resource Identifier). For the latest HTML 5 version, you can set the namespace like this: <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>.
- التعليقات: هذه هي جزء التعليقات في مستند HTML أو XML الذي لا يعالجه المحول البرمجي أو المحلل اللغوي.
- Process instruction: As with the case of HTML documents, they are the nodes that link external files such as CSS and JavaScript files. For example, the<link> node to include CSS files and the <src> node to include JavaScript files.
- Root node: As you guessed it right, this is the topmost element of an HTML document: the <html> node.
ما هي العلاقة بين العقد؟
- Parent: These are the root elements of the DOM tree that are precisely one level up. Each element has exactly one parent. According to our example, the parent of <li> element is <ul>.
- Children: Children nodes are exactly one level down in the DOM tree. As per our example <h1>,<p> and <ul> elements are children of the <body> element.
- Siblings: These are the elements that share the same parent. In our example, both the <li> elements are siblings of the <ul> parent. Also <h1>,<p> and <ul> are siblngs as they belong to the same parent <body>.
- Descendants: Any elements that are one level down are descendants. For instance, the <title> element is a descendant of the <head> element.
- Ancestor: Any element level up in the DOM tree is called an ancestor. In our example <li> element’s ancestors are <ul>,<body> and <html>.
كيفية العثور على XPath لعنصر HTML؟
هناك طريقتان للقيام بذلك. أولاً، دعنا نوضح ذلك أو نبرمج مثالاً. كما ذكرت أعلاه، آمل أن تكون قد حفظته على قرصك المحلي وجاهز للعرض في متصفحك.
عند تحميل الصفحة، مرر الماوس فوق العنصر 1 وانقر بزر الماوس الأيمن فوقه. ثم حدد فحص من عناصر القائمة التي تظهر كما هو موضح في لقطة الشاشة أدناه:
Then you would be able to find the full XPath by clicking on the <li> element in the console and selecting “copy” from the drop-down menu, and then specifying “Copy full XPath as shown below:
ثم بعد لصقها في ملف نصي أو في مكان ما، ستحصل على:
/html/body/ul/li[1]
يُعرف هذا بالمسار المطلق. سأشرح أدناه كيفية اشتقاقه.
Step 1 => li[1] //Here one denotes the first li element
Step 2 => /li[1]
Step 3 => ul/li[1]
Step 4 => /ul/li[1]
Step 5 => body/ul/li[1]
Step 6 => /body/ul/li[1]
Step 7 => html/body/ul/li[1]
Step 8 => /html/body/ul/li[1]
المسار المطلق
With this method, you need to work your way backward, starting from the target element all the way back to the root element. You add a forward slash before the element you have just added as you write each element. So let’s look at how you could work out the XPath for the first <li> element manually:
على الرغم من أن الطريقة أعلاه تبدو طويلة، إلا أنها ستساعدك على فهم كيفية بناء XPath الكامل. والآن ننتقل إلى الطريقة النسبية.
المسار النسبي
//*[@id="product-list"]/li[1]
As you can see, it is pretty short, and the path is relative to the parent <ul> element. Since the <li> element does not have an id attribute, its relative path is relative to the <ul> element.
الفرق بين المسارات النسبية والمطلقة
تتمثل الاختلافات المهمة في أن XPath الكامل غير قابل للقراءة ويصعب الحفاظ عليه. والمشكلة الأخرى الواضحة هي أنه إذا كانت هناك تغييرات على أي عنصر بدءًا من العنصر الجذر، فلن يكون XPath المطلق صالحًا. لذلك من المنطقي استخدام XPath النسبي.
ومع ذلك، قبل التعليق على ذلك، دعنا أولاً نلقي نظرة على المزايا والعيوب.
مزايا وعيوب XPATH
المزايا
باستخدام XPath، لا داعي للقلق إذا كنت لا تعرف اسم عنصر ما لأنه يمكنك استخدام الدالة يحتوي للبحث عن التطابقات المحتملة. لذا، يمكنك الانتقال إلى أعلى DOM عند الاستعلام عن العناصر المراد كشطها.
الفائدة الأخرى المهمة لـ CSS هي أنها تعمل في المتصفحات القديمة مثل الإصدارات القديمة من Internet Explorer.
العيوب
كما تعلمت أعلاه، فإن أهم عيوبه هو سهولة كسره عند تغيير العناصر في المسار. قد يكون من الصعب فهمها مقارنةً بمحددات CSS التي ستجدها أدناه.
أيضًا، عند استرجاع العناصر من XPath، يكون أداءه أبطأ بكثير من أداء CSS.
ما هو محدد CSS؟
كما تعلم، يرمز CSS إلى Cascading Style Sheets المستخدمة بشكل بارز في تصميم عناصر HTML في صفحة الويب. تتضمن هذه الأنماط تطبيق الألوان على الخط، وصور الخلفية، والألوان، ومحاذاة العناصر وتحديد مواقعها، وزيادة/إنقاص المسافات بين الفقرات.
لتعيين نمط إلى عنصر HTML، تحتاج إلى تحديده من خلال محدد CSS. لنبدأ بمثال بسيط يبدأ بالترميز في القسم التالي.
كيف يتم إنشاء محددات CSS؟
<h1 id="main-heading" class="header-styles" name="h1name">What are CSS Selectors?</h1>
لذا إليك محدد CSS للعنصر أعلاه:
- <h1>-selects by the element name <h1>
- #العنوان الرئيسي - # يحدد معرّف العنصر
- .header-styles - تشير النقطة إلى اسم الفئة
- [الاسم="h1name"] - يمكنك تحديد السمات بين قوسين مربعين.
يمكنك الجمع بينهما أيضاً:
h1.header-styles-يحدد محدد CSS هذا محدد CSS عناصر h1 التي تحتوي على أنماط رأس الفئة.
المحددات المتقدمة
يُستخدم العامل > لاختيار الأبناء. في المقابل، يختار المشغّل + المشغّل + الشقيق الأول، ويُستخدم المشغّل ~ لاختيار جميع الأشقاء. فيما يلي بعض الأمثلة على ذلك:
- ul#product-list > li – selects <li> elements which are children of <ul> with id of product-list.
- ul#product-list li – selects <li> elements which are descendent of <ul> with id of product-list.
- ul#product-list + li – selects first <li> element after <ul> with id of product-list.
- ul#product-list ~ li – Selects all <li> elements after the <ul> with id of product-list.
مزايا وعيوب استخدام محددات CSS
المزايا
على عكس XPath، الذي لا يدعمه الحساء الجميل، فإن محددات CSS مدعومة بأكثر مكتبات الكشط فعالية. أيضًا، على عكس XPath، فإن محددات CSS أسهل في التعلم والصيانة. تدعمها جميع المتصفحات تقريبًا، باستثناء المتصفحات القديمة التي تقل عن الإصدار 8 من Internet Explorer. ومع ذلك، نادرًا ما يستخدم الناس هذه المتصفحات في هذا العصر.
العيوب
على الرغم من إخراج الإصدارات الأقدم من Internet Explorer من المعادلة، إلا أنه لا يزال هناك تناقضات في كيفية عرضها على المتصفحات المختلفة.
بما أن هناك إصدارات مختلفة من CSS، فقد يؤدي ذلك إلى حدوث ارتباك بين المطورين والمبتدئين على حد سواء.
عامل حيوي آخر في تقنية الويب اليوم هو أمان CSS.
ما هي الاختلافات بين محددات CSS و XPath؟
الفرق الواضح بين XPath و CSS هو أن XPath ثنائي الاتجاه. هذا يعني أنّه بإمكانك الاجتياز في كلا الاتجاهين في شجرة DOM. في حين يمكنك فقط الاجتياز من العقدة الأصل إلى العقد التابعة باستخدام CSS، وهو ما يُعرف بالتدفق أحادي الاتجاه.
كما تمت مناقشته في الأقسام السابقة، فإن XPath أصعب في الصيانة وليس مرشحًا جيدًا لسهولة القراءة الفعالة. من ناحية أخرى، على الرغم من أن XPath قد يعمل في المتصفحات القديمة، إلا أن طريقة عرضه تختلف من متصفح إلى آخر.
لذلك في هذا الصدد، فإن نظام CSS له الأفضلية.
ما الذي يجب أن تختار بين الاثنين؟
تبرز XPATH لأن CSS لا يمكنها العبور من الآباء إلى الأبناء إلا في مناطق محددة مثل العبور لأعلى شجرة DOM. بقدر ما يتعلق الأمر بالسرعة، تتفوق CSS.
ومع ذلك، فإن الفرق في السرعة بين XPath و CSS لا يُعتد به كثيرًا عندما يتعلق الأمر بكشط الويب. هناك عوامل أخرى يجب أخذها في الاعتبار، مثل وقت استجابة الشبكة في تجريف الويب.
سيكون CSS هو خيارك الأول عندما يتعلق الأمر بالحساء الجميل لأنه لا يدعم XPath.
الخاتمة
لا توجد إجابة دقيقة حول المحددات التي يجب استخدامها لمشروع كشط الويب الخاص بك. كما اكتشفت في هذه المقالة، فإن XPath له الأفضلية في حالات معينة، بينما تبرز CSS في حالات أخرى.
لذلك، عليك أن تضع في اعتبارك نقاطاً حيوية محددة مثل العبور ودعم المتصفح وبعض الإمكانيات التقنية التي ناقشناها. نأمل أن تتدرب على ما تعلمته وتتابع المزيد من المقالات.