معرفی و کاربرد تگ template در HTML
معرفی و کاربرد تگ template در HTML تمپلیت مدل DOM
در این مقاله از سایت آموزی جهت استفاده شما کاربران گرامی به معرفی و کاربرد تگ <template> در HTML می پردازیم.
تگ <template> در HTML
وب اپلیکیشن های به روز با استفاده از دستکاری DOM یا همان ساختار درختی صفحه HTML ، تغییرات خودشان را در صفحه اعمال میکنند. برای مثال یک جدول را در نظر بگیرید، که قرار است ما اطلاعات مورد نظرمان را بوسیله Ajax از سرور دریافت و درون این جدول نمایش دهیم. این اطلاعات باید به جدول متصل شوند. اما چگونه؟
توسعه دهندگان دو راه حل پیش رو دارند:
۱- با استفاده از جاوا اسکریپت تگ های DOM را درون رشته ساخته و سپس به صفحه اضافه میکنند. اینکار آسان به نظر میرسد، اما این روش مشکل امنیتی دارد و اجرای حملات XSS بیشتر میشود. بعضی از توسعه دهندگان هم برای اینکه کار سادهتر شود کل HTML را با Ajax میفرستند که باعث میشود حجم دادهها خیلی زیادتر از قبل شود.
۲- راه حل دیگر ایجاد یک سطر خالی درون HTML است که به عنوان یک Template مورد استفاده قرار بگیرد. که البته باید آن را از دید کاربر خارج کنید. در این روش با اینکه همه چیز از دید کاربر مخفی است اما باز هم درخواست های HTTP که ممکن است درون آن وجود داشته باشد، انجام میشوند.
هیچ کدام از دو راه حل روش استانداردی نبودند، تا زمانیکه HTML5 تگ جدیدی به نام template را معرفی کرد. با استفاده از تگ <template> شما میتوانید یک تمپلیت یا prototype برای ساختار DOM خود ایجاد کنید.
ساختار تگ <template>
تگ تمپلیت میتواند هر جای صفحه، head , body یا حتی درون frameset قرار بگیرد. با این حال:
۱- template به کاربر نمایش داده نمیشود.
۲- template بخشی از DOM در نظر گرفته نمیشود. برای مثال متد getElementById فرزندان template را برنمیگرداند.
۳- template یک تگ غیرفعال است. برای مثال تصاویر درون آن دانلود نمیشود، اسکریپت های درون آن اجرا نمیشوند و به همین صورت.
نحوه فعالسازی template به این صورت است که ابتدا باید عناصر داخل template را مقداردهی کنیم سپس از روی آنها یکی بسازیم ( clone کنیم ) که اینکار توسط متد importNode انجام میشود، و سپس در مکان دلخواه خود در DOM قرار دهیم.
برای مثال در زیر ما یک لیست خالی و یک template داریم و همچنین یک دکمه که هر بار کاربر روی آن کلیک کند یک لیست از طریق تمپلیت اضافه میشود.
مثال در مورد تگ <template> در html
<h2>Flower</h2>
<img src=”img_white_flower.jpg” alt=”flower”>
</template>[/html]
بررسی تگ <template> در HTML 4.01 و HTML5
یک تگ جدید در HTML5 است. و در HTML4.01 و نسخه های قدیمی تر وجود نداشته است.
خصوصیات ویژه تگ <template> در HTML
تگ تمپلیت هیچگونه خاصیت ویژه ای در سند HTML ندارد.
ویژگی های عمومی تگ <template> در HTML
تگ <template> از کلیه ویژگی های عمومی در سند HTML پشتیبانی می کند.
رویدادهای عمومی تگ <template> در HTML
تگ template از کلیه رویدادهای عمومی در سند HTML پشتیبانی می کند.
برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور
برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 پروژه محور
پشتیبانی مرورگرها از تگ <template> در HTML
در زیر مرورگرهای معتبر اینترنتی از اولین نسخه هایی که از تگ <template> پشتیبانی می کنند، آمده است:
تگ | |||||
Template | 26.0 | 13.0 | 22.0 | 9.0 | 15.0 |
جهت دیدن تمام ردیف و ستون ها در حالت موبایلی جدول را به چپ و راست اسکرول کنید.
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
معرفی و کاربرد تگ template در HTML تمپلیت مدل DOM – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید