وظیفه ای که اغلب توسعه دهندگان مبتدی جاوا اسکریپت با آن مواجه می شوند، انتخاب یک عنصر در صفحه وب با ویژگی id آن است.

فرض کنید در یک صفحه کد داریم.

چگونه می توانم یک عنصر را با id="elem" انتخاب کنم و برخی اقدامات را با آن انجام دهم؟

در اینجا چندین گزینه برای حل مشکل وجود دارد. حالا بیایید نگاهی به آنها بیندازیم.

گزینه 1: از متد Javascript getElementById استفاده کنید.

راهی برای دسترسی به یک عنصر با شناسه آن با استفاده از کد جاوا اسکریپت خالص، بدون استفاده از کتابخانه های شخص ثالث وجود دارد. این روش برای استفاده از متد ggetElementById("element_id") است. بنابراین، ما به عنصر مورد نیاز خود با شناسه آن اشاره می کنیم.

بیایید ببینیم که چگونه با یک مثال ساده کار می کند.

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

در نتیجه، اگر همه چیز به درستی کار کند، یک پنجره پاپ آپ دریافت خواهیم کرد. این پنجره متنی را که در داخل بلوک div قرار دارد نمایش می دهد.

حال بیایید ببینیم چگونه می توانیم این مشکل را به روشی متفاوت حل کنیم.

گزینه 2. استفاده از کتابخانه Jquery.

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

برای اشاره به یک عنصر با شناسه آن، باید از ساختار زیر استفاده کنید:

$("#elem")

در اینجا elem نام موجود در ویژگی id است.

زیرا ما از شخص ثالث استفاده خواهیم کرد کتابخانه جاوا اسکریپتکه به آن Jquery می گویند، پس ابتدا باید این کتابخانه متصل شود.

در بخش اضافه شده است ، یک راه برای انجام این کار اضافه کردن خط کد زیر است:

برای اینکه کتابخانه بارگیری شود، باید اتصال اینترنت وجود داشته باشد.

خود اسکریپت، مانند مثال قبلی، باید زیر کد عنصری باشد که می‌خواهید با آن تعامل داشته باشید.

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

در آخرین درس، متد getElementsByTagName در نظر گرفته شد که یک آرایه ( گروه) عناصر صفحه بر اساس نام تگ.

اینجا ادامه دارد کار عملیبا جاوا اسکریپت و متد getElementById در نظر گرفته خواهد شد که است ارجاع به یک عنصر را برمی گرداند, بر اساس شناسه منحصر به فرد آن .

روش getElementById، درست مانند getElementsByTagName متدی از شی سند است.

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

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

توجه کنید e: هیچ s در نام متد در انتهای کلمه Element وجود ندارد ( برخلاف متد getElementsByTagName). این برای راحتی است و نشان می دهد که از روش برای انتخاب عنصر استفاده می شود.

چند توضیح برای قطعه کد بالا...

• تگ img ( تصاویر f) دارای شناسه - شناسه پنگوئن است.
• با استفاده از متد getElementById، این تگ img توسط شناسه پنگوئن انتخاب می شود.
• به یک متغیر منحصر بفرد لینک وارد شده استبه برچسب انتخاب شده؛
• سپس می توانید با برچسب کار کنید، مانند یک شی از طریق یک متغیرمنحصر به فرد، درست مانند کار با شی Date از طریق یک متغیر دلخواه.

پس از دسترسی به عنصر ( تگو) صفحه وب با شناسه با استفاده از متد getElementById، ما در حال حاضر با آن مانند یک Object کار می کنیم، به این معنی که به ویژگی های برچسب به عنوان ویژگی های Object دسترسی داریم.

بنابراین، مقادیر ویژگی از قبل مقادیر ویژگی هستند.

بیایید به مثال قبلی ادامه دهیم ...

"پنگوئن متفکر">

توضیحاتی برای کد نمونه ...

• تگ img ( تصاویر f) دارای ویژگی های خاصی است: src - آدرس فایل، عرض و ارتفاع - عرض و ارتفاع تصویر، alt - متن جایگزین.
• با دسترسی به تگ با استفاده از متد getElementById به عنوان یک شی، به ویژگی های برچسب دسترسی پیدا می کنیم. نحوه شیء کردن خصوصیات;
• ولی مقادیر ویژگیالان هست ارزش های دارایی;
• در جاوا اسکریپت، ویژگی های شی از طریق یک نقطه قابل دسترسی هستند. سپس، متن جایگزین تگ img را با استفاده از روش هشدار روی صفحه نمایش می دهیم.

