در این بخش از سری آموزش جاوا اسکریپت قصد داریم شما را با انتخابگرهای DOM در جاوا اسکریپت آشنا کنیم.
انتخاب المان DOM در جاوا اسکریپت
جاوا اسکریپت معمولا بیشتر برای دسترسی یا ویرایش محتوا یا مقدار المان های HTML در صفحه وب مثل اعمال افکت هایی مانند نمایش, مخفی, انیمیشن ها و … استفاده می شود اما قبل از انجام هر گونه عملی نیاز است که المان مدنظر را پیدا یا انتخاب کنیم.
در بخش زیر شما با راه های معمول انتخاب المان های صفحه و کار کردن با آنها توسط جاوا اسکریپت را می بینید.
انتخاب بالاترین المان ها
بالاترین المان های سند HTML مستقیما به عنوان خصوصیت document قابل دسترس هستند. برای مثال, المان <html> می توانید با خصوصیت document.documentElement که مثلا برای المان <head> بصورت document.head و برای <body> نیز document.body است.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS Select Topmost Elements</title> </head> <body> <script> // Display lang attribute value of html element alert(document.documentElement.getAttribute("lang")); // Outputs: en // Set background color of body element document.body.style.background = "yellow"; // Display tag name of the head element's first child alert(document.head.firstElementChild.nodeName); // Outputs: meta </script> </body> </html> |
اما, دقت کنید, اگر document.body قبل از تگ <body> (داخل <head>) استفاده شود مقدار null را به جای المان body برگشت می دهد چرا که در آنجایی که اسکریپت اجرا شده, تگ <body> توسط مفسر مرورگر خوانده نشده و باید سعی کنید بعد از تگ <body> از اسکریپت استفاده کنید.
برای درک بهتر نگاهی به مثال زیر بیاندازید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS Document.body Demo</title> <script> alert("From HEAD: " + document.body); // Outputs: null (since <body> is not parsed yet) </script> </head> <body> <script> alert("From BODY: " + document.body); // Outputs: HTMLBodyElement </script> </body> </html> |
انتخاب المان با ID
شما می توانید یک المان را بر اساس آی دی یکتا توسط متد getElementById() انتخاب کنید که یکی از انتخابگرهای DOM در جاوا اسکریپت می باشد و آسان ترین راه برای پیدا کردن یک المان HTML در درخت DOM است.
مثال زیر یک المان با خصوصیت id=”mark” را انتخاب و هایلایت می کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS Select Element by ID</title> </head> <body> <p id="mark">This is a paragraph of text.</p> <p>This is another paragraph of text.</p> <script> // Selecting element with id mark var match = document.getElementById("mark"); // Highlighting element's background match.style.background = "yellow"; </script> </body> </html> |
متد getElementById() المان را به عنوان یک آبجکت برگشت می دهد اگر پیدا شود یا در صورت پیدا نشدن مقدار null را برگشت می دهد.
نکته: هر المان HTML می تواند خصوصیت id داشته باشد. مقدار این خصوصیت در صفحه یکتا است و دو المان نباید یک آی دی یکسان داشته باشد.
انتخاب المان با نام کلاس
مشابه بالا یکی دیگر از انتخابگرهای DOM در جاوا اسکریپت متد getElementsByClassName() برای انتخاب المان هایی با نام کلاس مشخص است.
این متد یک آبجکت آرایه ای مانند از همه المان های فرزندی که نام کلاس مشخص شده را دارند, برگشت می دهد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS Select Elements by Class Name</title> </head> <body> <p class="test">This is a paragraph of text.</p> <div class="block test">This is another paragraph of text.</div> <p>This is one more paragraph of text.</p> <script> // Selecting elements with class test var matches = document.getElementsByClassName("test"); // Displaying the selected elements count document.write("Number of selected elements: " + matches.length); // Applying bold style to first element in selection matches[0].style.fontWeight = "bold"; // Applying italic style to last element in selection matches[matches.length - 1].style.fontStyle = "italic"; // Highlighting each element's background through loop for(var elem in matches) { matches[elem].style.background = "yellow"; } </script> </body> </html> |
انتخاب المان با نام تگ
شما می توانید به سادگی المان های HTML را با نام تگ توسط متد getElementsByTagName() انتخاب کنید.
این متد یکی از انتخابگرهای DOM در جاوا اسکریپت است که همانند انتخاب گر قبلی یک آبجکت آرایه ای مانند از همه المان های فرزندی که نام تگ مشخص شده را دارند, برگشت می دهد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS Select Elements by Tag Name</title> </head> <body> <p>This is a paragraph of text.</p> <div class="test">This is another paragraph of text.</div> <p>This is one more paragraph of text.</p> <script> // Selecting all paragraph elements var matches = document.getElementsByTagName("p"); // Printing the number of selected paragraphs document.write("Number of selected elements: " + matches.length); // Highlighting each paragraph's background through loop for(var elem in matches) { matches[elem].style.background = "yellow"; } </script> </body> </html> |
انتخاب المان ها با سلکتور CSS
می توانید از متد querySelectorAll() برای انتخاب المان هایی که با سلکتور CSS مشخص شده تطابق دارند استفاده کنید.
این سلکتورهای CSS راهی بسیار قدرتمند و کارا برای انتخاب المان های سند HTML ارایه می دهند.
این متد یک لیست از همه المان هایی که در سلکتور مشخص شده است را برگشت می دهد. شما می توانید به آنها همانند آرایه ها دسترسی داشته باشید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS Select Elements with CSS Selectors</title> </head> <body> <ul> <li>Bread</li> <li class="tick">Coffee</li> <li>Pineapple Cake</li> </ul> <script> // Selecting all li elements var matches = document.querySelectorAll("ul li"); // Printing the number of selected li elements document.write("Number of selected elements: " + matches.length + "<hr>") // Printing the content of selected li elements for(var elem of matches) { document.write(elem.innerHTML + "<br>"); } // Applying line through style to first li element with class tick matches = document.querySelectorAll("ul li.tick"); matches[0].style.textDecoration = "line-through"; </script> </body> </html> |
نکته: متد querySelectorAll() همچنین سودو کلاس های CSS مثل :first-child, :last-child, :hover, غیره را پشتیبانی می کند اما برای سودو المان هایی مثل ::before, ::after, ::first-line و غیره همیشه مقدار لیست خالی را برگشت می دهد.
امیدوارم از آموزش انتخابگرهای DOM در جاوا اسکریپت نهایت استفاده را برده باشید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
