فهرست

آموزش جاوا اسکریپت قسمت یازدهم

خوب نبودخوبخیلی خوبعالیخیلی عالی (5٫00 از 1 رای)
نویسنده: پوریا پرهامی
تاریخ ارسال: ۰۸ / آبان / ۱۳۹۵

ساخت Element و Attributes :

در این قسمت می‌خوایم با هم یک المنت، برای مثال یک p بسازیم و به آن مقدار دهیم و بعد آن را داخل صفحه html خود قرار دهیم، من از همان صفحه html مثال قبل استفاده می‌کنم و می‌خواهم تگ p را به آخر صفحه منتقل کنم.

همان طور که در کد بالا می‌بینید با createElement من می‌توانم المنت مورد نظرم را بسازم p,div و… در اینجا من یک p ساختم بعد آن را در متغییر element قرار دادم، چرا ؟ تا بعد بتوانم به آن متن بدهم یا برای آن کلاس یا ای دی تعریف کنم .

یکی از روش‌هایی که می‌توان متنی به المنت دل‌خواه داد این است که با استفاده از createTextNode یک تکست نود ایجاد کنید، من هم همین کار انجام دادم، برای اضافه کردن متن از appendChild استفاده کردم تا به تگ p خود متنی اختصاص دهم، حالا که متن هم داره بیاید آن را به انتهای body اضافه کنیم. می‌بینید که با document.body.appendChild این کار انجام شد، صفحه را رفرش می‌کنم و این نتیجه خواهد بود .

pic3s2JavaScript

حالا آن را به وسط صفحه منتقل می‌کنیم و آدی دی anar هم به آن اختصاص می‌دهیم .

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

pic4s2JavaScript

همان طور که در تصویر بالا می‌بینید p به وسط صفحه منتقل شده و آی دی anar نیز گرفته است.

حال می‌خواهم p را در داخل تگ div که وجود دارد قرار دهم.

برای اینکه تگ p خود را داخل dive قرار دهم اول تگ p که آی دی darkoob داشته را پیدا کرده و در داخل darkoobP می‌ریزم بعد به نود پدر داکوب پی یک فرزند اضافه می‌کنم،  نود پدر دارکوب پی چی چیزی است  ؟؟؟ نود پدر دارکوب پی همان div است. چون p با آی دی darkoob در داخل تگ div قرار دارد پس div پدر p دارای آی دی darkoob است.

pic5s2JavaScript

می‌بینید که تگ p ما با آی دی anar داخل div قرار گرفت، حال اگر بخواهیم قبل از تگ p با آی دی دارکوب قرار بگیرد باید چی کاری انجام دهیم؟ کافی است این تغییر را اعمال کنیم :

insertBefor دو پارامتر می‌گیرد اولی المنتی که می‌خواهیم اضافه کنیم و دومی المنتی که می‌خواهیم المنت اضافه شده قبل از آن قرار بگیرد :

pic6s2JavaScript

اما یک مشکل کوچک وجود دارد و آن این است که من ۳ بار از document استفاده کردم بهتر است کاری کنیم که این عمل فقط یک بار انجام شود، به این شکل سرعت صفحه ما هم کمی بالاتر می‌رود، کد را به صورت زیر اصلاح می‌کنم.

حالا می‌خوام به جای p با آی دی darkoob  p با آی دی anar قرار بگیرد :

می‌بینید که از replaceChild استفاده کردم این متد هم مانند، insertBefor دو پارامتر می‌گیرد اولی المنت جدید و دومی المنتی که می‌خواهیم با المنت جدید تعویض شود.

تا اینجا شما با یک روش برای قرار دادن محتوا آشنا شدید اما این روش زیاد روش جالبی نیست، چرا؟

چون در این روش ما خیلی با DOM درگیر هستیم. هر چقدر که بیشتر با DOM درگیر باشید سرعت صفحه کند ترمی‌شود.

پس برای مقدار دهی من از innerHTML استفاده می‌کنم و کد به شکل زیر درمی‌آید:

در innerHTML شما می‌توانید مانند من از تگ‌های HTML استفاده کنید، از innerHTML نه تنها می‌توانیم برای قرار دادن محتوا استفاده کنیم، بلکه می‌توان برای گرفتن محتوا نیز از آن استفاده کرد.

ونتیجه این خواهد بود :

pic7s2JavaScript

اتصال دو رشته را در قسمت‌های گذشته به یاد دارید ؟؟؟ حال با innerHTML انجام می‌دهیم .

می‌بینید که اتصال رشته‌ها هم بسیار راحت است، اما! یک مشکل داریم در چند خط بالاتر گفتیم که تا آنجا که می‌توانیم باید کم‌تر با DOM درگیر شویم، پس من کد خود را به این شکل اصلاح می‌کنم .

خوب کمی کد سریع‌تر شد، و برای پاک کردن محتوا هم کافی است محتوای innerHTML را خالی بدهیم، به این شکل :

در قسمت بعدی در مورد دادن استایل به المنت‌ها صحبت خواهیم کرد.

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

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