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

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

ساخت Element و Attributes :

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


(function () {

var elementP = document.createElement("p"),
mant = document.createTextNode("Salam man hamin alan Omadam.");

elementP.appendChild(mant);
document.body.appendChild(elementP);

})();

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

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

pic3s2JavaScript

حالا بیاین ببریمش و سط صفحه و آدی دی anar هم بهش دیم .


(function () {

var elementP = document.createElement("p"),
mant = document.createTextNode("Salam man hamin alan Omadam.");

elementP.appendChild(mant);
elementP.setAttribute("align", "center");
elementP.id = "anar";
document.body.appendChild(elementP);

})();

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

pic4s2JavaScript

همون طور که در تصویر بالا می بینید p من اومده وسط و آی دی anar گرفته راحته مگه نه ؟

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


(function () {

var elementP = document.createElement("p"),
mant = document.createTextNode("Salam man hamin alan Omadam."),
darkoobP = document.getElementById("darkoob");
elementP.appendChild(mant);
elementP.setAttribute("align", "center");
elementP.id = "anar";

darkoobP.parentNode.appendChild(elementP);

})();

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

pic5s2JavaScript

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


(function () {

var elementP = document.createElement("p"),
mant = document.createTextNode("Salam man hamin alan Omadam."),
darkoobP = document.getElementById("darkoob");
elementP.appendChild(mant);
elementP.setAttribute("align", "center");
elementP.id = "anar";

darkoobP.parentNode.insertBefore(elementP, darkoobP);

})();

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

pic6s2JavaScript

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


(function () {

var doc = document,
elementP = doc.createElement("p"),
mant = doc.createTextNode("Salam man hamin alan Omadam."),
darkoobP = doc.getElementById("darkoob");
elementP.appendChild(mant);
elementP.setAttribute("align", "center");
elementP.id = "anar";

darkoobP.parentNode.insertBefore(elementP, darkoobP);

})();

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


(function () {

var doc = document,
elementP = doc.createElement("p"),
mant = doc.createTextNode("Salam man hamin alan Omadam."),
darkoobP = doc.getElementById("darkoob");
elementP.appendChild(mant);
elementP.setAttribute("align", "center");
elementP.id = "anar";

darkoobP.parentNode.replaceChild(elementP, darkoobP);

})();

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

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

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

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


(<strong>function </strong>() {

<strong>var </strong>doc = document,
elementP = doc.createElement("p"),
darkoobP = doc.getElementById("darkoob");

elementP.innerHTML = "<strong>salam man ba innerHTML omadam </strong>";
elementP.id = "anar";

darkoobP.parentNode.appendChild(elementP);

})();

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


(function () {

var doc = document,
elementP = doc.createElement("p"),
darkoobP = doc.getElementById("darkoob");

elementP.innerHTML = "<strong>salam man ba innerHTML omadam </strong>";
elementP.id = "anar";

darkoobP.parentNode.appendChild(elementP);

alert(elementP.innerHTML);

})();

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

pic7s2JavaScript

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


(function () {

var doc = document,
elementP = doc.createElement("p"),
darkoobP = doc.getElementById("darkoob");

elementP.innerHTML = "<strong>salam man ba innerHTML omadam </strong>";
elementP.id = "anar";

darkoobP.parentNode.appendChild(elementP);

elementP.innerHTML = elementP.innerHTML + "<br/> man omadam.";
elementP.innerHTML = elementP.innerHTML + "<br/> man man raftam.";
elementP.innerHTML = elementP.innerHTML + "<br/> man man miayam .";
elementP.innerHTML = elementP.innerHTML + "<br/> man man miravam.";

})();

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


(function () {

var doc = document,
elementP = doc.createElement("p"),
darkoobP = doc.getElementById("darkoob"),
html;

elementP.innerHTML = "<strong>salam man ba innerHTML omadam </strong>";
elementP.id = "anar";

darkoobP.parentNode.appendChild(elementP);

html = elementP.innerHTML;

html = html + "<br/> man omadam.";
html = html + "<br/> man man raftam.";
html = html + "<br/> man man miayam .";
html = html + "<br/> man man miravam.";

elementP.innerHTML = html;

})();

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


elementP.innerHTML = "";

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

درباره نویسنده

پوریا

سلام ، من پوریا هستم با جاوا آشنایی دارم به هوش مصنوعی و امنیت علاقه مندم و امید وارم آموزش هایی که در وب سایت قرار می دم برای شما مفید باشه ، موفق باشید {^}

نظر دهید

Click here to post a comment

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *