دليل لمحددات HTML لكشط الويب

تعد محددات HTML أساسية في عملية كشط الويب، مما يسمح للمطورين باستهداف عناصر محددة على صفحة ويب. باستخدام هذه المحددات، يمكن للمطورين استخراج البيانات بدقة.

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

يؤدي استخدام محددات HTML إلى تبسيط عملية استخراج البيانات بشكل فعال وتقليل الأخطاء. فهي تساعدك على التركيز على العناصر المهمة، مما يوفر الوقت والجهد في جمع الرؤى من المصادر عبر الإنترنت.

في هذه المدونة، سنستكشف في هذه المدونة كيفية استخدام المحددات أدناه مع Python ومكتبة"Beautifulsoup":

• محددات الهوية
• محددات الفئة
• محددات السمات
• المحددات الهرمية
• الجمع بين هذه المحددات معًا

محددات الهوية

في HTML، المعرفات هي معرّفات فريدة يتم تعيينها لعناصر محددة، مما يضمن عدم اشتراك عنصرين في نفس المعرف. هذا التفرّد يجعل محدّدات المعرّفات مثالية لاستهداف عناصر مفردة على صفحة ويب. على سبيل المثال، إذا كنت تقوم بكشط صفحة ويب تحتوي على أقسام متعددة، فقد يكون لكل قسم معرّفه الخاص، مما يسمح لك باستخراج البيانات من قسم معين دون تدخل.

لنأخذ على سبيل المثال هذا الموقع الإلكتروني، وخاصة العنصر أدناه <div id="pages"> ...</div>

يحتوي هذا العنصر على عناصر HTML متداخلة أخرى ولكن الشيء الرئيسي هو أن هذا العنصر فريد من نوعه في هذا الموقع ويمكننا الاستفادة من هذا السيناريو على سبيل المثال عندما نريد كشط أقسام معينة من الموقع. في هذه الحالة يتضمن هذا العنصر بعض المقالات الأخرى التي سنشرحها مع المحددات الأخرى أدناه. هنا كيف يبدو هذا القسم على الصفحة:

لنستكشف مثالًا مباشرًا باستخدام مكتبات "الطلبات" و "bs4" من بايثون:

import requests
from bs4 import BeautifulSoup
# Step 1: Send a GET request to the website
url = "https://www.scrapethissite.com/pages/"
response = requests.get(url)
if response.status_code == 200:
   # Step 2: Parse the HTML content with BeautifulSoup
   soup = BeautifulSoup(response.text, 'html.parser')
  
   # Step 3: Find the div with id="pages"
   pages_div = soup.find("div", id="pages")
  
   # Step 4: Display the content or handle it as needed
   if pages_div:
       print("Content of the div with id='pages':")
       print(pages_div.text.strip())
   else:
       print("No div with id='pages' found.")
else:
   print(f"Failed to retrieve the webpage. Status code: {response.status_code}")

الشرح:

• إرسال طلب: ترسل مكتبة الطلبات طلب GET لجلب محتوى HTML من عنوان URL الهدف.
• تحليل HTML: يقوم BeautifulSoup بتحليل HTML، مما يسمح لنا بالبحث في بنية المستند.
• Find Specific <div>: نحن نستخدم حساء.find("div"، معرف="صفحات") لتحديد موقع <div> عنصر مع معرف = "الصفحات".
• عرض المحتوى: إذا كان <div> موجودة، نقوم بطباعة محتواها. إذا لم يتم العثور عليه، تظهر رسالة تشير إلى أنه مفقود.

قيود محددات محددات الهوية:

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

محددات الفئة

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

لنأخذ مثالًا مرة أخرى باستخدام هذا الموقع الإلكتروني. حدَّدنا أعلاه <div id="pages"> عنصر باستخدام محدد الهوية وفي عناصر هذا القسم هناك بعض المقالات التي لها نفس الفئة.

كما ترون لدينا أربعة عناصر من نفس الفئة <div class="page">

إليك كيف تبدو على الموقع الإلكتروني:

في الشيفرة أدناه، سنقوم بتحديد جميع العناصر ذات الفئة "صفحة"، والتي ستُعيد قائمة يمكن استخدامها لمزيد من التحليل.

import requests
from bs4 import BeautifulSoup
# Step 1: Send a GET request to the website
url = "https://www.scrapethissite.com/pages/"
response = requests.get(url)
if response.status_code == 200:
   # Step 2: Parse the HTML content with BeautifulSoup
   soup = BeautifulSoup(response.text, 'html.parser')
  
   # Step 3: Find all elements with class="page"
   page_elements = soup.find_all("div", class_="page")
  
   # Step 4: Save each element's text content in a list
   pages_list = [page.text.strip() for page in page_elements]
  
   print("Content of elements with class 'page':")
   for i, page in enumerate(pages_list, start=1):
       print(f"Page {i}:")
       print(page)
       print("-" * 20)
