تبلیغات
یادداشت های من - HTML DOM – جلسه چهارم– خصوصیات و متدها

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

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

جستجو

 

HTML DOM – جلسه چهارم– خصوصیات و متدها

چهارشنبه 4 خرداد 1390   12:22 ق.ظ

خصوصیات و متدها رابط برنامه نویسی HTML DOM را تعریف می کنند.


رابط برنامه نویسی (Programming Interface)

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

رابط برنامه نویسی DOM با خصوصیت ها ومتدهای استانداردی تعریف شده است.

خصوصیات: معمولا اشاره می کند به چیزی که وجود دارد (مثلاً نام یک گره)

متدها: معمولاً اشاره می کند به اتفاقی که رخ داده است (مثلاً حذف یک گره)

 

خصوصیات HTML DOM:

بعضی از خصوصیات DOM عبارتند از:

x.innerHTML: مقدار متن x

x.nodeName: نام x

x.nodeValue: مقدار x

x.parentNode: گره والد (پدر) x

x.childNodes: گره های فرزند x

x.attributes: گره های ویژگی x

(در مورد فرزند، والد و ویژگی و .. در جلسه سوم توضیح داده شد.)

نکته: در لیست بالا، x یک شیء گره (عنصر HTML) است.

 

خاصیت innerHTML

ساده ترین راه برای دریافت و ویرایش محتویات یک عنصر استفاده از خصوصیت innerHTML است. innerHTML توسط اکثر مرورگرهای اصلی پشتیبانی می شود.

InnerHTML برای گرفتن و جابجا کردن محتویات عناصر HTML مناسب است (حتی عنصر <html> و <body>)، ضمناً می توان برای مشاهده سورس صفحه ای که به صورت پویا تغییر کرده استفاده کرد.

 

مثال:

کد زیر innerHTML (متن) را از عنصر <p>  با id=”intro” را می گیرد:

<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
txt=document.getElementById("intro").innerHTML;
document.write("<p>The text from the intro paragraph: " + txt + "</p>");
</script>
</body>
</html>

در مثال بالا getElementById یک متد است در حالی که innerHTML یک خصوصیت است.

 

childNodes و nodeValue

ما همچنین می توانیم از خصوصیات nodeValue و childNodes برای گرفتن محتویات یک عنصر استفاده کنیم.

کدهای زیر مقدار عنصر <p> با id=”intro” را می گیرد.

<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write("<p>The text from the intro paragraph: " + txt + "</p>");
</script>
</body>
</html>

 

در آموزش ها من بیشتر از innerHTML استفاده می کنم، اما دانستن متد بالا بای درک بهتر ساختار درختی DOM و دسترسی به آنها با XML مفید است.


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

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