تبلیغات
یادداشت های من - مطالب HTML DOM

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

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

جستجو

 

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

پنجشنبه 5 خرداد 1390   04: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 ،طراحی وب ،

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

چهارشنبه 4 خرداد 1390   01: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 ،طراحی وب ،

آموزش HTML DOM – جلسه سوم– درخت گره در HTML DOM

سه شنبه 3 خرداد 1390   12:00 ق.ظ

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


تمام گره ها در درخت با دیگر گره ها ارتباط دارد.

 درخت گره ی HTML DOM

HTML DOM به یک سند HTML به عنوان یک ساختار درختی نگاه می کند. ساختار درختی در اینجا node-tree (درخت گره) نامیده می شود.

از طریق درخت می توان به تمام گره ها دسترسی پیدا کرد. محتویات آنها را می توان ویرایش و یا حذف کرد و می توان عناصر جدید (گره جدید) ایجاد نمود.

درخت گره ی زیر مجموعه  ای از گره ها و ارتباط بین آنها را نشان می دهد. درخت از گره ریشه شروع شده و در برگ ها به گره های متن (text) می رسیم.

 درخت گره در HTML DOM

والدین، فرزندان . برادران (هم نژاد) یک گره:

گره ها در درخت گره یک رابطه سلسله مراتبی با هم دارند. عبارات والد، فرزند و برادر برای توصیف این روابط به کار می رود. گره های والد فرزندانی دارند. فرزندان در یک سطح یکسان را هم نژاد (برادر یا خواهر) می نامند.

در درخت گره، بالاترین گره را گره ریشه می نامند

هر گره به جز گره ریشه دقیقاً یک والد (پدر) دارد.

هر گره می تواند هر تعدادی فرزند داشته باشد.

یک برگ گره های است که هیچ فرزندی ندارد.

برادرها گره هایی هستند که یک والد دارند.

تصویر زیر بخش از درخت گره و روابط بین گره ها را نشان می دهد:

 روابط بین گره ها در درخت گره HTML DOM

 

به کد HTML زیر نگاه کنید:

<html>
  <head>
    <title>DOM Tutorial</title>
  </head>
  <body>
    <h1>DOM Lesson one</h1>
    <p>Hello world!</p>
  </body>
</html>

بر اساس کد HTML بالا:

  • گره <html> هیچ والدی ندارد پس گرره ریشه است.
  • والد گره های <head> و <body> فرزندان گره <html> هستند.
  • گره ی والد برای گره متن «Hello World!» گره <p> است.

و:

  • گره <html> دو فرزند دارد: <head> و <body>
  • گره <head> یک فرزند دارد: گره <title>
  • گره های <h1> و <p> برادر (یا خواهر) هستند و هر دو فرزندان <body> هستند.

 

اولین فرزند – آخرین فرزند

با توجه به کد HTML بالا:

  • عنصر <head> اولین فرزند عنصر <html> است و عنصر <body> آخرین فرزند این عنصر است.
  • عنصر <h1> اولین فرزند عنصر <body> و عنصر <p> آخرین فرزند آن است.


پ ن : این مجموعه آموزش ها از سایت W3C ترجمه شده و خواهد شد. جهت آشنایی خودم و دیگران منتشر می کنم.


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

نوع مطلب : HTML DOM ،

آموزش HTML DOM – جلسه دوم: گره های HTML DOM

یکشنبه 1 خرداد 1390   10:42 ب.ظ

در DOM همه چیز در یک صفحه HTML یک گره است.


گره های DOM

بر اساس DOM هر چیزی در یک سند HTML یک گره (node) است.

DOM می گوید:

  • صفحه جاری یک گره ی Document است.
  • هر عنصر HTML یک گره عنصر (element) است.
  • هر متن در عناصر HTML یک گره متن (text) است
  • هر خاصیت (attribute) HTML یک گره خاصیت است.
  • کامنت ها گره های comment هستند.

 