امیدوارم با این همه گیج نشوید. شما باید به طور همزمان درک کنید که در سطح برنامه جاوا اسکریپت و در سطح نشانه گذاری سند چه اتفاقی می افتد.

تگ img یک شی منحصر به فرد است.

صفات عرض و alt تگ ویژگی های Object هستند.

مقادیر مشخصه "128" و "پنگوئن متفکر"ارزش اموال هستند؛

// در اینجا از منظر جاوا اسکریپت به نظر می رسد:

var منحصر به فرد = (

عرض: "128"

alt: "پنگوئن متفکر"

}

این روشی است که متد getElementById کار می کند و یک مرجع را به هر عنصر برمی گرداند ( برچسب زدن) از صفحه وب در صورتی که دارای شناسه منحصر به فرد باشد. بعد، ما با این عنصر در سطح جاوا اسکریپت کار می کنیم. مانند یک شی...

باید در نظر گرفت که: مانند درس قبل، در اینجا - هنگام کار با متد getElementById، خط فراخوانی اسکریپت باید در انتهای سند html قرار گیرد.

jQuery گزینه های دیگری را برای انتخاب عناصر یک سند وب فراهم می کند.

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

جستجو بر اساس شناسه

اگر در کد صفحه یک ویژگی id به عنصر داده شود، آنگاه می توان عنصر را با id پیدا کرد. این ساده ترین راه است. عنصر با استفاده از متد getElementById() شی جهانی سند جستجو می شود.

document.getElementById(id)

گزینه ها:

id - شناسه عنصری که باید پیدا شود. id یک رشته است، بنابراین باید در گیومه باشد.

بیایید یک صفحه ایجاد کنیم، یک عنصر به آن اضافه کنیم و به آن id بدهیم و این عنصر را در اسکریپت پیدا کنیم:

کد HTML:

جاوا اسکریپت:

var block = document.getElementById("block"); ورود به سیستم کنسول (بلاک)؛

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

از آنجایی که جستجو با شناسه ساده ترین و راحت ترین راه است، اغلب از آن استفاده می شود. اگر نیاز به کار با برخی از عناصر در یک اسکریپت دارید، ویژگی id برای این عنصر در کد صفحه تنظیم می شود، حتی اگر قبلا تنظیم نشده باشد. و عنصر را با شناسه پیدا کنید.

جستجو بر اساس کلاس

متد getElementsByClassName() به شما امکان می دهد تمام عناصر متعلق به یک کلاس خاص را پیدا کنید.

document.getElementsByClassName(class)

گزینه ها:

کلاس - کلاس عناصری که باید پیدا شوند

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

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

کد HTML:

جاوا اسکریپت:

اکنون فقط آن عناصری که در بلوک قرار دارند یافت می شوند.

جستجو بر اساس برچسب

متد getElementsByTagName() همه عناصر را با یک برچسب خاص پیدا می کند. همچنین یک شبه آرایه با عناصر پیدا شده برمی گرداند.

document.getElementsByTagName (برچسب)

گزینه ها:

برچسب - برچسب عناصری که باید پیدا شوند

بیایید تمام تگ های p را که در صفحه هستند پیدا کنیم:

var p = document.getElementsByTagName("p"); ورود به سیستم کنسول (p);

این روش همچنین می تواند نه برای کل سند، بلکه برای یک عنصر خاص اعمال شود. همه تگ های p را در بلوک پیدا کنید.

جستجو بر اساس انتخابگر

متدهای querySelector() و querySelectorAll() وجود دارند که عناصری را پیدا می کنند که با یک انتخابگر مشخص مطابقت دارند. یعنی عناصری پیدا می‌شوند که اگر این سبک برای چنین انتخاب‌کننده‌ای مشخص می‌شد، روی آنها اعمال می‌شد. در عین حال وجود چنین سلکتوری در استایل صفحه اصلا ضروری نیست. این روش ها هیچ ربطی به CSS ندارند. متد querySelectorAll() تمام عناصری را که با انتخابگر مطابقت دارند را پیدا می کند. و متد querySelector() یک عنصر را پیدا می کند که اولین عنصر در کد صفحه است. این روش‌ها می‌توانند جایگزین همه روش‌های یافتن عناصری شوند که قبلاً بحث شد، زیرا یک انتخابگر id، یک انتخابگر برچسب و بسیاری دیگر وجود دارد.

document.querySelector(Selector)

document.querySelectorAll(انتخاب کننده)

انتخابگرها به همان روشی که در CSS نوشته می شوند، فقط نقل قول را فراموش نکنید.

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

کد HTML:

این روش ها همچنین می توانند عناصر را نه در کل سند، بلکه در یک عنصر جستجو کنند.

