Dart HTML DOM
HTML DOM در دارت Dart HTML DOM
هر صفحه وب در داخل یک مرورگر نمایش داده می شود که می‌توان آن را به عنوان یک شئ در نظر گرفت.
یک شئ سند (Documnet Object)، سند HTML را که در پنجره خود قرار دارد، نمایش می‌دهد.
documnet object خواص (Properties) مختلفی دارد که به اشیاء دیگر نیز اشاره می‌کند و امکان ایجاد تغییر و دسترسی به سند را به ما می‌دهد.
Document Object Model
نحوه دسترسی و تغییر محتوای یک سند، Documnet Object Model یا DOM نامیده می‌شود.
اشیا در یک سلسله مراتب سازماندهی شده اند. این ساختار سلسله مراتبی برای سازماندهی اشیا در یک سند وب اعمال می‌شوند.
- window: بالاترین و اصلی ترین عنصر سلسله مراتب شئ است.
- documnet: هر سند HTML که در پنجره مرورگر بارگذاری می‌شود، تبدیل به یک شئ document می‌شود.
این شئ شامل محتوای صفحه است. - element: این شئ نمایانگر محتوای یک صفحه وب است. مانند تکست باکس ها، عنوان صفحه، فیلد ها و … .
- node: اغلب همان المان ها هستند، با این تفاوت که می‌توانند ویژگی (attribute) نیز باشند. مانند متن، کامنت و … .
برای دستکاری و کار با اشیاء و المان ها در DOM، از کتابخانه dart:html استفاده می‌کنیم.
برای استفاده از این کتابخانه آن را به صورت زیر import می‌کنیم:
1 | import 'dart:html'; |
دسترسی به عناصر (Element) DOM
با استفاده از تابع ()querySelector می‌توانیم عناصر صفحه را جستجو و به آن ها دسترسی داشته باشیم.
1 | Element querySelector(String selectors); |
این تابع اولین عنصری را از بین گروه مشخص شده selector ها پیدا کند، برمی‌گرداند.
همچنین این تابع یک پارامتر از نوع String می‌گیرد که باید یک selector css باشد.
مثال:
مدیریت رویداد Dart HTML DOM
با استفاده از شئ onClick در کتابخانه dart:html می‌توانیم رویداد های صفحه را مدیریت کنیم.
1 | querySelector('#Id').onClick.listen(eventHanlderFunction); |
متد ()listen یک تابع را به عنوان پارامتر گرفته و آن را هنگام رخ دادن رویداد مورد نظر، اجرا می‌کند.
گرامر تابع برای یک رویداد موس باید به صورت زیر باشد:
1 | void eventHanlderFunction (MouseEvent event){ } |
