پیمایش در HTML DOM

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

با HTML DOM، شما می‌توانید با استفاده از روابط گره‌ها در درخت گره‌ها پیمایش کنید. [۱]

گره های DOM

با توجه به استاندارد W3C HTML DOM، هر چیزی در یک سند HTML یک گره است:

  • سند جاری یک گره سند است
  • هر عنصر HTML ای یک گره عنصر است
  • متن‌های درون عناصر HTML گره‌های متن هستند
  • هر خاصیت HTML ای یک گرهٔ خاصیت است. (منسوخ شده)
  • تمامی نظرات، گره‌های نظر هستند
Pic htmltree.gif


با HTML DOM، تمامی گره‌ها در درخت گره‌ها با جاوا اسکریپت قابل دسترس هستند.

گره‌های جدید می‌توانند ساخته شوند و تمامی گره‌ها می‌توانند ویرایش یا حذف شوند.

ارتباط بین گره ها

گره ها در درخت گره ها یک رابطه ساختاری سلسله مراتبی نسبت به یکدیگر دارند.

اصطلاحاتی مانند والد (parent)، فرزند (child)، خواهر (sibling) و برادر برای توصیف روابط استفاده می شوند.

  • در یک درخت گره ، بالاترین گره ریشه ( یا گره‌ی ریشه) نامیده می شود
  • هر گره دقیقا به جز ریشه (Root) (که والد ندارد) یک والد دارد
  • یک گره می تواند چندین فرزند داشته باشد
  • گره های خواهر و برادر به گره‌هایی با والد یکسان گفته می شود
Pic navigate.gif
<html>

  <head>
    <title>DOM Tutorial</title>
  </head>

  <body>
    <h1>DOM Lesson one</h1>
    <p>Hello world!</p>
  </body>

</html>

از کد HTML شما می توانید درک کنید که:

  • تگ <HTML> گره ریشه (root) است
  • تگ <HTML> والد (parent) ندارد
  • تگ <HTML> والد گره های <head> و <body> است
  • تگ <head> اولین فرزند گره <HTML> است
  • تگ <body> آخرین فرزند گره <HTML> است

و:

  • تگ <head> یک فرزند دارد: <title>
  • تگ <title> یک فرزند ( یک گره متنی) دارد: "DOM Tutorial"
  • تگ <body> دو فرزند دارد: <h1> و <p>
  • تگ <h1> یک فرزند دارد: "DOM Lesson one"
  • تگ <p> یک فرزند دارد: "Hello world!"
  • تگ <h1> و <p> خواهر و برادر هستند

پیمایش بین گره ها

شما می توانید از ویژگی‌های گره های زیر برای پیمایش بین گره‌ها به وسیله جاوا اسکریپت  استفاده کنید:

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

گره های فرزند و گره های مقادیر

یک خطای رایج در هنگام پردازش DOM این است که DOM انتظار دارد که گره متن داشته باشد.

مثال:

<title id="demo">DOM Tutorial</title>


مشاهدهٔ نتیجه


کد عنصر <title> (در مثال بالا ) متنی ندارد.

شامل یک گره‌ی متنی با مقدار "DOM Tutorial" می شود.

به مقدار گره ی متنی می توان از ویژگی innerHTML گره دسترسی داشت:

var myTitle = document.getElementById("demo").innerHTML;

دسترسی به ویژگی innerHTML با شیوه دسترسی به مقدار گره ی فرزند (Child) اول یکسان است:

var myTitle = document.getElementById("demo").firstChild.nodeValue;

دسترسی به فرزند اول می تواند از روش زیر نیز صورت گیرد:

var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

در (۳) مثال زیر متن عنصر <h1> کپی شده و درون عنصر <p> ریخته می شود:

مثال

<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>

</body>
</html>


مشاهدهٔ نتیجه


مثال

<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>

</body>
</html>


مشاهدهٔ نتیجه


مثال

<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02">Hello!</p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>

</body>
</html>


مشاهدهٔ نتیجه


ویژگی InnerHTML

در این آموزش ما از ویژگی InnerHTML برای دریافت محتوای یک عنصر HTML استفاده می کنیم.

اما یادگیری سایر روش های استفاده شده در مثال های بالا برای درک ساختار درخت و پیمایش DOM کاربردی است.

گره ریشه (Root) در DO

دو ویژگی مخصوص وجود دارد که به شما اجازه دسترسی به کل سند را می دهد :

document.body، بدنه‌ی سند

document.documentElement - دسترسی به کل سند

مثال

<html>
<body>

<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.body</b> property.</p>
</div>

<script>
alert(document.body.innerHTML);
</script>

</body>
</html>


مشاهدهٔ نتیجه


مثال

<html>
<body>

<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.documentElement</b> property.</p>
</div>

<script>
alert(document.documentElement.innerHTML);
</script>

</body>
</html>


مشاهدهٔ نتیجه


ویژگی nodeName

ویژگی nodeName نام یک گره را مشخص می کند.

  • ویژگی nodeName فقط خواندنی است
  • nodeName یک عنصر گره با نام تگ آن عنصر یکسان است
  • نام گره (nodeName) یک گره ی خاصیت ، نام آن خاصیت است
  • نام گره یک گره متنی همیشه #text است
  • نام گره یک گره سند همیشه #document است

مثال

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>


مشاهدهٔ نتیجه


توجه کنید: nodeName یا نام گره همیشه نام تگ یک عنصر HTML را به صورت تمام حروف بزرگ (uppercase) نگهداری می‌کند.

ویژگی nodeValue

ویژگی nodeValue مقدار یک گره را مشخص می کند.

  • مقدار ویژگی nodeValue برای گره های عناصر برابر با null است
  • مقدار ویژگی nodeValue برای گره های متنی ، خود آن متن است
  • مقدار ویژگی nodeValue برای گره های خاصیت ، برابر با مقدار آن خاصیت است

ویژگی nodeType

ویژگی nodeType فقط خواندنی (read only) است. این ویژگی نوع یک گره را برمی گرداند.

مثال

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

مهمترین ویژگی‌های nodeType عبارتند از:

گره نوع مثال
ELEMENT_NODE 1 <h1 class="heading">WikiCod</h1>
ATTRIBUTE_NODE 2 class = "heading" (deprecated) (منقضی شده)
TEXT_NODE 3 WikiCod
COMMENT_NODE 8 <!-- This is a comment -->
DOCUMENT_NODE 9 خود سند HTML ( والد گره‌ی <HTML>)
DOCUMENT_TYPE_NODE 10 <!Doctype html>
نوع شماره ۲ در HTML DOM منقضی شده است (اما همچنان کار می کند). این نوع در XML DOM منقضی نشده است.

منابع آموزشی