در مثال، ما فقط از انتخابگرهای برچسب استفاده کردیم. سعی کنید عناصر صفحه را با استفاده از انتخابگرهای دیگر پیدا کنید.

عناصر مجاور

برای عنصر یافت شده، می توانید همسایگان را پیدا کنید. هر عنصر یک شی است و عناصر همسایه را می توان از طریق ویژگی های این شی به دست آورد. ویژگی previousElementSibling شامل عنصر قبلی و خاصیت nextElementSibling حاوی عنصر بعدی است.

element.previousElementSibling

element.nextElementSibling

عنصر زیر بلوک را پیدا کنید:

عناصر کودک

ویژگی Children شامل آرایه ای از فرزندان است.

عنصر.کودکان

عناصر فرزند بلوک را پیدا کنید.

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

وظیفه نیز بسیار رایج است. وقتی فیلمنامه‌هایم را می‌نویسم، باید اغلب از این انتخابگر استفاده کنم.

فرض کنید کد زیر را در یک صفحه داریم.

کار ساده است، شما باید یک عنصر با کلاس کلاس = "elem" را انتخاب کنید و با استفاده از جاوا اسکریپت برخی اقدامات را با آن انجام دهید.

بیایید به چند گزینه برای چگونگی انجام این کار نگاه کنیم.

گزینه 1: از متد Javascript getElementsByClassName استفاده کنید.

اگر از هیچ کتابخانه اضافی استفاده نمی کنید، می توانید با استفاده از روش getElementsByClassName("class_name") به عنصر دسترسی داشته باشید.

مثلاً در رابطه با کد منبع، می توانید خطوط کد زیر را اضافه کنید.

در نتیجه، اگر همه چیز به درستی کار کند، یک پنجره پاپ آپ دریافت می کنیم که در آن متنی که در داخل بلوک div قرار دارد نمایش داده می شود.

لطفاً توجه داشته باشید که نتیجه اجرای متد getElementsByClassName یک آرایه از عناصر خواهد بود. ممکن است چندین عنصر با یک کلاس در صفحه وجود داشته باشد.

به همین دلیل است که در انتهای ساختار document.getElementsByClassName("elem")، باید نشان دهید که عنصر صفر آرایه () نمایش داده شده است. شمارش در جاوا اسکریپت از صفر شروع می شود نه یک.

اما مشکل استفاده از متد getElementsByClassName این است که این روش در نسخه های قدیمی مرورگرها پشتیبانی نمی شود.

ترفندهایی برای دور زدن این موضوع وجود دارد، اما این کد اضافی است. به عنوان مثال، می توانید از عبارات منظم استفاده کنید:

If(document.getElementsByClassName == تعریف نشده) ( document.getElementsByClassName = function(cl) ( var retnode = ; var myclass = new RegExp("\\b"+cl+"\\b")؛ var elem = this.getElementsByTagName( "*")؛ برای (var i = 0; i< elem.length; i++) { var classes = elem[i].className; if (myclass.test(classes)) { retnode.push(elem[i]); } } return retnode; } };

این یکی از راه های حل مشکل است. اما، صادقانه بگویم، بستن صفحه با کدهای غیر ضروری برای من چندان قابل قبول نیست، بنابراین اغلب از راه حل دوم برای مشکل استفاده می کنم.

گزینه 2. استفاده از کتابخانه Jquery.

استفاده از کتابخانه Jquery حل مشکل انتخاب عناصر با ویژگی کلاس آنها را بسیار آسان می کند. شما باید از ساختار استفاده کنید:

