نحوه خراش دادن داده ها از یک صفحه وب با استفاده از جاوا اسکریپت Vanilla

در این آموزش، نحوه استفاده از جاوا اسکریپت در ابزارهای توسعه دهنده مرورگر برای حذف داده ها از هر صفحه وب را بررسی خواهیم کرد.

اگر تا به حال مجبور شده اید که داده ها را از یک صفحه وب به صورت دستی در قالبی متفاوت مانند صفحه گسترده یا یک شی داده جمع آوری کنید، می دانید که این یک فرآیند بسیار تکراری و خسته کننده است!

خوشبختانه، اکثر مرورگرها دارای ابزارهایی هستند که به شما امکان می دهند هر صفحه وب را تا جایی که می خواهید دستکاری کنید. این ابزارها ابزارهای توسعه دهنده نامیده می شوند (که معمولاً به آنها گفته می شود ابزار توسعه) و معمولاً توسط توسعه دهندگان وب برای اشکال زدایی وب سایت ها استفاده می شود. ما از آنها در این آموزش استفاده خواهیم کرد.

بسته به مرورگری که استفاده می کنید، راه های مختلفی برای دسترسی به ابزارهای توسعه دهنده وجود دارد: کروم، سافاری، فایرفاکس یا مایکروسافت اج. رایج ترین راه این است که کلیک راست کنید (یا کنترل + کلیک) در صفحه وب و انتخاب کنید بازرسی کنید گزینه.

هنگامی که ابزارهای توسعه دهنده خود را باز کردیم، دو تبی که از آنها استفاده خواهیم کرد عبارتند از عناصر برگه و کنسول برگه

را عناصر پانل تمام عناصر HTML موجود در یک صفحه وب را به ما نشان می دهد کنسول پانل به ما امکان می دهد کد جاوا اسکریپت را مستقیماً در صفحه وب بنویسیم.

2. شناسایی عناصر

مرحله بعدی شناسایی عناصری است که می خواهیم از صفحه وب حذف کنیم.

برای مثال، فرض کنید می‌خواستیم فهرستی از آموزش‌های نوشته شده توسط نویسنده Tuts+ را دریافت کنیم. ابزارهای توسعه دهنده را روی آن باز می کنیم نویسنده صفحه و مشخص کنیم که کدام عنصر را می‌خواهیم با استفاده از علامت خراش دهیم ابزار انتخابگر را بازرسی کنید.

3. هدف قرار دادن عنصر

مرحله بعدی هدف قرار دادن عنصر از کنسول پنل با استفاده از جاوا اسکریپت راه های مختلفی برای هدف قرار دادن عناصر با استفاده از جاوا اسکریپت وجود دارد و در این آموزش ما از این روش ها استفاده خواهیم کرد querySelectorAll() و querySelector().

در مثال بالا، می‌خواهیم تمام عناصر را با نام کلاس هدف قرار دهیم posts_post. با تایپ دستور زیر در پنل کنسول می توانیم این کار را انجام دهیم:

let posts = document.querySelectorAll('.posts_post');

حالا یک متغیر داریم posts که حاوی عناصری است که می خواهیم داده ها را از آنها جمع آوری کنیم.

4. دستکاری عناصر با جاوا اسکریپت

از آنجایی که می‌خواهیم داده‌ها را از یک صفحه وب حذف کنیم، باید شناسایی کنیم که چه داده‌هایی را می‌خواهیم جمع‌آوری کنیم. در این مثال، اجازه دهید تا را جمع آوری کنیم عنوان و شرح از هر آموزش

بیایید تابعی بنویسیم که به ما امکان می دهد عنوان و توضیحات را از هر کدام جمع آوری کنیم li.posts_post در ما posts متغیر.

با بازگشت به صفحه وب و بررسی مجدد عناصر، می بینیم که متن عنوان در a قرار دارد h1 تگ و متن توضیحات در a موجود است div با نام کلاس posts_post-teaser.

برای هدف قرار دادن این عناصر، دستور زیر را در کنسول می نویسیم:

let postsObj = [...posts].map(post => (
  {
    title: post.querySelector('h1').innerText,
    description: post.querySelector('.posts__post-teaser').innerText
  } 
));

بیایید آنچه را که در کد بالا اتفاق می‌افتد را تفکیک کنیم:

• یک متغیر جدید ایجاد کنید postsObj برای ذخیره داده های دستکاری شده
• استفاده از a نحو گسترش یافته […] برای تبدیل ما posts متغیر از a NodeList به یک آرایه
• استفاده کنید نقشه تابع برای حلقه زدن از طریق آرایه پست ها و انجام دستکاری در هر پست
• را هدف قرار دهید h1 و posts__post-teaser عناصر داخل پست و مقادیر innerText آنها را در داخل کلیدهای شی ذخیره کنید عنوان و شرح
• یک مقدار شی که شامل جفت کلید و مقدار تعریف شده است را برگردانید

این چیزی است که مقدار out postsObj برمی گرداند:

5. نتیجه

برای جمع بندی، برای حذف هر گونه داده از صفحه، ما:

1. به ابزارهای توسعه دهنده مرورگر دسترسی پیدا کنید
2. با استفاده از ابزار inspect عنصر را شناسایی کنید
3. از پنل کنسول برای هدف قرار دادن و جمع آوری داده ها از عناصر استفاده کنید
4. داده ها را در یک شی جاوا اسکریپت با استفاده از روش نقشه ذخیره کنید

البته، نوشتن دستی کد جاوا اسکریپت در ابزارهای توسعه دهنده تنها راه برای خراش دادن داده ها در یک صفحه وب نیست و تعداد زیادی افزونه اسکراپر وب وجود دارد که بدون نیاز به نوشتن کد، عملکرد مشابهی را ارائه می دهند.

با این حال، این روش برای آشنایی با ابزارهای توسعه دهنده در مرورگر و درک نحوه دستکاری داده ها با جاوا اسکریپت بسیار مفید است.