آیا میدانید انتخابگر صحیح برای استفاده در خراش دادن وب کدام است؟ اسکرپینگ وب در دهه اخیر برای استخراج داده ها از اینترنت بسیار محبوب بوده است. این به کسب و کارها کمک می کند تا داده ها را به دست آورند و تجزیه و تحلیل کنند تا تصمیمات تجاری بهتری بگیرند. به لطف فناوریهای خودکار، خراش دادن وب هرگز آسانتر از آنچه اکنون است نبوده است.
با این حال، صرفنظر از ابزار یا چارچوبی که انتخاب میکنید، باید تصمیم مهمی بگیرید تا مطمئن شوید که اسکراپر شما دادهها را مودبانه میخراشد. این یعنی استخراج عناصر وب با استفاده از انتخابگرهای XPath یا CSS، که در این مقاله خواهید آموخت. زبان. با این حال، از دستور غیر XML برای انتخاب برچسب ها یا گروه هایی از برچسب ها از یک سند XML یا HTML استفاده می کند، مانند خراش دادن وب. XPath شما را قادر می سازد تا عباراتی بنویسید تا به یک عنصر HTML یا XML مستقیماً بدون عبور از کل درخت HTML دسترسی داشته باشید.
برای درک اینکه چگونه میتوانید با استفاده از XPath به یک عنصر دسترسی پیدا کنید، اجازه دهید با یک کد HTML عمیقتر کاوش کنیم. من فرض میکنم که شما قبلاً برخی از HTML اولیه را میدانید.
محصولات عالی در دسترس شما
شرح ویژگیهای محصول
این محصولات عالی هستند. بنابراین بیایید فقط به ویژگیها نگاه کنیم!
- Item 1
- Item 2
- Item 3
شما میتوانید کد بالا را در ویرایشگر دلخواه خود تایپ کنید و آن را به عنوان products.html ذخیره کنید. سپس میتوانید آن را در یک مرورگر مشاهده کنید (ترجیحاً Google Chrome همانطور که در این مثال با آن مرور خواهیم کرد). آن را به عنوان DOM (مدل شیء سند) به شکل زیر میشناسند:

میتوانید اطلاعات بیشتری در مورد DOM در پیوند داده شده بخوانید. اکنون تمرکز ما در اینجا بر روی XPath است که چگونه می توان بلافاصله به هر یک از این عناصر پیمایش کرد بدون اینکه کل درخت را طی کنیم. بنابراین بیایید با اصطلاحات اولیه Xpath شروع کنیم.
Node ها چیست؟
در XPath، اساسی ترین عنصر یک گره است. خوب، گره ها به سادگی عناصر فردی هستند که شما در درخت DOM دیدید. همانطور که در این مقاله پیش می رویم، حتی بیشتر متوجه خواهید شد که گره ها از عناصر برچسب، ویژگی ها، مقادیر رشته های اختصاص داده شده به آن و غیره تشکیل شده اند. در هر صفحه XML یا HTML هفت عدد وجود دارد، و بیایید هر نوع گره را از نزدیک بررسی کنیم. به عنوان مثال، در مثال ما، گره های عناصر عبارتند از
،
،
- ، و
- 019-196،
- 0، [196] 196.0. می تواند گره های عناصر را دارای ویژگی هایی برای دادن نام های منحصر به فرد یا اعمال سبک های CSS باشد. در این مثال، عنصر
- را با ویژگیهای «id» و «class» ارائه کردهایم. بعداً درباره شناسهها و کلاسها بیشتر توضیح میدهید.
- مقادیر اتمی – اینها مقادیری هستند که در عناصر گره قرار دارند. در اینجا، مقادیر اتمی متن داخل
،
،
و هر یک از سه عنصر
- هستند. چهار مورد زیر را فقط برای اطلاعات بدانید.
- Namespace: از آنجایی که XPath با اسناد XML نیز سر و کار دارد، استانداردی است که نحوه استفاده از عناصر و ویژگی ها را مشخص می کند. توسط URI (شناسه منبع یکسان) شناسایی می شود. برای آخرین نسخه HTML 5، می توانید فضای نام را به این صورت تنظیم کنید: .
- نظرات: اینها قسمت نظرات یک سند HTML یا XML هستند که کامپایلر یا تجزیه کننده آن را پردازش نمی کند.[19659021]دستورالعمل فرآیند: مانند مورد اسناد HTML، آنها گره هایی هستند که فایل های خارجی مانند فایل های CSS و جاوا اسکریپت را به هم پیوند می دهند. به عنوان مثال، گره شامل فایل های CSS و گره
برای شامل فایل های جاوا اسکریپت. node.
رابطه بین گره ها چیست؟
- Parent: اینها عناصر ریشه درخت DOM هستند که دقیقاً یک سطح بالاتر هستند. هر عنصر دقیقاً یک والد دارد. طبق مثال ما، والد عنصر
-
- است. طبق مثال ما
- خواهر و برادر والدین
- هستند. همچنین
- اجداد عنصر
- ، و هستند.
- در کنسول و انتخاب «کپی» از فهرست باز شده پیدا کنید. منوی پایین، و سپس مشخص کردن «کپی کامل XPath همانطور که در زیر نشان داده شده است:
سپس پس از چسباندن آن در یک فایل متنی یا جایی، دریافت خواهید کرد: مسیر مطلق . در زیر توضیح خواهم داد که چگونه آن را استخراج کرده اید.
مرحله 1 => li[1] //در اینجا یکی نشان دهنده اولین عنصر li است. مرحله 2 => /li[1] مرحله 3 => ul/li[1] مرحله 4 => /ul/li[1] مرحله 5 => body/ul/li[1] مرحله 6 => /body/ul/li[1] مرحله 7 => html/body/ul/li[1] مرحله 8 => /html/body/ul/li[1]
مسیر مطلق
با این روش، باید مسیر خود را به سمت عقب حرکت کنید، از عنصر هدف شروع کنید تا به عنصر اصلی برگردید. هنگام نوشتن هر عنصر، قبل از عنصری که به تازگی اضافه کرده اید، یک اسلش رو به جلو اضافه می کنید. بنابراین بیایید ببینیم چگونه میتوانید XPath را برای اولین عنصر
- به صورت دستی کار کنید:
اگرچه روش فوق طولانی به نظر میرسد، به شما کمک میکند تا بفهمید چگونه XPath کامل را بسازید. اکنون به روش نسبی می پردازیم.
Relative Path
//*[@id="product-list"]/li[1]
همانطور که می بینید، بسیار کوتاه است و مسیر نسبت به عنصر والد
- است. از آنجایی که عنصر
- ویژگی id ندارد، مسیر نسبی آن نسبت به عنصر
- است.
تفاوت بین مسیرهای نسبی و مطلق
تفاوت های مهم این است که XPath کامل خوانا نیست و نگهداری آن سخت است. نگرانی آشکار دیگر این است که اگر تغییراتی در هر عنصری وجود داشته باشد که از عنصر ریشه شروع می شود، XPath مطلق معتبر نخواهد بود. بنابراین منطقی است که از XPath نسبی استفاده کنیم.
با این حال، قبل از توضیح بیشتر در مورد آن، اجازه دهید ابتدا به مزایا و معایب نگاه کنیم. اگر نام یک عنصر را نمی دانید، نباید نگران باشید، زیرا می توانید از تابع contain برای جستجوی مطابقت های احتمالی استفاده کنید. بنابراین، میتوانید هنگام جستجو برای خراش دادن موارد، DOM را بالا ببرید.
مزیت مهم دیگر CSS این است که در مرورگرهای قدیمیتر مانند نسخههای قدیمی اینترنت اکسپلورر کار میکند.
معایب
همانطور که یاد گرفتید. در بالا، مهم ترین نقطه ضعف آن زمانی که عناصر مسیر را تغییر می دهید، راحت تر شکسته می شود. درک آن در مقایسه با انتخابگرهای CSS که در زیر خواهید فهمید، دشوار است.
همچنین، هنگام بازیابی عناصر از XPath، عملکرد آن بسیار کندتر از CSS است.
انتخابگر CSS چیست؟
همانطور که می دانید، CSS مخفف عبارت Cascading Style Sheets است که به طور برجسته در شکل دادن به عناصر HTML در یک صفحه وب استفاده می شود. این سبکها شامل اعمال رنگها به فونت، تصاویر پسزمینه، و رنگها، تراز کردن و قرار دادن عناصر، و افزایش/کاهش فاصله بین پاراگرافها میشود.
برای تنظیم یک سبک برای یک عنصر HTML، باید آن را از طریق انتخابگر CSS مشخص کنید. بیایید با یک مثال ساده شروع کنیم که با نشانه گذاری در بخش بعدی شروع می شود.
انتخابگرهای CSS چگونه ایجاد می شوند؟
انتخاب کنندگان CSS چیست؟
بنابراین در اینجا انتخابگر CSS برای عنصر بالا آمده است:
-
– با نام عنصر
- #main-heading – #شناسه عنصر را مشخص میکند
- .header-styles – نقطه نشاندهنده نام کلاس است
- [name=”h1name”] – میتوانید ویژگیها را در براکت مشخص کنید.
میتوانید آنها را نیز ترکیب کنید:
h1.header-styles-این انتخابگر CSS عناصر h1 را با سبکهای هدر کلاس انتخاب میکند. برای انتخاب کودکان در مقابل، عملگر + اولین خواهر و برادر را انتخاب میکند و عملگر ~ برای انتخاب همه خواهر و برادرها استفاده میشود. چند نمونه به شرح زیر است:
- ul#product-list > li –
- عناصری را انتخاب می کند که فرزندان
- با شناسه لیست محصول هستند.
- ul#product-list li –
- را انتخاب می کند.
- ul#product-list + li – اولین عنصر
- بعد از
- را با شناسه فهرست محصول انتخاب میکند.
- ul#product. -list ~ li – همه عناصر
- را بعد از
- با شناسه لیست محصول انتخاب می کند.
مزایا و معایب استفاده از انتخابگرهای CSS
مزایا
برخلاف XPath که Beautiful Soup از آن پشتیبانی نمیکند، انتخابگرهای CSS با مؤثرترین کتابخانههای خراشینگ پشتیبانی میشوند. همچنین، برخلاف XPath، انتخابگرهای CSS برای یادگیری و نگهداری آسانتر هستند. تقریباً همه مرورگرها از آن پشتیبانی می کنند، به جز مرورگرهای قدیمی زیر اینترنت اکسپلورر نسخه 8. با این حال، مردم در عصر حاضر به ندرت از آن مرورگرها استفاده می کنند.
از آنجایی که نسخههای CSS مختلفی وجود دارد، میتوانند بین توسعهدهندگان و مبتدیان به طور یکسان سردرگمی ایجاد کنند.
یکی دیگر از عوامل حیاتی در فناوری وب امروزی، امنیت CSS است.
تفاوت بین انتخابگرهای CSS و XPath چیست؟
تفاوت ظاهری بین XPath و CSS این است که XPath دو جهته است. این بدان معنی است که شما می توانید در درخت DOM در هر دو جهت پیمایش کنید. با این حال، شما فقط می توانید از گره والد به گره های فرزند با CSS، که به عنوان جریان یک جهته شناخته می شود، عبور کنید.
همانطور که در بخش های قبلی بحث شد، نگهداری XPath سخت تر است و کاندیدای مناسبی برای خوانایی موثر نیست. از سوی دیگر، اگرچه XPath ممکن است در مرورگرهای قدیمی کار کند، اما نحوه رندر کردن آن از یک مرورگر به مرورگر دیگر متفاوت است. 19659005]XPATH متمایز است زیرا CSS فقط می تواند از والدین به فرزند در مناطق خاصی مانند عبور از درخت DOM عبور کند. تا آنجا که به سرعت مربوط می شود، CSS دارای برتری است.
با این حال، تفاوت سرعت بین XPath و CSS در مورد اسکراپینگ وب اهمیت زیادی ندارد. عوامل دیگری نیز وجود دارد که باید در نظر بگیرید، مانند تأخیر شبکه در حذف وب.
CSS اولین انتخاب شما در مورد سوپ زیبا خواهد بود زیرا از XPath پشتیبانی نمی کند.
نتیجه
پاسخ دقیقی وجود ندارد. انتخابگرهایی که برای پروژه خراش دادن وب خود استفاده کنید. همانطور که در این مقاله متوجه شدید، XPath در موقعیتهای خاص برتری دارد، در حالی که CSS در موقعیتهای دیگر برجسته است.
بنابراین، باید نکات حیاتی خاصی مانند پیمایش، پشتیبانی مرورگر و برخی از قابلیتهای فنی را که در مورد آنها بحث کردیم، در نظر بگیرید. امیدواریم آنچه را که آموخته اید تمرین کنید و منتظر مقالات بیشتر باشید.
-
- ویژگی id ندارد، مسیر نسبی آن نسبت به عنصر
،
و
- خواهر و برادر هستند زیرا به یک والدین تعلق دارند . برای مثال، عنصر
از نسل عنصر است. در مثال ما چگونه XPath یک عنصر HTML را پیدا کنیم؟
دو راه برای انجام این کار وجود دارد. ابتدا، اجازه دهید آن را نشان دهیم یا یک مثال کدنویسی کنیم. همانطور که در بالا ذکر کردم، امیدوارم آن را در دیسک محلی خود ذخیره کرده باشید و آماده باشید تا در مرورگر خود مشاهده شود.
وقتی صفحه بارگیری شد، ماوس خود را روی مورد 1 ببرید و روی آن کلیک راست کنید. سپس Inspect را از آیتمهای منو که در تصویر زیر نشان داده شده است انتخاب کنید:
سپس میتوانید XPath کامل را با کلیک بر روی عنصر
- اجداد عنصر
،
و
- عناصر فرزندان عنصر هستند. در مثال ما، هر دو عنصر
- خواهر و برادر والدین
- هستند. چهار مورد زیر را فقط برای اطلاعات بدانید.