JavaScript:پیمایش در HTML DOM جاوااسکریپت

از ویکی کد
پرش به ناوبری پرش به جستجو
دورهٔ آموزشی جاوااسکریپت
Javascript.jpg
جاوااسکریپت
موارد آموزشی
۱آموزش جاوااسکریپت
۲مقدمه‌ای بر جاوااسکریپت
۳JavaScript:قوانین و اصول اولیه زبان جاوااسکریپت
۴JavaScript:خروجی جاوااسکریپت
۵JavaScript:عبارت‌ها در جاوااسکریپت
۶JavaScript:شیوهٔ نوشتن (Syntax) عبارات یا دستورات در جاوااسکریپت
۷JavaScript:نظرات یا کامنت‌ها (Comments) در جاوااسکریپت
۸JavaScript:متغیرها در جاوااسکریپت
۹JavaScript:عملگرهای جاوااسکریپت
۱۰JavaScript:عملگرهای ریاضی در جاوااسکریپت
۱۱JavaScript:عملگرهای مقداردهی در جاوااسکریپت
۱۲JavaScript:انواع داده‌ها در جاوااسکریپت
۱۳JavaScript:توابع در جاوااسکریپت
۱۴JavaScript:اشیاء (object) در جاوااسکریپت
۱۵JavaScript:رویدادها در جاوااسکریپت
۱۶JavaScript:رشته‌های متنی (string) در جاوااسکریپت
۱۷JavaScript:متدهای نوع داده متنی یا رشته‌ای در جاوااسکریپت
۱۸JavaScript:اعداد در جاوااسکریپت
۱۹JavaScript:متدهای داده‌های عددی در جاوااسکریپت
۲۰JavaScript:آرایه‌ها در جاوااسکریپت
۲۱JavaScript:متدهای آرایه در جاوااسکریپت
۲۲JavaScript:مرتب‌سازی آرایه‌ها در جاوااسکریپت
۲۳JavaScript:متدهای پیمایش آرایه در جاوااسکریپت
۲۴JavaScript:اشیاء تاریخ و زمان در جاوااسکریپت
۲۵JavaScript:فرمت‌های تاریخ و زمان در جاوااسکریپت
۲۶JavaScript:متدهای دریافت تاریخ و زمان در جاوااسکریپت
۲۷JavaScript:متدهای تنظیم زمان و تاریخ در جاوااسکریپت
۲۸JavaScript:شی ریاضی (Math) در جاوااسکریپت
۲۹JavaScript:ایجاد عدد تصادفی در جاوااسکریپت
۳۰JavaScript:مقادیر بولین (Booleans) در جاوااسکریپت
۳۱JavaScript:عملگرهای منطقی و مقایسه‌ای در جاوااسکریپت
۳۲JavaScript:ساختار if else و else if در جاوااسکریپت
۳۳JavaScript:تکه کد Switch در جاوا اسکریپت
۳۴JavaScript:حلقه For در جاوااسکریپت
۳۵JavaScript:حلقه While در جاوااسکریپت
۳۶JavaScript:کلمات کلیدی Break و Continue در جاوااسکریپت
۳۷JavaScript:تبدیل نوع داده‌ها در جاوااسکریپت
۳۸JavaScript:عملیات‌های بیتی در جاوااسکریپت
۳۹JavaScript:عبارات با قاعده در جاوااسکریپت
۴۰JavaScript:خطاها در جاوااسکریپت - رخ دادن خطا و رفع آن
۴۱JavaScript:Scope در جاوااسکریپت
۴۲JavaScript:Hoisting یا جا به جایی کدها در جاوااسکریپت
۴۳JavaScript:استفاده از مد یا حالت سخت‌گیرانه (use strict) در جاوااسکریپت
۴۴JavaScript:کلمه کلیدی This در جاوااسکریپت
۴۵JavaScript:کلمه کلیدی Let در جاوااسکریپت
۴۶JavaScript:ثابت‌ها در جاوااسکریپت
۴۷JavaScript:تعریف توابع به صورت پیکان
۴۸JavaScript:کلاس‌ها در جاوااسکریپت
۴۹JavaScript:اشکال‌زدایی در جاوااسکریپت
۵۰JavaScript:راهنمای استایل و استانداردهای کدنویسی در جاوااسکریپت
۵۱JavaScript:بهترین تمرینات جاوااسکریپت
۵۲JavaScript:اشتباهات رایج در برنامه‌نویسی جاوااسکریپت
۵۳JavaScript:کارایی در جاوااسکریپت
۵۴JavaScript:کلمات رزرو شده در جاوااسکریپت
۵۵JavaScript:ورژن‌های جاوااسکریپت
۵۶JavaScript:ECMAScript 5 - JavaScript 5
۵۷JavaScript:ECMAScript 6 - ECMAScript 2015
۵۸JavaScript:جیسون (JSON) در جاوااسکریپت
فرم‌ها
۱JavaScript:فرم‌ها در جاوااسکریپت
۲JavaScript:API ارزشیابی در جاوااسکریپت
اشیاء (Object)
۱JavaScript:اشیاء در جاوااسکریپت
۲JavaScript:ویژگی‌های اشیاء در جاوااسکریپت
۳JavaScript:متدهای اشیاء در جاوااسکریپت
۴JavaScript:روش‌های دسترسی به شیء در جاوااسکریپت
۵JavaScript:سازنده‌های شیء در جاوااسکریپت
۶JavaScript:شکل اصلی شیء در جاوااسکریپت
۷JavaScript:متدهای شیء در ورژن ES5 جاوااسکریپت
تابع
۱JavaScript:تعریف تابع در جاوااسکریپت
۲JavaScript:پارامتر توابع در جاوااسکریپت
۳JavaScript:فراخوانی تابع در جاوااسکریپت
۴JavaScript:صدا کردن تابع در جاوااسکریپت
۵JavaScript:تابع Apply در جاوااسکریپت
۶JavaScript:بسته‌ها (به انگلیسی: Closures) در جاوااسکریپت
HTML DOM
۱JavaScript:HTML DOM در جاوااسکریپت
۲JavaScript:متدهای HTML DOM در جاوااسکریپت
۳JavaScript:HTML DOM Document در جاوااسکریپت
۴JavaScript:عناصر HTML DOM در جاوااسکریپت
۵JavaScript:HTML DOM در جاوااسکریپت - تغییر محتوای HTML
۶JavaScript:DOM در جاوااسکریپت - تغییر CSS
۷JavaScript:انیمیشن در HTML DOM جاوااسکریپت
۸JavaScript:رویدادها در HTML DOM جاوااسکریپت
۹JavaScript:شنونده رویداد در HTML DOM جاوااسکریپت
۱۰JavaScript:پیمایش در HTML DOM جاوااسکریپت
۱۱JavaScript:عناصر (گره‌ها) HTML DOM در جاوااسکریپت
۱۲JavaScript:مجموعه‌های HTML DOM جاوااسکریپت
۱۳JavaScript:لیست گره‌ها در HTML DOM جاوااسکریپت
Browser BOM
۱JavaScript:پنجره جاوااسکریپت - مدل شیء مرورگر
۲JavaScript:پنجره صفحه نمایش در جاوااسکریپت
۳JavaScript:موقعیت پنجره در جاوااسکریپت
۴JavaScript:تاریخچه پنجره در جاوااسکریپت
۵JavaScript:ناوبری پنجره در جاوااسکریپت
۶JavaScript:جعبه پیغام جاوااسکریپت
۷JavaScript:رویدادهای زمان‌بندی شده در جاوااسکریپت
۸JavaScript:کوکی‌های جاوااسکریپت
AJAX
۱JavaScript:مقدمه‌ای بر AJAX
۲JavaScript:AJAX - شیء XMLHttpRequest
۳JavaScript:AJAX - ارسال یک درخواست به سرور
۴JavaScript:AJAX - پاسخ سرور
۵JavaScript:مثال‌های XML در AJAX
۶JavaScript:مثال‌های PHP در AJAX
۷JavaScript:مثال‌های ASP در AJAX
۸JavaScript:مثال پایگاه داده در AJAX
۹JavaScript:نرم‌افزارهای XML
۱۰JavaScript:مثال‌های AJAX
JSON
۱JavaScript:مقدمه‌ای بر JSON
۲JavaScript:شیوهٔ نوشتار JSON
۳JavaScript:JSON در برابر XML
۴JavaScript:انواع داده‌های مجاز در JSON
۵متد JSON.parse()
۶متد JSON.stringify()
۷JavaScript:اشیاء JSON
۸JavaScript:آرایه‌ها در JSON
۹JavaScript:PHP در JSON
۱۰JavaScript:HTML در JSON
۱۱JavaScript:JSONP
jQuery
۱JavaScript:جاوااسکریپت / انتخابگرهای DOM جی‌کوئری
۲JavaScript:جاوااسکریپت / عناصر HTML جی‌کوئری
۳JavaScript:جاوااسکریپت / استایل‌های CSS در جی‌کوئری
۴JavaScript:جاوااسکریپت / HTML DOM در جی‌کوئری
میانبر:
الگو:اج


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

