معرفی و کاربرد تگ template در HTML

در این مقاله از سایت آموزی جهت استفاده شما کاربران گرامی به معرفی و کاربرد تگ <template> در HTML می پردازیم.

تگ <template> در HTML

معرفی و کاربرد تگ template در HTML

معرفی و کاربرد تگ 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

بررسی تگ <template> در HTML 4.01 و HTML5

یک تگ جدید در HTML5 است. و در HTML4.01 و نسخه های قدیمی تر وجود نداشته است.

خصوصیات ویژه تگ <template> در HTML

تگ تمپلیت هیچگونه خاصیت ویژه ای در سند HTML ندارد.

ویژگی های عمومی تگ <template> در HTML

تگ <template> از کلیه ویژگی های عمومی در سند HTML پشتیبانی می کند.

رویدادهای عمومی تگ <template> در HTML

تگ template از کلیه رویدادهای عمومی در سند HTML پشتیبانی می کند.

پشتیبانی مرورگرها از تگ <template> در HTML

در زیر مرورگرهای معتبر اینترنتی از اولین نسخه هایی که از تگ <template> پشتیبانی می کنند، آمده است:

جهت دیدن تمام ردیف و ستون ها در حالت موبایلی جدول را به چپ و راست اسکرول کنید.

معرفی و کاربرد تگ template در HTML – اختصاصی سایت آموزی