اولین مثال از DOM:

به کدهای HTML زیر نگاه کنید:

<html>
  <head>
    <title>DOM Tutorial</title>
  </head>
  <body>
    <h1>DOM Lesson one</h1>
    <p>Hello world!</p>
  </body>
</html>

  • گره ریشه در کد HTML بالا <html> است. تمام گره های دیگر در صفحه داخل تگ <html> قرار دارد.
  • گره <html> دو گره فرزند دارد: گره <head> و گره <body>
  • گره <head> یک گره <title> دارد. گره <body> هم شامل یک گره <h1> و یگ گره </p> است.

 

متن ها عموماً در گره های Text ذخیره میشوند.

یک خطای معمول در پردازش DOM این است که از یک گره element انتظار برود که شامل یک متن باشد. در صورتی که، متن یک گره عنصر، در یک گره متن ذخیره شده است.

به عنوان مثال: در <title>DOM Tutorial</title> گره عنصر <title> شامل یک گره متن با مقدار DOM Tutorial است.

"DOM Tutorial" مقدار عنصر <title> نیست.

به هر حال، در HTML DOM مقدار گره متن از طریق خاصیت innerHTML در دسترس خواهد بود.

درباره innerHTML در جلسات بعدی توضیح داده خواهد شد.


پ ن : این مجموعه آموزش ها از سایت W3C ترجمه شده و خواهد شد. جهت آشنایی خودم و دیگران منتشر می کنم.


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

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

آموزش HTML DOM – جلسه اول: معرفی HTML DOM

یکشنبه 1 خرداد 1390   04:39 ب.ظ

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


قبل از HTML DOM چه مباحثی را باید بیاموزیم؟

قبل از شروع مطالعه درباره HTML DOM شما باید آشنایی با مباحث زیر داشته باشید:

  • HTML
  • JavaScript

 

DOM چیست؟

DOM یک استاندارد W3C (World Wide Web Consortium) است.

DOM استانداردی را برای دستیابی و مدیریت اسناد HTML و XML است:

«مدل شی ئی سند W3C (Document Object Model - DOM) یک پلتفرم و زبان است که به برنامه ها و اسکریپت ها اجازه می دهد به صورت پویا و دینامیک به محتویات، ساختارها و سبک (style) یک سند دسترسی داشته و آن ها را به روز رسانی کند.»

DOM از سه بخش / مرحله مجزا تشکیل شده است:

  • Core DOM : مدل استانداردی برای هر نوع اسناد ساختاری
  • XML DOM : مدل استانداردی برای اسناد XML
  • HTML DOM : مدل استانداردی برای اسناد HTML

DOM اشیاء و خصوصیاتی را برای همه عناصر صفحه و متدهایی (اینترفیس هایی) را برای دسترسی به آنها تعریف می کند.

XML DOM چیست؟

XML DOM اشیاء و خصوصیاتی را برای عناصر ایکس ام ال تعریف می کندو متدها (اینترفیس ها) یی را برای دسترسی به آن ها تعریف می کند.

HTML DOM چیست؟

  • یک مدل شی ئی استاندارد برای HTML است.
  • یک اینترفیس برنامه نویسی استاندارد برای HTML است
  • وابستگی به پلتفرم و زبان ندارد
  • یک استاندارد W3C است.

همان تعریف تکراری برای HTML DOM: اشیاء و خصوصیاتی را برای عناصر HTML تعریف کرده و متدها (اینترفیس ها) یی را برای دسترسی به آنها مهیا می کند.

در حقیقت:

HTML DOM یک استاندارد است برای بدانیم چگونه عناصر HTML را گرفته، تغییر داده، اضافه کرده و یا حذف نماییم.


پ ن : این مجموعه آموزش ها از سایت W3C ترجمه شده و خواهد شد. جهت آشنایی خودم و دیگران منتشر می کنم.


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

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