با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، مبحث کار با Navigation در جاوا اسکریپت به چگونگی حرکت در درخت node (ارتباط بین عناصر زیر مجموعه های یک عنصر HTML یا عناصر هم سطح و یا والد آن) اشاره دارد، این مبحث البته در زبان های دیگری همانند CSS نیز ارائه شده است. جاوا اسکریپت به شما این امکان را می دهد که با استفاده از یک عنصر HTML بتوانید به عناصر زیر مجموعه ، هم سطح و یا عناصر والد آن ، دسترسی پیدا کنید،که به این حرکت اصولا Navigation در جاوا اسکریپت اطلاق می شود. برای آشنایی با چگونگی کار با این قابلیت در ادامه ی این مبحث با ما همراه باشید.
در ادامه ی این مبحث به چگونگی Navigation در جاوا اسکریپت برای دستیابی به عناصر مرتبط با یک عنصر HTML می پردازیم.
با توجه به استاندارد HTML DOM، همه چیز در یک سند HTML یک گره است:
با HTML DOM، تمام گره ها در درخت گره می توانند توسط جاوا اسکریپت دسترسی پیدا کنند.
گره های جدید می توانند ایجاد شوند و تمام گره ها را می توان تغییر داد یا حذف کرد.
گره ها در درخت node یک رابطه سلسله مراتبی با یکدیگر دارند.
اصطلاحات پدر و مادر، فرزند و خواهر و برادر برای توصیف روابط بین عناصر HTML در صفحه وب استفاده می شود.
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <head> <title>DOM Tutorial</title> </head> <body> <h1>DOM Lesson one</h1> <p>Hello world!</p> </body> </html> |
سلسله مراتب درخت node در HTML فوق به این صورت است :
شما می توانید با استفاده از خصوصیات node بین node ها در جاوا اسکریپت حرکت کنید:
نکته : یک خطای رایج در پردازش DOM این است که انتظار داشته باشید یک گره عنصر حاوی متن باشد.
مثال-
1 | <title id="demo">DOM Tutorial</title> |
گره عنصر <title> (در مثال بالا) شامل متن نیست.
این شامل یک گره متنی با مقدار “DOM Tutorial” است.
مقدار گره متنی می تواند توسط ویژگی innerHTML گره قابل دسترسی باشد:
1 | var myTitle = document.getElementById("demo").innerHTML; |
دسترسی به خصوصیت innerHTML همانند دسترسی به nodeValue فرزند اول است :
1 | var myTitle = document.getElementById("demo").firstChild.nodeValue; |
دسترسی به اولین فرزند نیز می تواند به این صورت انجام شود:
1 | var myTitle = document.getElementById("demo").childNodes[0].nodeValue; |
تمام مثال های زیر (۳) متن یک عنصر <h1> را بازیابی می کند و آن را به عنصر <p> کپی می کند:
1 2 3 4 5 6 7 8 9 10 11 12 | <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> |
مثال-۲
1 2 3 4 5 6 7 8 9 10 11 12 | <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> |
مثال-۳
1 2 3 4 5 6 7 8 9 10 11 12 | <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 برای بازیابی محتوای یک عنصر HTML استفاده می کنیم.
با این حال، یادگیری روش های دیگر در بالا برای درک ساختار درخت و ناوبری DOM مفید است.
دو خصوصیت خاص که اجازه دسترسی به سند کامل را می دهند وجود دارد:
document.body – قسمتی از سند
document.documentElement – یک سند کامل
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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 نام گره را مشخص می کند.
1 2 3 4 5 6 | <h1 id="id01">My First Page</h1> <p id="id02"></p> <script> document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName; </script> |
نکته : nodeName همیشه حاوی نام تگ فوقانی عنصر HTML است.
مقدار nodeValue مقدار گره را مشخص می کند.
خصوصیت nodeType فقط خواندنی است، این نوع یک node را برمی گرداند.
1 2 3 4 5 6 | <h1 id="id01">My First Page</h1> <p id="id02"></p> <script> document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType; </script> |
مهمترین ویژگیهای nodeType عبارتند از:
Node | Type | Example |
---|---|---|
ELEMENT_NODE | ۱ | <h1 class=”heading”>Pvlearn</h1> |
ATTRIBUTE_NODE | ۲ | class = “heading” (deprecated) |
TEXT_NODE | ۳ | Pvlearn |
COMMENT_NODE | ۸ | <!– This is a comment –> |
DOCUMENT_NODE | ۹ | The HTML document itself (the parent of <html>) |
DOCUMENT_TYPE_NODE | ۱۰ | <!Doctype html> |
نوع ۲ در HTML DOM خالی است (اما کار می کند). این در DOM XML متداول نیست.
عناصر HTML هر صفحه وب یک با یک سلسله مراتبی خاصی نسبت به ساختاری که تعریف شده اند با یکدیگر مرتبط اند، که معمولا به آن درخت NODE اطلاق می شود. جاوا اسکریپت اجازه ی پیشمایش درخت node و دسترسی به عناصر html مرتبط با یک عنصر را می دهد،از این رو برای آشنایی شما با این قابلیت مباحث کار با Navigation در جاوا اسکریپت در این بخش ارائه کردیم.
زهرا
بسیار عالی توضیح داده شده بود.تشکر فراوان