دسترسی به گره ها در جاوا اسکریپت به چه صورت است ؟
دسترسی به گره ها در جاوا اسکریپت به چه صورت است ؟
دسترسی به گره ها در جاوا اسکریپت به چه صورت است ؟
تا به اینجا با دسترسی به گره هاي فرزند و پدري آشنا شدیم. اما اگر بخواهیم به یک گره خاص، آن هم در عمق یک درخت دسترسی داشته باشیم چه؟ براي سهولت این کار DOM چندین متد براي دسترسی مستقیم به گره ها فراهم آورده است.
getElementsByTagName()
از این متد براي دسترسی به لیستی(آرایه) از عناصر خاص استفاده می شود.
var oImgs = document.getElementsByTagName(“img”);
دستور فوق لیستی از تمام عناصر img صفحه را در oImgs ذخیره می کند. فرض کنید می خواهیم به اولین عنصر عکس اولین پاراگراف صفحه دسترسی داشته باشیم:
var oPs = document.getElementsByTagname(“p”);
var oImgsInP = oPs[0].getElementsByTagName(“img”);
می توانیم از دستور زیر براي دسترسی به تمام عناصر صفحه استفاده کنیم:
var oAllElements = document.getElementsByTagName(“*”);
getElementsByName()
DOM براي دسترسی به عناصري که صفت name آنها برابر با مقدار خاص است از این متد استفاده می کند. به مثال زیرتوجه کنید:
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<form method=”post” action=”dosomething.php”>
<fieldset>
<legend>What color do you like?</legend>
<input type=”radio” name=”radColor” value=”red” /> Red<br />
<input type=”radio” name=”radColor” value=”green” /> Green<br />
<input type=”radio” name=”radColor” value=”blue” /> Blue<br />
</fieldset>
<input type=”submit” value=”Submit” />
</form>
</body>
</html>
این صفحه رنگ مورد علاقه کاربر را سوال می کند radiobutton ها اسم یکسانی دارند. اما می خواهیم فقط مقدار radiobutton ي که انتخاب شده است را پیدا کنیم. براي ایجاد ارجاع به عناصرradiobutton می توان از کد زیر استفاده نمود.
var oRadios = document.getElementsByName(“radColor”);
حال می توانید از همان روش قبلی براي به دست آوردن مقدار هر از radiobutton ها به روش زیر عمل کنید:
alert(oRadios[0].getAttribute(“value”)); //outputs “red”
getElementById()
از این متد براي دسترسی به عناصر به وسیله خاصیت ID آنها استفاده می شود. می دانیم که خاصیت ID باید یکتا باشد به این معنی که هیچ دو عنصري نمی توانند داخل یک صفحه ID یکسانی داشته باشند. این سریعترین و رایجترین راه براي دسترسی به عنصري خاص از صفحه است. به کد زیر نگاه کنید:
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<p>Hello World!</p>
<div id=”div1”>This is my first layer</div>
</body>
</html>
چنانچه بخواهیم از متد .getElementsByTagName() براي دسترسی به عنصر div این صفحه با شناسه div استفاده کنیم باید به صورت زیر عمل کنیم:
var oDivs = document.getElementsByTagName(“div”);
var oDiv1 = null;
for (var i=0; i < oDivs.length; i++){
if (oDivs[i].getAttribute(“id”) == “div1”) {
oDiv1 = oDivs[i];
break;
}
}
اما می توانیم همین کار را به صورت زیر و با استفاده از متد .getElementById() انجام دهیم:
var oDiv1 = document.getElementById(“div1”);
می بینید که استفاده از حالت دوم بسیار ساده تر ، کوتاه تر و بهینه تر است.
منبع : انجمن علمی مهندسی فناوری اطلاعات دانشگاه پیام تور مرکز اران و بید گل
برای اموزش های ویدیویی زبان جاوا اسکیریپت به بستر ویدیو های اموزشی بروید
ثبت نام
با ایمیل خود وارد شویدورود
