تبلیغات
یادداشت های من - HTML DOM – جلسه پنجم – دسترسی به گره ها

یادداشت های روزانه من درباره اینترنت، سیاست، آبکنار، رایانه، شعر، فناوری اطلاعات و ...
هر چیزی که بهش علاقه دارم

حسین (کیوان) جهانبخش آبکنار

جستجو

 

HTML DOM – جلسه پنجم – دسترسی به گره ها

پنجشنبه 5 خرداد 1390   03:25 ب.ظ

با DOM شما می توانید به هر گره ای در سندهای HTML دسترسی پیدا کنید.


دسترسی به گره ها

شما به 3 طریق می توانید به یک گره دسترسی داشته باشید:

1- با استفاده از متد getElementById()

2- با استفاده از متد getElementByTagName()

3- با مرور کردن درخت گره و استفاده از روابط بین گره ها

متد getElementById()

این متد عنصری که ID گفته شده را داشته باشد بر می گرداند.

دستور

node.getElementById("id");

مثال زیر عنصری که id=”intro” داشته باشد بر میگرداند.

document.getElementById("intro");

نکته: متد getElementById() در XML کار نمی کند. (علاوه بر HTML DOM که استانداردی برای دسترسی به عناصر HTML است، استاندارد دیگری برای دسترسی به عناصر XML داریم به نام XML DOM. برای کسب اطلاعات بیشتر درباره XML DOM هم می توانید در اینترنت جستجو کنید و هم می توانید کمی تحمل کرده و منتظر آموزش آن از طدیق همین وبلاگ باشید. انشالله)

 

متد getElementByTagName()

این متد عناصری که tag name مورد نظر (مثلاً تمام عناصر <p>) را داشته باشد بر می گرداند.

دستور:

node.getElementsByTagName("tagname");

مثال زیر لیستی از گره ها (nodeList) شامل تمام عناصر <p> صفحه را بر می گرداند.

document.getElementsByTagName("p");

مثال زیر لیستی از گره ها شامل عناصر <p> که فرزند عنصری با id=”main” هستند را بر می گرداند (برای اطلاع از مفاهیم فرزند و والد و ... به جلسات قبل مراجعه نمایید.)

document.getElementById('main').getElementsByTagName("p");

لیست گره ها (Node List) در DOM

همانطور که گفته شد متد getElementByTagName() یک node-list بر می گرداند. لیست گره ها آرایه ای از گره هاست.

مثال:

ما ابتدا تمام گره های <p> را داخل یک لیست گره ها قرار می دهیم:

x=document.getElementsByTagName("p");

از طریق شماره ایندکس می توان به گره ها دسترسی پیدا کرد. برای دسترسی به دومین عنصر <p> باید بنویسید:

y=x[1];

نکته: ایندکس از 0 شروع می شود.

در جلسات بعدی بیشتر با node-list (لیست گره ها) آشنا می شوید.

طول لیست گره های DOM

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

مثال زیر ابتدا تمام عناصر <p> را گرفته و برای هر عنصر <p> مقدار گره ی متن (text) آن را به عنوان خروجی نشان می دهد:

x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}

پیمایش به کمک روابط بین گره ها:

سه خاصیت: parentNode، firstChild و lastChild به شما اجازه می دهند بین گره های یک صفحه پیمایش کنید.

به کد HTML زیر توجه کنید:

<html>
<body>
<p>Hello World!</p>
<div>
  <p>The DOM is very useful!</p>
  <p>This example demonstrates node relationships.</p>
</div>
</body>
</html>

در کد بالا اولین عنصر p گره اولین فرزند برای عنصر body است (firstChild) و عنصر div آخرین فرزند آن است (lastChild). گره والد (parentNode) اولین عنصر p و همچنین عنصر div، تگ body است و گره والد عنصر p که داخل تگ div است همان عنصر div است.

برای دسترسی به متن یک عنصر هم می توان از خاصیت firstChild استفاده نمود.

<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>

گره های ریشه در DOM

دو خاصیت ویژه وجود دارد که برای دسترسی به عناصر خاصی از document به کار می رود:

document.documentElement

گره ی ریشه ی صفحه را بر می گرداند.

document.body

دسترسی مستقیم به تگ <body> را امکان پذیر می کند.


نوشته شده توسط : حسین (کیوان) جهانبخش آبکنار

نوع مطلب : HTML DOM ،طراحی وب ،