$(.elem")

در اینجا elem نام کلاسی است که به عنصر اختصاص داده شده است.

لازم به یادآوری است که برای این کار، ابتدا باید کتابخانه Jquery گنجانده شود. در بخش اضافه شده است ، یک راه برای انجام این کار اضافه کردن خط کد زیر است:

برای اینکه کتابخانه بارگیری شود، باید اتصال اینترنت وجود داشته باشد.

بیایید ببینیم که چگونه این کار با یک مثال کار می کند.

خود اسکریپت، مانند مثال قبلی، باید زیر کد عنصری باشد که می‌خواهید با آن تعامل داشته باشید.

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

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

اگر نیاز به دسترسی به عنصری دارید که شناسه ندارد، تو می توانیاز querySelector() برای یافتن عنصر با استفاده از هر انتخابگر استفاده کنید.

نحو

var element = document.getElementById(id);

مولفه های

id شناسه عنصری که باید مکان یابی شود. شناسه یک رشته حساس به حروف کوچک و بزرگ است که در سند منحصر به فرد است. فقط یک عنصر ممکن است هر شناسه داده شده داشته باشد.

ارزش بازگشتی

یک شی Element که شی عنصر DOM را که با شناسه مشخص شده مطابقت دارد، توصیف می کند، یا اگر عنصر منطبقی در سند یافت نشد، null است.

مثال

HTML

چند متن اینجا

آبی قرمز

جاوا اسکریپت

تابع changeColor(newColor) ( var elem = document.getElementById("para"); elem.style.color = newColor; )

نتیجه

نکات استفاده

حروف بزرگ "Id" در نام این روش بایدبرای عملکرد کد صحیح باشد. getElementByID() است نهمعتبر است و کار نخواهد کرد، هر چند طبیعی به نظر برسد.

برخلاف برخی از روش‌های جستجوی عنصر دیگر مانند Document.querySelector() و Document.querySelectorAll()، getElementById() تنها به عنوان متد شی سند سراسری در دسترس است، و نهبه عنوان یک متد در تمام اشیاء عنصر در DOM موجود است. از آنجا که مقادیر شناسه باید در کل سند منحصر به فرد باشد، وجود ندارد نیاز بهنسخه های "محلی" تابع.

مثال

سلام کلمه 1

سلام کلمه 2

سلام word3

سلام word4

اگر هیچ عنصری با شناسه داده شده وجود نداشته باشد، این تابع null را برمی گرداند. توجه داشته باشید که پارامتر id به حروف کوچک و بزرگ حساس است، بنابراین document.getElementById(" م ain") به جای عنصر، null را برمی گرداند

زیرا "M" و "m" برای اهداف این روش متفاوت هستند.

عناصری که در سند نیستندتوسط getElementById() جستجو نمی شوند. هنگام ایجاد یک عنصر و اختصاص ID به آن، قبل از اینکه بتوانید با getElementById() به آن دسترسی پیدا کنید، باید عنصر را با یا روشی مشابه در درخت سند وارد کنید:

var element = document.createElement("div"); element.id = "testqq"; var el = document.getElementById("testqq"); // el پوچ خواهد بود!

اسناد غیر HTML. پیاده سازی DOM باید دارای اطلاعاتی باشد که بگوید کدام ویژگی ها از نوع ID هستند. ویژگی های با نام "id" از نوع ID نیستند مگر اینکه در DTD سند تعریف شده باشند. ویژگی id در موارد رایج XHTML، XUL و موارد دیگر از نوع ID تعریف شده است. پیاده سازی هایی که نمی دانند آیا ویژگی ها از نوع ID هستند یا انتظار نمی رود که null برگردانند.

مشخصات

مشخصات	وضعیت	اظهار نظر
مشخصات مدل شیء سند (DOM) سطح 1	منسوخ شده	تعریف اولیه برای رابط
مشخصات هسته سطح 2 مدل شیء سند (DOM). تعریف "getElementById" در آن مشخصات.	منسوخ شده	جایگزین DOM 1 شود
مشخصات هسته سطح 3 مدل شیء سند (DOM). تعریف "getElementById" در آن مشخصات.	منسوخ شده	جایگزین DOM 2 شود
DOM تعریف "getElementById" در آن مشخصات.	استاندارد زندگی	قصد جایگزینی DOM 3 را دارید

سازگاری با مرورگر

جدول سازگاری در این صفحه از داده های ساخت یافته تولید می شود. اگر می‌خواهید در داده‌ها مشارکت کنید، لطفاً https://github.com/mdn/browser-compat-data را بررسی کنید و یک درخواست برای ما ارسال کنید.

داده های سازگاری را در GitHub به روز کنید

	دسکتاپ						سیار
	کروم	حاشیه، غیرمتمرکز	فایرفاکس	اینترنت اکسپلورر	اپرا	سافاری	نمای وب اندروید	کروم برای اندروید	فایرفاکس برای آندروید	اپرا برای اندروید	سافاری در iOS	اینترنت سامسونگ
getElementById	پشتیبانی کامل کروم 1	پشتیبانی کامل Edge 12	پشتیبانی کامل فایرفاکس 1	پشتیبانی کامل IE 5.5	پشتیبانی کامل اپرا 7	سافاری پشتیبانی کامل 1	WebView Android پشتیبانی کامل بله	Chrome Android پشتیبانی کامل 18	فایرفاکس اندروید پشتیبانی کامل بله	اپرا اندروید پشتیبانی کامل 10.1	سافاری iOS پشتیبانی کامل 1	سامسونگ اینترنت اندروید؟

افسانه

حمایت کاملحمایت کامل سازگاری ناشناختهسازگاری ناشناخته