گره‌های DOM

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

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

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

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

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

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

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

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

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

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

</html>

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

  • {{ک|code=|lang=javascript}}گرهٔ ریشه است. * {{ک|code=|lang=javascript}}والد ندارد. * {{ک|code=|lang=javascript}}والد گره های{{ک|code=|lang=javascript}}و{{ک|code=|lang=javascript}}است. * {{ک|code=|lang=javascript}}اولین فرزند گره ی{{ک|code=|lang=javascript}}است. * {{ک|code=|lang=javascript}}آخرین فرزند گره ی{{ک|code=|lang=javascript}} است. و: * {{ک|code=|lang=javascript}}یک فرزند دارد :{{ک|code=|lang=javascript}} * {{ک|code=<title>|lang=javascript}}یک فرزند (یک گره متنی) دارد: "DOM Tutorial" * {{ک|code=<body>|lang=javascript}}دو فرزند دارد :{{ک|code= <h1>|lang=javascript}}و{{ک|code=<p>|lang=javascript}} * {{ک|code= <h1>|lang=javascript}}یک فرزند دارد: "DOM Lesson one" * {{ک|code=<p>|lang=javascript}}یک فرزند دارد: {{عبارت چپ به راست|"Hello world!"}} * {{ک|code= <h1>|lang=javascript}}و{{ک|code=<p>|lang=javascript}}خواهر و برادر هستند. ==پیمایش بین گره‌ها== شما می‌توانید از ویژگی‌های گره‌های زیر برای پیمایش بین گره‌ها به وسیله جاوااسکریپت استفاده کنید: *{{ک|code=parentNode|lang=javascript}} *{{ک|code=childNodes[nodenumber]|lang=javascript}} *{{ک|code=firstChild|lang=javascript}} *{{ک|code=lastChild|lang=javascript}} *{{ک|code=nextSibling|lang=javascript}} *{{ک|code=previousSibling|lang=javascript}} ==گره‌های فرزند و گره‌های مقادیر== {{نکته|text=یک خطای رایج در هنگام پردازش DOM این است که DOM انتظار دارد که گره متن داشته باشد.|type=notice|image=[[Image:OOjs_UI_icon_lightbulb-yellow.svg|38px]]}} ===مثال=== <syntaxhighlight lang="javascript"> <title id="demo">DOM Tutorial کد عنصر{{ک|code=|lang=javascript}}(در مثال بالا) متنی ندارد. شامل یک '''گرهٔ متنی''' با مقدار "DOM Tutorial" می‌شود. به مقدار گرهٔ متنی می‌توان از ویژگی{{ک|code=innerHTML|lang=javascript}}گره دسترسی داشت:<syntaxhighlight lang="javascript"> var myTitle = document.getElementById("demo").innerHTML; </syntaxhighlight>دسترسی به ویژگی innerHTML با شیوه دسترسی به{{ک|code=nodeValue|lang=javascript}}فرزند اول یکسان است:<syntaxhighlight lang="javascript"> var myTitle = document.getElementById("demo").firstChild.nodeValue; </syntaxhighlight>دسترسی به فرزند اول می‌تواند از روش زیر نیز صورت گیرد:<syntaxhighlight lang="javascript"> var myTitle = document.getElementById("demo").childNodes[0].nodeValue; </syntaxhighlight>در سه مثال زیر متن عنصر{{ک|code= <h1>|lang=javascript}}کپی شده و درون عنصر{{ک|code=<p>|lang=javascript}}ریخته می‌شود: ===مثال=== <syntaxhighlight lang="javascript"> <html> <body> <h1 id="id01">My First Page</h1> <p id="id02"></p> <script> document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML; </script> </body> </li></ul> <p></syntaxhighlight> </p> <h3><span id="مثال"></span><span class="mw-headline" id=".D9.85.D8.AB.D8.A7.D9.84">مثال</span><mw:editsection page="JavaScript:پیمایش در HTML DOM جاوااسکریپت" section="3">مثال</mw:editsection></h3> <div class="mw-highlight mw-content-ltr" dir="ltr"><pre><span></span><span class="o"><</span><span class="nx">html</span><span class="o">></span> <span class="o"><</span><span class="nx">body</span><span class="o">></span> <span class="o"><</span><span class="nx">h1</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"id01"</span><span class="o">></span><span class="nx">My</span> <span class="nx">First</span> <span class="nx">Page</span><span class="o"><</span><span class="err">/h1></span> <span class="o"><</span><span class="nx">p</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"id02"</span><span class="o">><</span><span class="err">/p></span> <span class="o"><</span><span class="nx">script</span><span class="o">></span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"id02"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"id01"</span><span class="p">).</span><span class="nx">firstChild</span><span class="p">.</span><span class="nx">nodeValue</span><span class="p">;</span> <span class="o"><</span><span class="err">/script></span> <span class="o"><</span><span class="err">/body></span> <span class="o"><</span><span class="err">/html></span> </pre></div> <h3><span id="مثال_2"></span><span class="mw-headline" id=".D9.85.D8.AB.D8.A7.D9.84_2">مثال</span><mw:editsection page="JavaScript:پیمایش در HTML DOM جاوااسکریپت" section="4">مثال</mw:editsection></h3> <div class="mw-highlight mw-content-ltr" dir="ltr"><pre><span></span><span class="o"><</span><span class="nx">html</span><span class="o">></span> <span class="o"><</span><span class="nx">body</span><span class="o">></span> <span class="o"><</span><span class="nx">h1</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"id01"</span><span class="o">></span><span class="nx">My</span> <span class="nx">First</span> <span class="nx">Page</span><span class="o"><</span><span class="err">/h1></span> <span class="o"><</span><span class="nx">p</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"id02"</span><span class="o">></span><span class="nx">Hello</span><span class="o">!<</span><span class="err">/p></span> <span class="o"><</span><span class="nx">script</span><span class="o">></span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"id02"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"id01"</span><span class="p">).</span><span class="nx">childNodes</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">nodeValue</span><span class="p">;</span> <span class="o"><</span><span class="err">/script></span> <span class="o"><</span><span class="err">/body></span> <span class="o"><</span><span class="err">/html></span> </pre></div> <h2><span id="ویژگی_InnerHTML"></span><span class="mw-headline" id=".D9.88.DB.8C.DA.98.DA.AF.DB.8C_InnerHTML">ویژگی InnerHTML</span><mw:editsection page="JavaScript:پیمایش در HTML DOM جاوااسکریپت" section="5">ویژگی InnerHTML</mw:editsection></h2> <p>در این آموزش ما از ویژگی InnerHTML برای دریافت محتوای یک عنصر HTML استفاده می‌کنیم. </p><p>اما یادگیری سایر روش‌های استفاده شده در مثال‌های بالا برای درک ساختار درخت و پیمایش DOM کاربردی است. </p> <h2><span id="گره_ریشه_یا_Root_در_DOM"></span><span class="mw-headline" id=".DA.AF.D8.B1.D9.87_.D8.B1.DB.8C.D8.B4.D9.87_.DB.8C.D8.A7_Root_.D8.AF.D8.B1_DOM">گره ریشه یا Root در DOM</span><mw:editsection page="JavaScript:پیمایش در HTML DOM جاوااسکریپت" section="6">گره ریشه یا Root در DOM</mw:editsection></h2> <p>دو ویژگی مخصوص وجود دارد که به شما اجازه دسترسی به کل سند را می‌دهد: </p> <ul><li><code class="mw-highlight" id="" style="" dir="ltr"><span class="nb">document</span><span class="p">.</span><span class="nx">body</span></code>- بدنهٔ سند.</li> <li><code class="mw-highlight" id="" style="" dir="ltr"><span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span></code>- دسترسی به کل سند.</li></ul> <h3><span id="مثال_3"></span><span class="mw-headline" id=".D9.85.D8.AB.D8.A7.D9.84_3">مثال</span><mw:editsection page="JavaScript:پیمایش در HTML DOM جاوااسکریپت" section="7">مثال</mw:editsection></h3> <div class="mw-highlight mw-content-ltr" dir="ltr"><pre><span></span><span class="o"><</span><span class="nx">html</span><span class="o">></span> <span class="o"><</span><span class="nx">body</span><span class="o">></span> <span class="o"><</span><span class="nx">p</span><span class="o">></span><span class="nx">Hello</span> <span class="nx">World</span><span class="o">!<</span><span class="err">/p></span> <span class="o"><</span><span class="nx">div</span><span class="o">></span> <span class="o"><</span><span class="nx">p</span><span class="o">></span><span class="nx">The</span> <span class="nx">DOM</span> <span class="nx">is</span> <span class="nx">very</span> <span class="nx">useful</span><span class="o">!<</span><span class="err">/p></span> <span class="o"><</span><span class="nx">p</span><span class="o">></span><span class="nx">This</span> <span class="nx">example</span> <span class="nx">demonstrates</span> <span class="nx">the</span> <span class="o"><</span><span class="nx">b</span><span class="o">></span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="o"><</span><span class="err">/b> property.</p></span> <span class="o"><</span><span class="err">/div></span> <span class="o"><</span><span class="nx">script</span><span class="o">></span> <span class="nx">alert</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">innerHTML</span><span class="p">);</span> <span class="o"><</span><span class="err">/script></span> <span class="o"><</span><span class="err">/body></span> <span class="o"><</span><span class="err">/html></span> </pre></div> <h3><span id="مثال_4"></span><span class="mw-headline" id=".D9.85.D8.AB.D8.A7.D9.84_4">مثال</span><mw:editsection page="JavaScript:پیمایش در HTML DOM جاوااسکریپت" section="8">مثال</mw:editsection></h3> <div class="mw-highlight mw-content-ltr" dir="ltr"><pre><span></span><span class="o"><</span><span class="nx">html</span><span class="o">></span> <span class="o"><</span><span class="nx">body</span><span class="o">></span> <span class="o"><</span><span class="nx">p</span><span class="o">></span><span class="nx">Hello</span> <span class="nx">World</span><span class="o">!<</span><span class="err">/p></span> <span class="o"><</span><span class="nx">div</span><span class="o">></span> <span class="o"><</span><span class="nx">p</span><span class="o">></span><span class="nx">The</span> <span class="nx">DOM</span> <span class="nx">is</span> <span class="nx">very</span> <span class="nx">useful</span><span class="o">!<</span><span class="err">/p></span> <span class="o"><</span><span class="nx">p</span><span class="o">></span><span class="nx">This</span> <span class="nx">example</span> <span class="nx">demonstrates</span> <span class="nx">the</span> <span class="o"><</span><span class="nx">b</span><span class="o">></span><span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="o"><</span><span class="err">/b> property.</p></span> <span class="o"><</span><span class="err">/div></span> <span class="o"><</span><span class="nx">script</span><span class="o">></span> <span class="nx">alert</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">innerHTML</span><span class="p">);</span> <span class="o"><</span><span class="err">/script></span> <span class="o"><</span><span class="err">/body></span> <span class="o"><</span><span class="err">/html></span> </pre></div> <h2><span id="ویژگی_nodeName"></span><span class="mw-headline" id=".D9.88.DB.8C.DA.98.DA.AF.DB.8C_nodeName">ویژگی nodeName</span><mw:editsection page="JavaScript:پیمایش در HTML DOM جاوااسکریپت" section="9">ویژگی nodeName</mw:editsection></h2> <p>ویژگی<code class="mw-highlight" id="" style="" dir="ltr"><span class="nx">nodeName</span></code>نام یک گره را مشخص می‌کند. </p> <ul><li>ویژگی nodeName فقط خواندنی است.</li> <li>nodeName یک عنصر گره با نام تگ آن عنصر یکسان است.</li> <li>nodeName (به انگلیسی: <span lang="en">نام گره</span>) یک گرهٔ خاصیت، نام آن خاصیت است.</li> <li>نام گره یک گره متنی همیشه <span dir="ltr">#text</span> است.</li> <li>نام گره یک گره سند همیشه <span dir="ltr">#document</span> است.</li></ul> <h3><span id="مثال_5"></span><span class="mw-headline" id=".D9.85.D8.AB.D8.A7.D9.84_5">مثال</span><mw:editsection page="JavaScript:پیمایش در HTML DOM جاوااسکریپت" section="10">مثال</mw:editsection></h3> <div class="mw-highlight mw-content-ltr" dir="ltr"><pre><span></span><span class="o"><</span><span class="nx">h1</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"id01"</span><span class="o">></span><span class="nx">My</span> <span class="nx">First</span> <span class="nx">Page</span><span class="o"><</span><span class="err">/h1></span> <span class="o"><</span><span class="nx">p</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"id02"</span><span class="o">><</span><span class="err">/p></span> <span class="o"><</span><span class="nx">script</span><span class="o">></span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"id02"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"id01"</span><span class="p">).</span><span class="nx">nodeName</span><span class="p">;</span> <span class="o"><</span><span class="err">/script></span> </pre></div><style data-mw-deduplicate="TemplateStyles:r2027">.mw-parser-output table.imbox{margin:4px 10%;border-collapse:collapse;border:3px solid #36c;background:#f8f9fa}.mw-parser-output .imbox .mbox-text .imbox{margin:0 -0.5em;display:block}.mw-parser-output .mbox-inside .imbox{margin:4px}.mw-parser-output table.imbox-notice{border:1.5px solid #fc3;background:#fff9ea}.mw-parser-output table.imbox-speedy{border:3px solid #b32424;background:#fee7e6}.mw-parser-output table.imbox-delete{border:1.5px solid #b32424;background:#fee7e6}.mw-parser-output table.imbox-content{border:1.5px solid #b32424;background:#fee7e6}.mw-parser-output table.imbox-style{border:3px solid #fc3}.mw-parser-output table.imbox-move{border:3px solid #9932cc}.mw-parser-output table.imbox-protection{border:3px solid #a2a9b1}.mw-parser-output table.imbox-license{border:3px solid #72777d;background:#eaecf0}.mw-parser-output table.imbox-featured{border:3px solid #ffaa66}</style><table class="plainlinks imbox imbox-notice" role="presentation"><tr><td class="mbox-image"><a href="/wiki/%D9%BE%D8%B1%D9%88%D9%86%D8%AF%D9%87:OOjs_UI_icon_lightbulb-yellow.svg" class="image"><img alt="OOjs UI icon lightbulb-yellow.svg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/OOjs_UI_icon_lightbulb-yellow.svg/langfa-38px-OOjs_UI_icon_lightbulb-yellow.svg.png" decoding="async" width="38" height="38" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/OOjs_UI_icon_lightbulb-yellow.svg/langfa-57px-OOjs_UI_icon_lightbulb-yellow.svg.png 1.5x, https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/OOjs_UI_icon_lightbulb-yellow.svg/langfa-76px-OOjs_UI_icon_lightbulb-yellow.svg.png 2x" data-file-width="20" data-file-height="20" /></a></td><td class="mbox-text"><b>نکته:</b><code class="mw-highlight" id="" style="" dir="ltr"><span class="nx">nodeName</span></code> (به فارسی: نام گره) همیشه نام تگ یک عنصر HTML را به صورت تمام حروف بزرگ (به انگلیسی: <span lang="en">uppercase</span>) نگه داری می‌کند.</td></tr></table> <p><br /> </p> <h2><span id="ویژگی_nodeValue"></span><span class="mw-headline" id=".D9.88.DB.8C.DA.98.DA.AF.DB.8C_nodeValue">ویژگی nodeValue</span><mw:editsection page="JavaScript:پیمایش در HTML DOM جاوااسکریپت" section="11">ویژگی nodeValue</mw:editsection></h2> <p>ویژگی<code class="mw-highlight" id="" style="" dir="ltr"><span class="nx">nodeValue</span></code>مقدار یک گره را مشخص می‌کند. </p> <ul><li>مقدار ویژگی nodeValue برای گره‌های عناصر برابر با<code class="mw-highlight" id="" style="" dir="ltr"><span class="kc">null</span></code>است.</li> <li>مقدار ویژگی nodeValue برای گره‌های متنی، خود آن متن است.</li> <li>مقدار ویژگی nodeValue برای گره‌های خاصیت، برابر با مقدار آن خاصیت است.</li></ul> <h2><span id="ویژگی_nodeType"></span><span class="mw-headline" id=".D9.88.DB.8C.DA.98.DA.AF.DB.8C_nodeType">ویژگی nodeType</span><mw:editsection page="JavaScript:پیمایش در HTML DOM جاوااسکریپت" section="12">ویژگی nodeType</mw:editsection></h2> <p>ویژگی<code class="mw-highlight" id="" style="" dir="ltr"><span class="nx">nodeType</span></code>فقط خواندنی (به انگلیسی: <span lang="en">read only</span>) است. این ویژگی نوع یک گره را برمی‌گرداند. </p> <h3><span id="مثال_6"></span><span class="mw-headline" id=".D9.85.D8.AB.D8.A7.D9.84_6">مثال</span><mw:editsection page="JavaScript:پیمایش در HTML DOM جاوااسکریپت" section="13">مثال</mw:editsection></h3> <div class="mw-highlight mw-content-ltr" dir="ltr"><pre><span></span><span class="o"><</span><span class="nx">h1</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"id01"</span><span class="o">></span><span class="nx">My</span> <span class="nx">First</span> <span class="nx">Page</span><span class="o"><</span><span class="err">/h1></span> <span class="o"><</span><span class="nx">p</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"id02"</span><span class="o">><</span><span class="err">/p></span> <span class="o"><</span><span class="nx">script</span><span class="o">></span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"id02"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"id01"</span><span class="p">).</span><span class="nx">nodeType</span><span class="p">;</span> <span class="o"><</span><span class="err">/script></span> </pre></div>مهمترین ویژگی‌های nodeType عبارتند از: <table class="wikitable"> <tr> <td>مثال </td> <td>نوع </td> <td>گره </td></tr> <tr> <td> =W3Schools= </td> <td>۱ </td> <td>ELEMENT_NODE </td></tr> <tr> <td>class = "heading" <p>(منقضی شده) </p> </td> <td>۲ </td> <td>ATTRIBUTE_NODE </td></tr> <tr> <td>W3Schools </td> <td>۳ </td> <td>TEXT_NODE </td></tr> <tr> <td> </td> <td>۸ </td> <td>COMMENT_NODE </td></tr> <tr> <td>خود سند HTML <p>(والد یا parent گرهٔ <HTML>) </p> </td> <td>۹ </td> <td>DOCUMENT_NODE </td></tr> <tr> <td><!Doctype HTML> </td> <td>۱۰ </td> <td>DOCUMENT_TYPE_NODE </td></tr></table> <style data-mw-deduplicate="TemplateStyles:r2027">.mw-parser-output table.imbox{margin:4px 10%;border-collapse:collapse;border:3px solid #36c;background:#f8f9fa}.mw-parser-output .imbox .mbox-text .imbox{margin:0 -0.5em;display:block}.mw-parser-output .mbox-inside .imbox{margin:4px}.mw-parser-output table.imbox-notice{border:1.5px solid #fc3;background:#fff9ea}.mw-parser-output table.imbox-speedy{border:3px solid #b32424;background:#fee7e6}.mw-parser-output table.imbox-delete{border:1.5px solid #b32424;background:#fee7e6}.mw-parser-output table.imbox-content{border:1.5px solid #b32424;background:#fee7e6}.mw-parser-output table.imbox-style{border:3px solid #fc3}.mw-parser-output table.imbox-move{border:3px solid #9932cc}.mw-parser-output table.imbox-protection{border:3px solid #a2a9b1}.mw-parser-output table.imbox-license{border:3px solid #72777d;background:#eaecf0}.mw-parser-output table.imbox-featured{border:3px solid #ffaa66}</style><table class="plainlinks imbox imbox-notice" role="presentation"><tr><td class="mbox-image"><a href="/wiki/%D9%BE%D8%B1%D9%88%D9%86%D8%AF%D9%87:OOjs_UI_icon_lightbulb-yellow.svg" class="image"><img alt="OOjs UI icon lightbulb-yellow.svg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/OOjs_UI_icon_lightbulb-yellow.svg/langfa-38px-OOjs_UI_icon_lightbulb-yellow.svg.png" decoding="async" width="38" height="38" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/OOjs_UI_icon_lightbulb-yellow.svg/langfa-57px-OOjs_UI_icon_lightbulb-yellow.svg.png 1.5x, https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/OOjs_UI_icon_lightbulb-yellow.svg/langfa-76px-OOjs_UI_icon_lightbulb-yellow.svg.png 2x" data-file-width="20" data-file-height="20" /></a></td><td class="mbox-text">نوع شماره ۲ در HTML DOM منقضی شده‌است (اما همچنان کار می‌کند). این نوع در XML DOM منقضی نشده‌است.</td></tr></table> <h2><span id="منابع_آموزشی"></span><span class="mw-headline" id=".D9.85.D9.86.D8.A7.D8.A8.D8.B9_.D8.A2.D9.85.D9.88.D8.B2.D8.B4.DB.8C">منابع آموزشی</span><mw:editsection page="الگو:پانویس_جاوااسکریپت" section="T-1"/></h2> <div class="reflist references-small mw-content-ltr" dir="ltr" style=""> <div class="mw-references-wrap"><ol class="references"> <li id="cite_note-1"><span class="mw-cite-backlink"><a href="#cite_ref-1">↑</a></span> <span class="reference-text"><a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://www.w3schools.com/js/js_HTMLdom_navigation.asp">w3schools.com: JavaScript HTML DOM Navigation</a></span> </li> </ol></div></div> <div role="navigation" class="navbox" aria-labelledby=".D8.AC.D8.A7.D9.88.D8.A7_.D8.A7.D8.B3.DA.A9.D8.B1.DB.8C.D9.BE.D8.AA" style="overflow-x:auto;;padding:3px"><table class="nowraplinks hlist collapsible expanded navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tr><th scope="col" class="navbox-title" colspan="2"><div class="plainlinks hlist navbar mini"><ul><li class="nv-view"><a href="/wiki/%D8%A7%D9%84%DA%AF%D9%88:%D9%85%D9%86%D9%88_%D8%A7%D9%81%D9%82%DB%8C_%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA" title="الگو:منو افقی جاوااسکریپت"><span title="این الگو را مشاهده کنید" style=";;background:none transparent;border:none;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;">ن</span></a></li><li class="nv-talk"><a href="/w/index.php?title=%D8%A8%D8%AD%D8%AB_%D8%A7%D9%84%DA%AF%D9%88:%D9%85%D9%86%D9%88_%D8%A7%D9%81%D9%82%DB%8C_%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA&action=edit&redlink=1" class="new" title="بحث الگو:منو افقی جاوااسکریپت (صفحه وجود ندارد)"><span title="بحث دربارهٔ این الگو" style=";;background:none transparent;border:none;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;">ب</span></a></li><li class="nv-edit"><a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://wikicod.ir/w/index.php?title=%D8%A7%D9%84%DA%AF%D9%88:%D9%85%D9%86%D9%88_%D8%A7%D9%81%D9%82%DB%8C_%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA&action=edit"><span title="این الگو را ویرایش کنید" style=";;background:none transparent;border:none;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;">و</span></a></li></ul></div><div id=".D8.AC.D8.A7.D9.88.D8.A7_.D8.A7.D8.B3.DA.A9.D8.B1.DB.8C.D9.BE.D8.AA" style="font-size:114%;margin:0 4em"><a href="/wiki/%D8%AC%D8%A7%D9%88%D8%A7_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA" class="mw-redirect" title="جاوا اسکریپت">جاوا اسکریپت</a></div></th></tr><tr><td class="navbox-abovebelow" colspan="2"><div> <ul><li><a href="/w/index.php?title=%D9%81%D9%87%D8%B1%D8%B3%D8%AA_%D8%A2%D9%85%D9%88%D8%B2%D8%B4%DB%8C_%D8%AC%D8%A7%D9%88%D8%A7_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA&action=edit&redlink=1" class="new" title="فهرست آموزشی جاوا اسکریپت (صفحه وجود ندارد)">فهرست آموزشی جاوا اسکریپت</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">آموزش JS</th><td class="navbox-list navbox-odd" style="text-align:right;border-right-width:2px;border-right-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em"> <ul><li><a href="/w/index.php?title=%D8%A2%D9%85%D9%88%D8%B2%D8%B4_%D8%AC%DB%8C_%D8%A7%D8%B3&action=edit&redlink=1" class="new" title="آموزش جی اس (صفحه وجود ندارد)">صفحه اصلی</a></li> <li><a href="/w/index.php?title=%D9%85%D9%82%D8%AF%D9%85%D9%87%E2%80%8C%D8%A7%DB%8C_%D8%A8%D8%B1_%D8%AC%DB%8C_%D8%A7%D8%B3&action=edit&redlink=1" class="new" title="مقدمه‌ای بر جی اس (صفحه وجود ندارد)">مقدمه</a></li> <li><a href="/w/index.php?title=%D9%82%D9%88%D8%A7%D9%86%DB%8C%D9%86_%D9%88_%D8%A7%D8%B5%D9%88%D9%84_%D8%A7%D9%88%D9%84%DB%8C%D9%87_%D8%B2%D8%A8%D8%A7%D9%86_%D8%AC%DB%8C_%D8%A7%D8%B3&action=edit&redlink=1" class="new" title="قوانین و اصول اولیه زبان جی اس (صفحه وجود ندارد)">قوانین و اصول اولیه</a></li> <li><a href="/w/index.php?title=%D8%AE%D8%B1%D9%88%D8%AC%DB%8C_%D8%AC%DB%8C_%D8%A7%D8%B3&action=edit&redlink=1" class="new" title="خروجی جی اس (صفحه وجود ندارد)">خروجی</a></li> <li><a href="/w/index.php?title=%D8%B9%D8%A8%D8%A7%D8%B1%D8%AA%E2%80%8C%D9%87%D8%A7_%D8%AF%D8%B1_%D8%AC%DB%8C_%D8%A7%D8%B3&action=edit&redlink=1" class="new" title="عبارت‌ها در جی اس (صفحه وجود ندارد)">عبارت‌ها</a></li> <li><a href="/w/index.php?title=%D8%B4%DB%8C%D9%88%D9%87_%D9%86%D9%88%D8%B4%D8%AA%D9%86_%C2%ABSyntax%C2%BB_%D8%B9%D8%A8%D8%A7%D8%B1%D8%A7%D8%AA_%DB%8C%D8%A7_%D8%AF%D8%B3%D8%AA%D9%88%D8%B1%D8%A7%D8%AA_%D8%AF%D8%B1_%D8%AC%DB%8C_%D8%A7%D8%B3&action=edit&redlink=1" class="new" title="شیوه نوشتن «Syntax» عبارات یا دستورات در جی اس (صفحه وجود ندارد)">شیوه نوشتن عبارات</a></li> <li><a href="/w/index.php?title=%D9%86%D8%B8%D8%B1%D8%A7%D8%AA_%DB%8C%D8%A7_%DA%A9%D8%A7%D9%85%D9%86%D8%AA%E2%80%8C%D9%87%D8%A7_%D8%AF%D8%B1_%D8%AC%DB%8C_%D8%A7%D8%B3&action=edit&redlink=1" class="new" title="نظرات یا کامنت‌ها در جی اس (صفحه وجود ندارد)">نظرات یا کامنت‌ها</a></li> <li><a href="/w/index.php?title=%D9%85%D8%AA%D8%BA%DB%8C%D8%B1%D9%87%D8%A7_%D8%AF%D8%B1_%D8%AC%DB%8C_%D8%A7%D8%B3&action=edit&redlink=1" class="new" title="متغیرها در جی اس (صفحه وجود ندارد)">متغیرها</a></li> <li></li> <li></li> <li></li> <li></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">بر اساس منطقه</th><td class="navbox-list navbox-odd" style="text-align:right;border-right-width:2px;border-right-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tr><th scope="row" class="navbox-group" style="background:; color:;;width:1%;padding-left:0em;padding-right:0em;"><div style="padding:0em 0.75em;">افریقا</div></th><td class="navbox-list navbox-even" style="text-align:right;border-right-width:2px;border-right-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em"> <ul><li><a href="/w/index.php?title=%D9%84%D8%B3%D9%88%D8%AA%D9%88&action=edit&redlink=1" class="new" title="لسوتو (صفحه وجود ندارد)">لسوتو</a></li> <li><a href="/w/index.php?title=%D8%A7%D8%B3%D9%88%D8%A7%D8%AA%DB%8C%D9%86%DB%8C&action=edit&redlink=1" class="new" title="اسواتینی (صفحه وجود ندارد)">اسواتینی</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="background:; color:;;width:1%;padding-left:0em;padding-right:0em;"><div style="padding:0em 0.75em;">آسیا</div></th><td class="navbox-list navbox-odd" style="text-align:right;border-right-width:2px;border-right-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em"> <ul><li><a href="/w/index.php?title=%D8%A8%D8%AD%D8%B1%DB%8C%D9%86&action=edit&redlink=1" class="new" title="بحرین (صفحه وجود ندارد)">بحرین</a></li> <li><a href="/w/index.php?title=%D8%A7%D8%B1%D8%AF%D9%86&action=edit&redlink=1" class="new" title="اردن (صفحه وجود ندارد)">اردن</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="background:; color:;;width:1%;padding-left:0em;padding-right:0em;"><div style="padding:0em 0.75em;">امریکا</div></th><td class="navbox-list navbox-even" style="text-align:right;border-right-width:2px;border-right-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em"> <ul><li><a href="/w/index.php?title=%D8%A2%D9%86%D8%AA%DB%8C%DA%AF%D9%88%D8%A2_%D9%88_%D8%A8%D8%A7%D8%B1%D8%A8%D9%88%D8%AF%D8%A7&action=edit&redlink=1" class="new" title="آنتیگوآ و باربودا (صفحه وجود ندارد)">آنتیگوآ و باربودا</a></li> <li><a href="/w/index.php?title=%D8%B3%D9%86%D8%AA_%D9%88%DB%8C%D9%86%D8%B3%D9%86%D8%AA_%D9%88_%DA%AF%D8%B1%D9%86%D8%A7%D8%AF%DB%8C%D9%86%E2%80%8C%D9%87%D8%A7&action=edit&redlink=1" class="new" title="سنت وینسنت و گرنادین‌ها (صفحه وجود ندارد)">سنت وینسنت و گرنادین‌ها</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="background:; color:;;width:1%;padding-left:0em;padding-right:0em;"><div style="padding:0em 0.75em;">اقیانوسیه</div></th><td class="navbox-list navbox-odd" style="text-align:right;border-right-width:2px;border-right-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em"> <ul><li><a href="/w/index.php?title=%D8%A7%D8%B3%D8%AA%D8%B1%D8%A7%D9%84%DB%8C%D8%A7&action=edit&redlink=1" class="new" title="استرالیا (صفحه وجود ندارد)">استرالیا</a></li> <li><a href="/w/index.php?title=%D8%AA%D9%88%D9%88%D8%A7%D9%84%D9%88&action=edit&redlink=1" class="new" title="تووالو (صفحه وجود ندارد)">تووالو</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="background:; color:;;width:1%;padding-left:0em;padding-right:0em;"><div style="padding:0em 0.75em;">اروپا</div></th><td class="navbox-list navbox-even" style="text-align:right;border-right-width:2px;border-right-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em"> <ul><li><a href="/w/index.php?title=%D8%A2%D9%86%D8%AF%D9%88%D8%B1%D8%A7&action=edit&redlink=1" class="new" title="آندورا (صفحه وجود ندارد)">آندورا</a></li></ul> <ul><li><a href="/w/index.php?title=%D9%88%D8%A7%D8%AA%DB%8C%DA%A9%D8%A7%D9%86&action=edit&redlink=1" class="new" title="واتیکان (صفحه وجود ندارد)">واتیکان</a></li></ul> </div></td></tr></table><div></div></td></tr><tr><td class="navbox-abovebelow" colspan="2"><div><div class="inputbox-hidecheckboxes"> <div class="mw-inputbox-centered" style=""><form name="searchbox" class="searchbox" action="/wiki/%D9%88%DB%8C%DA%98%D9%87:%D8%AC%D8%B3%D8%AA%D8%AC%D9%88"><input class="searchboxInput mw-ui-input mw-ui-input-inline" name="search" type="text" value="" placeholder="فهرست‌های جاوااسکریپت را جستجو کنید" size="50" dir="rtl" /> <input type="submit" name="fulltext" class="mw-ui-button" value="🔍" /><input type="hidden" value="Search" name="fulltext"/></form></div> </div></div></td></tr></table></div> <p><br /> </p>