هل تعرف ما هو المحدد الصحيح الذي يجب استخدامه في تجريف الويب؟ كان تجريف الويب شائعا جدا في العقد الأخير لاستخراج البيانات من الإنترنت. يساعد الشركات في الحصول على البيانات وتحليلها لاتخاذ قرارات تجارية أفضل. بفضل التقنيات الآلية ، لم يكن تجريف الويب أسهل مما هو عليه الآن.
هل تعرف ما هو المحدد الصحيح الذي يجب استخدامه في تجريف الويب؟ كان تجريف الويب شائعا جدا في العقد الأخير لاستخراج البيانات من الإنترنت. يساعد الشركات في الحصول على البيانات وتحليلها لاتخاذ قرارات تجارية أفضل. بفضل التقنيات الآلية ، لم يكن تجريف الويب أسهل مما هو عليه الآن.
ومع ذلك ، بغض النظر عن الأداة أو إطار العمل الذي تحدده ، يجب عليك اتخاذ قرار حاسم للتأكد من أن مكشطة البيانات الخاصة بك تتخلص من البيانات بأدب. هذا هو ما إذا كنت تريد استخراج عناصر الويب باستخدام محددات XPath أو CSS ، والتي ستتعلمها في هذه المقالة.
دعنا نتعمق في بعض الأمثلة الموجودة.
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. ثم يمكنك عرضه في متصفح (يفضل Google Chrome حيث سنستعرض هذا المثال معه).
عندما يقوم المستعرض بتشغيل هذا الرمز ، فإنه يقوم بصياغة HTML وإنشاء تمثيل شجرة للعناصر. يعرف باسم DOM (نموذج كائن المستند) بالشكل التالي:
يمكنك قراءة المزيد عن DOM على الرابط المحدد. ينصب تركيزنا هنا الآن على XPath حول كيفية الانتقال إلى كل عنصر من هذه العناصر على الفور دون اجتياز الشجرة بأكملها. لذلك دعونا نبدأ بالمصطلحات الأساسية ل Xpath.
مع XPath ، العنصر الأساسي هو العقدة. حسنا ، العقد هي ببساطة العناصر الفردية التي رأيتها للتو في شجرة DOM. بينما نمضي قدما في هذه المقالة ، ستكتشف أيضا أن العقد تتكون من عناصر العلامة والسمات وقيم السلاسل المخصصة لها وما إلى ذلك. هناك سبعة في كل صفحة XML أو 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]يعرف هذا بالمسار المطلق. سأشرح أدناه كيف اشتقته.
الخطوة 1 = > li[1] //هنا يشير المرء إلى عنصر li الأول
الخطوة 2 => / li[1]
الخطوة 3 = > ul / li [1]
الخطوة 4 => / ul / li [1]
الخطوة 5 = > الجسم / ul / li [1]
الخطوة 6 = > / الجسم / ul / li[1]
الخطوة 7 = > html / body / ul / li [1]
الخطوة 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 ، لا داعي للقلق إذا كنت لا تعرف اسم عنصر ما لأنه يمكنك استخدام وظيفة الاحتواء للبحث عن التطابقات المحتملة. لذلك ، يمكنك الصعود إلى DOM عند الاستعلام عن العناصر المراد كشطها.
الفائدة المهمة الأخرى ل CSS هي أنه يعمل في المتصفحات القديمة القديمة مثل الإصدارات القديمة من Internet Explorer.
كما تعلمت أعلاه ، فإن أهم عيوبه أسهل في كسرها عند تغيير العناصر في المسار. قد يكون من الصعب فهمه مقارنة بمحددات CSS التي ستجدها أدناه.
أيضا ، عند استرداد العناصر من XPath ، يكون أدائها أبطأ بكثير من أداء CSS.
كما تعلم بالفعل ، يرمز CSS إلى أوراق الأنماط المتتالية المستخدمة بشكل بارز في تصميم عناصر HTML في صفحة الويب. تتضمن هذه الأنماط تطبيق الألوان على الخط وصور الخلفية والألوان ومحاذاة العناصر وتحديد موضعها وزيادة / تقليل المسافات بين الفقرات.
لتعيين نمط إلى عنصر HTML ، تحتاج إلى تحديده من خلال محدد CSS. لنبدأ بمثال بسيط يبدأ بالترميز في القسم التالي.
<h1 id="main-heading" class="header-styles" name="h1name">What are CSS Selectors?</h1>إذن هذا هو محدد CSS للعنصر أعلاه:
يمكنك الجمع بينهما أيضا:
h1.header-styles-يحدد محدد CSS هذا عناصر h1 بأنماط رأس الفئة.
يتم استخدام عامل التشغيل > لتحديد الأطفال. في المقابل ، يختار عامل التشغيل + الأخ الأول ، ويتم استخدام عامل التشغيل ~ لاختيار جميع الأشقاء. بعض الأمثلة هي كما يلي:
على عكس XPath ، الذي لا يدعمه Beautiful Soup ، يتم دعم محددات CSS مع مكتبات الكشط الأكثر فعالية. أيضا ، على عكس XPath ، فإن محددات CSS أسهل في التعلم والصيانة. تدعمه جميع المتصفحات تقريبا ، باستثناء المتصفحات القديمة أسفل الإصدار 8 من Internet Explorer. ومع ذلك ، نادرا ما يستخدم الأشخاص هذه المتصفحات في هذا اليوم وهذا العصر.
على الرغم من إخراج الإصدارات القديمة من Internet Explorer من المعادلة ، فقد لا يزال هناك تناقضات مع كيفية عرضها على مستعرضات مختلفة.
نظرا لوجود العديد من إصدارات CSS ، فقد تخلق ارتباكا بين المطورين والمبتدئين على حد سواء.
عامل حيوي آخر في تكنولوجيا الويب اليوم هو أمان CSS.
الفرق الواضح بين XPath و CSS هو أن XPath ثنائي الاتجاه. هذا يعني أنه يمكنك العبور في كلا الاتجاهين في شجرة DOM. ومع ذلك ، يمكنك فقط الانتقال من العقدة الأصل إلى العقد الفرعية باستخدام CSS ، والمعروفة باسم التدفق أحادي الاتجاه.
كما تمت مناقشته في الأقسام السابقة ، يصعب الحفاظ على XPath وليس مرشحا جيدا لسهولة القراءة الفعالة. من ناحية أخرى ، على الرغم من أن XPath قد يعمل في المتصفحات القديمة ، إلا أن طريقة عرضه تختلف من متصفح إلى آخر.
لذلك في هذا الصدد ، فإن CSS لديه الحافة.
يبرز XPATH حيث لا يمكن ل CSS المرور إلا من الوالدين إلى الطفل في مناطق محددة مثل اجتياز شجرة DOM. بقدر ما يتعلق الأمر بالسرعة ، فإن CSS لديه الحافة.
ومع ذلك ، فإن فرق السرعة بين XPath و CSS لا يحسب كثيرا عندما يتعلق الأمر بكشط الويب. هناك عوامل أخرى يجب مراعاتها ، مثل زمن انتقال الشبكة في إلغاء الويب.
سيكون CSS هو خيارك الأول عندما يتعلق الأمر بالحساء الجميل لأنه لا يدعم XPath.
لا توجد إجابة دقيقة حول المحددات التي يجب استخدامها لمشروع تجريف الويب الخاص بك. كما اكتشفت في هذه المقالة ، فإن XPath لديه ميزة في مواقف معينة ، بينما يبرز CSS في مواقف أخرى.
لذلك ، تحتاج إلى مراعاة نقاط حيوية محددة مثل العبور ودعم المتصفح وبعض القدرات التقنية التي ناقشناها. نأمل أن تمارس ما تعلمته وأن ترقب المزيد من المقالات.