else:
   print(f"Failed to retrieve the webpage. Status code: {response.status_code}")

الشرح:

• إرسال طلب: نحن نستخدم الطلبات لإرسال طلب GET إلى عنوان URL، واسترداد محتوى HTML لصفحة الويب.
• تحليل HTML مع BeautifulSoup: إذا نجح الطلب، يقوم BeautifulSoup بتحليل HTML، مما يتيح لنا البحث عن العناصر والتفاعل معها.
• البحث عن العناصر حسب الفئة: نحن نستخدم soup.find_all("div", class_="page") لتحديد موقع كل <div> عناصر بفئة "صفحة"، وإعادتها كقائمة.
• الحفظ في قائمة: نستخرج المحتوى النصي لكل عنصر وننظفه، ونحفظه في قائمة تسمى pages_list.

حدود محددات محددات الفئة

عند استخدام محددات الفئات، ضع في اعتبارك المشكلات المحتملة مثل تحديد عناصر غير مقصودة. قد تتطلب الفئات المتعددة على عنصر واحد تصفية إضافية لتحقيق استهداف دقيق.

محددات السمات

تسمح لك محدِّدات السمات باستهداف العناصر استنادًا إلى وجود سمات معينة أو قيمتها أو قيمتها الجزئية داخل علامات HTML. وهذا مفيد بشكل خاص عندما لا تكون الفئات أو المعرفات فريدة أو عندما تحتاج إلى تصفية العناصر ذات السمات الديناميكية، مثل البيانات-* أو التكريم القيم في الروابط.

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

في التعليمات البرمجية التالية، نستخدم الحساء الجميل لتحليل كل <img> العناصر، واستخراج ص ص السمات وتخزينها في قائمة.

import requests
from bs4 import BeautifulSoup
# Step 1: Send a GET request to the website
url = "https://www.scrapethissite.com/pages/frames/"
response = requests.get(url)
if response.status_code == 200:
   # Step 2: Parse the HTML content with BeautifulSoup
   soup = BeautifulSoup(response.text, 'html.parser')
  
   # Step 3: Find all <img> elements with a 'src' attribute
   image_elements = soup.find_all("img", src=True)
  
   # Step 4: Save the 'src' attributes in a list
   images_list = [img['src'] for img in image_elements]
  
   print("Image sources found on the page:")
   for i, src in enumerate(images_list, start=1):
       print(f"Image {i}: {src}")
else:
   print(f"Failed to retrieve the webpage. Status code: {response.status_code}")

حدود محددات محددات الفئة

يمكن لمحدِّدات السمات تحديد العناصر ذات السمات الثابتة فقط، مما يجعلها أقل فعالية للمحتوى الديناميكي، مثل العناصر التي يتم تحميلها من خلال JavaScript. كما أنها تعتمد على بنيات HTML ثابتة، لذا يمكن أن تؤدي التغييرات المتكررة في تخطيط الموقع الإلكتروني إلى تعطيلها. كما أنها لا تستطيع إدارة التصفية المعقدة أو الشروط المتعددة، مما يحد من دقتها. قد تلتقط أيضًا عناصر غير مقصودة إذا كانت سمات مثل الفئة أو الاسم مشتركة بين عناصر متعددة.

المحددات الهرمية

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

في هذا المثال، نستخدم في هذا المثال المحددات الهرمية لكشط البيانات من جدول إحصائيات فريق الهوكي الموجودة على صفحة الويب هذه.
يحتوي الجدول على صفوف <tr> تمثل كل فريق، ويحتوي كل صف على خلايا <td> بمعلومات مثل اسم الفريق والسنة والفوز والخسارة. يحتوي كل صف على الفئة = "فريق"وتحديده كمدخل ذي صلة في بياناتنا. من خلال التنقل من <table> to each <tr> and then to each <td>، يمكننا التقاط البيانات بكفاءة بطريقة منظمة.

أدناه، ستجد صورتين لمساعدتك على تصور مكان هذا الجدول في بنية HTML وكيفية ظهوره على صفحة الويب الفعلية.

والآن، لننظر إلى الشيفرة أدناه لنرى كيف يمكن استخدام المحددات الهرمية لاستخراج هذه البيانات:

import requests
from bs4 import BeautifulSoup

url = "https://www.scrapethissite.com/pages/forms/"

# Step 1: Send a GET request to the website
response = requests.get(url)

