نحوه ایجاد و دستکاری گره ها در جاوا اسکریپت را شرح دهید .
نحوه ایجاد و دستکاری گره ها در جاوا اسکریپت را شرح دهید .
نحوه ایجاد و دستکاری گره ها در جاوا اسکریپت را شرح دهید .
می توانیم از DOM براي اضافه کردن، حذف کردن و جابجایی و دیگر دستکاريها استفاده کنیم.
ایجاد گره هاي جدید
براي ایجاد گره هاي جدید(از انواع مختلف) از متدهاي زیر استفاده می شود
(createAttribute(name براي ایجاد یک صفت جدید با name گرفته شده به کار می رود
(createComment(text براي ایجاد یک توضیح
(createElement(tagname براي ایجاد یک عنصر جدید استفاده می شود.
(createTextNode(text ایجاد یک متن ساده با عنوان text
createElement() و createTextNode() ،appendChild()
فرض کنید تکه کد زیر را داریم:
<html>
<head>
<title>createElement() Example</title>
</head>
<body>
</body>
</html>
حال می خواهیم عبارت زیر را در این صفحه چاپ کنیم:
<p>Hello World !</p>
اولین کار ایجاد یک عنصر <p> است.
var oP = document.createElement(“p”);
حال یک متن ساده ایجاد می کنیم:
var oText = document.createTextNode(“Hello World!”);
حال باید متن را به عنصر <p> الحاق کنیم. براي این کار از متد .appendchild() استفاده می کنیم. از این متد براي اضافه کردن یک فرزند به انتهاي لیست فرزندان یک گره استفاده می شود.
oP.appendChild(oText);
پاراگرافی که را ایجاد کرده ایم باید به صفحه و قسمت body و یا یکی از زیر مجموعه هاي آن الحاق کنیم. به این شکل: body پاراگرافی که را ایجاد کرده ایم باید به صفحه و قسمت
oP.appendChild(oText);
<p id=”intro”>Hello World!</p>
اجراي دستور زیر موجب نمایش پیغام Hello World! یعنی همان محتواي تگ <p> خواهد شد:
txt=document.getElementById(‘intro’).innerHTML;
alert(txt);// Hello World!
با نسبت دادن مقداري جدید به این خاصیت با استفاده از علامت انتساب می توانیم محتواي یک تگ را تغییر دهیم
Var myPara=document.getElementById(‘intro’);
myPara.innerHTML=”Click <a href=’#’>Here</a>”;
تگ <p> به صورت زیر درخواهد آمد. زیرا خاصیت innerHTML محتواي تگ را به صورت کامل با مقدار جدید جایگرین می کند.
<p id=”intro”>Click <a href=’#’>Here</a></p>
insertBefore() وreplaceChild() ،removeChild()
طبیعتا وقتی می توانیم گرهی را اضافه کنیم امکان حذف آن ها نیز وجود خواهد داشت. براي حذف گره ها ازمتد .removeChild() استفاده می کنیم. این متد یک آرگومان می گیرد که در واقع گرهی است که باید حذف شود. به شکل زیر:
var oP = document.body.getElementsByTagName(“p”)[0];
document.body.removeChild(oP);
براي جابجایی گره ها از متد .replaceChild() استفاده می شود. از این تابع به صورت زیر استفاده می شود:
var oNewP = document.createElement(“p”);
var oText = document.createTextNode(“Hello Universe! “);
oNewP.appendChild(oText);
var oOldP = document.body.getElementsByTagName(“p”)[0];
oOldP.parentNode.replaceChild(oNewP, oOldP);
براي اضافه کردن یک عنصر به قبل از عنصر دیگري از insertBefore() استفاده می شود. این متد دو آرگومان می پذیرد و آرگومان اول را قبل از آرگومان دوم قرار می دهد.
createDocumentFragment()
به محض اینکه تعدادي گره جدید به سند اضافه می کنیم صفحه براي نمایش تغییرات، به روزرسانی می شود. این رفتار براي تعداد تغییرات کم مناسب است. اما هنگامی که تغییرات زیاد باشد و صفحه بخواهد این رفتار را براي تک تک تغییرات تکرار کند ممکن است موجب کندي در عملکرد مرورگر شود. براي رفع این مشکل می توانید از یک تکه برنامه 1 استفاده کنید. می توانید تمام گرههاي جدید را به تکه برنامه اضافه کرده و سپس آن را در صفحه اصلی قرار دهید. فرض کنید می خواهیم چندین پاراگراف را در صفحه ایجاد کنیم. در صورت استفاده از روش هاي قبلی این امر موجب رفرش هر باره صفحه خواهد شد. اما بهتر است به روش زیر عمل کنیم:
var arrText = [“first”, “second”, “third”, “fourth”, “fifth”,
“sixth”];
var oFragment = document.createDocumentFragment();
for (var i=0; i < arrText.length; i++) {
var oP = document.createElement(“p”);
var oText = document.createTextNode(arrText[i]);
oP.appendChild(oText);
oFragment.appendChild(oP);
}
document.body.appendChild(oFragment);
منبع : انجمن علمی مهندسی فناوری اطلاعات دانشگاه پیام تور مرکز اران و بید گل
برای اموزش های ویدیویی زبان جاوا اسکیریپت به بستر ویدیو های اموزشی بروید
ثبت نام
با ایمیل خود وارد شویدورود