if response.status_code == 200:
   # Step 2: Parse the HTML content with BeautifulSoup
   soup = BeautifulSoup(response.text, 'html.parser')
  
   # Step 3: Find all rows in the table with class="team"
   teams_data = []
   team_rows = soup.find_all("tr", class_="team")
  
   # Step 4: Extract and store each team's data
   for row in team_rows:
       team = {
           "name": row.find("td", class_="name").text.strip(),
           "year": row.find("td", class_="year").text.strip(),
           "wins": row.find("td", class_="wins").text.strip(),
           "losses": row.find("td", class_="losses").text.strip(),
           "ot_losses": row.find("td", class_="ot-losses").text.strip(),
           "win_pct": row.find("td", class_="pct").text.strip(),
           "goals_for": row.find("td", class_="gf").text.strip(),
           "goals_against": row.find("td", class_="ga").text.strip(),
           "goal_diff": row.find("td", class_="diff").text.strip(),
       }
       teams_data.append(team)
  
   # Step 5: Display the extracted data
   for team in teams_data:
       print(team)
else:
   print(f"Failed to retrieve the webpage. Status code: {response.status_code}")

حدود المحددات الهرمية

تعتمد المحدِّدات الهرمية على بنية HTML، لذا فإن التغييرات في التخطيط يمكن أن تؤدي بسهولة إلى كسر البرنامج النصي للكشط. كما أنها تقتصر على المحتوى الثابت ولا يمكنها الوصول إلى العناصر المحملة ديناميكيًا بواسطة JavaScript. غالبًا ما تتطلب هذه المحددات تنقلًا دقيقًا من خلال العلاقات بين الوالدين والطفل، وهو ما قد يكون صعبًا في البنى المتداخلة العميقة. بالإضافة إلى ذلك، يمكن أن تكون غير فعالة عند استخراج البيانات المبعثرة، حيث يجب أن تجتاز مستويات متعددة للوصول إلى عناصر محددة.

استخدام محددات مدمجة لاستهداف أفضل

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

import requests
from bs4 import BeautifulSoup
# Target URL
url = "https://www.scrapethissite.com/pages/"
response = requests.get(url)
if response.status_code == 200:
   # Step 2: Parse the HTML content with BeautifulSoup
   soup = BeautifulSoup(response.text, 'html.parser')
  
   # Use ID selector to find the main content
   main_content = soup.find(id="pages")
  
   # Use class selector to find each "page" section
   pages = main_content.find_all("div", class_="page") if main_content else []
  
   # Extract details from each "page" section using hierarchical selectors
   for page in pages:
       # Use hierarchical selector to find title link and URL within each "page"
       title_tag = page.find("h3", class_="page-title")
       title = title_tag.text.strip() if title_tag else "No Title"
       link = title_tag.find("a")["href"] if title_tag and title_tag.find("a") else "No Link"
      
       # Use class selector to find the description
       description = page.find("p", class_="lead session-desc").text.strip() if page.find("p", class_="lead session-desc") else "No Description"
      
       print(f"Title: {title}")
       print(f"Link: {link}")
       print(f"Description: {description}")
       print("-" * 40)
else:
   print(f"Failed to retrieve the webpage. Status code: {response.status_code}")

شرح المدونة

• محدد المعرف: نبدأ بتحديد موقع منطقة المحتوى الرئيسية بالمعرف = "صفحات"، والتي تحتوي على الأقسام التي نحتاجها.
• محدد الفئة: داخل هذه المنطقة الرئيسية، نستخدم صنف="صفحة" للعثور على كل كتلة محتوى فردية تمثل قسمًا ذا أهمية.
• المحددات الهرمية: ضمن كل كتلة "صفحة"، نستخدم
  • page.find("h3", class_="page-title") للعثور على العنوان
  • title_tag.find("a")["href"] لاسترداد عنوان URL للرابط من علامة الارتباط في العنوان.
• محدد السمات: نصل إلى سمة href لكل رابط لالتقاط عناوين URL الدقيقة المرتبطة بكل قسم.
• الإخراج: يطبع البرنامج النصي عنوان كل قسم والرابط والوصف الخاص بكل قسم، مما يعطي عرضًا منظمًا للبيانات التي تم كشطها من الصفحة.

الخاتمة

في كشط الويب، يمكن أن تؤدي معرفة كيفية استخدام محددات HTML إلى تحسين مهاراتك في استخراج البيانات بشكل كبير، مما يتيح لك جمع المعلومات المهمة بدقة. المحددات مثل المعرف والفئة والسمة والمحددات الهرمية لكل منها استخدامات محددة لمهام الكشط المختلفة. باستخدام هذه الأدوات معًا، يمكنك التعامل مع مجموعة واسعة من تحديات كشط الويب بثقة.

وللتدريب، تقدم مواقع مثل Scrape This Site و Books to Scrape أمثلة رائعة لمساعدتك في صقل مهاراتك. وإذا كنت بحاجة إلى أي مساعدة أو ترغب في التواصل مع الآخرين المهتمين بكشط الويب، فلا تتردد في الانضمام إلى قناة Discord الخاصة بنا على https://discord.com/invite/scrape.

كشط سعيد!