به نام خدا با عرض سلانم و وقت بخی خدمت دوستان گرامی در راستای آموزش جاوا اسکریپت این جلسه به مبحث پیمایش نودها در جاوا اسکریپت خواهیم پرداخت.باماهمراه باشید.
نحوه پیمایش بین گره های DOM
در جلسات گذشته، نحوه انتخاب عناصر به صورت جداگانه در یک صفحه وب را آموختید.اما موارد زیادی وجود دارد که شما نیاز به دسترسی به عنصر فرزند، والدین یا اجداد دارید.برای درک روابط منطقی بین گرهها در درخت DOM، به جلسه نودها در جاوا اسکریپت مراجعه کنید.
گره DOM چندین ویژگی و روش ارائه می دهد که به شما امکان می دهد در ساختار درختی DOM پیمایش کنید و تغییرات را به راحتی انجام دهید.در این بخش نحوه حرکت به سمت بالا، پایین و پهلو در درخت DOM را با استفاده از جاوا اسکریپت یاد خواهیم گرفت.
دسترسی به گره های فرزند
شما می توانید از ویژگی های firstChild
و lastChild
گره DOM برای دسترسی به اولین و آخرین گره فرزند مستقیم یک گره استفاده کنید. اگر گره مورد نظر فرزندی نداشته باشد، null
را برمیگرداند.
به عنوان مثال:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JavaScript Get First and Last Child Nodes</title> </head> <body> <div id="main"> <h1 id="title">My Heading</h1> <p id="hint"><span>This is some text.</span></p> </div> <script> var main = document.getElementById("main"); console.log(main.firstChild.nodeName); // Prints: #text var hint = document.getElementById("hint"); console.log(hint.firstChild.nodeName); // Prints: SPAN </script> <p><strong>Note:</strong> Please check out the browser console by pressing the f12 key on the keyboard.</p> </body> </html>
نکته:nodeName یک پراپرتی خواندنی است که نام گره فعلی را به عنوان یک رشته برمی گرداند.به عنوان مثال، نام تگ را برای گره عنصر،text# برای گره متن، comment#برای گره کامنت، document# برای گره سند، و … را برمی گرداند.
اگر به مثال بالا توجه کنید، nodeName
گره فرزند اول عنصر اصلیDIV به جای H1، مقدار text#رابرمی گرداند.زیرا فضاهای خالی مانند فاصله ها، تب ها، خطوط جدید و … کاراکترهای معتبر هستند و گره های text# را تشکیل می دهند و بخشی از درخت DOM می شوند.بنابراین، از آنجایی که تگ<div>
حاوی یک خط جدید قبل از تگ <h1>
است، بنابراین یک گره text# ایجاد می کند.
برای جلوگیری از بروز مشکل برگرداندن گرههای text# یا comment# از lastChild
و firstChild
، میتوانید از ویژگیهای firstElementChild
و lastElementChild
استفاده کنید تا به ترتیب تنها اولین و آخرین گره عنصر را برگردانید. اما این متد ها ، در IE9 و قبل از آن کار نخواهد کرد.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JavaScript Get Only Element Child Nodes</title> </head> <body> <div id="main"> <h1 id="title">My Heading</h1> <p id="hint"><span>This is some text.</span></p> </div> <script> var main = document.getElementById("main"); console.log(main.firstElementChild.nodeName); // Prints: H1 main.firstElementChild.style.color = "red"; var hint = document.getElementById("hint"); console.log(hint.firstElementChild.nodeName); // Prints: SPAN hint.firstElementChild.style.color = "blue"; </script> <p><strong>Note:</strong> Please check out the browser console by pressing the f12 key on the keyboard.</p> </body> </html>
همچنین، میتوانید از ویژگی childNodes
برای دسترسی به تمام گرههای فرزند یک عنصر معین استفاده کنید، جایی که اولین گره فرزند دارای ایندکس صفر است. به عنوان مثال:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JavaScript Get All Child Nodes</title> </head> <body> <div id="main"> <h1 id="title">My Heading</h1> <p id="hint"><span>This is some text.</span></p> </div> <script> var main = document.getElementById("main"); // First check that the element has child nodes if(main.hasChildNodes()) { var nodes = main.childNodes; // Loop through node list and display node name for(var i = 0; i < nodes.length; i++) { console.log(nodes[i].nodeName); } } </script> <p><strong>Note:</strong> Please check out the browser console by pressing the f12 key on the keyboard.</p> </body> </html>
childNodes
تمام گره های فرزند، از جمله گره های text و comment را برمی گرداند. برای به دست آوردن مجموعه ای از عناصر، میتوانید از پراپرتی children
استفاده کنید.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JavaScript Get All Element Child Nodes</title> </head> <body> <div id="main"> <h1 id="title">My Heading</h1> <p id="hint"><span>This is some text.</span></p> </div> <script> var main = document.getElementById("main"); // First check that the element has child nodes if(main.hasChildNodes()) { var nodes = main.children; // Loop through node list and display node name for(var i = 0; i < nodes.length; i++) { console.log(nodes[i].nodeName); } } </script> <p><strong>Note:</strong> Please check out the browser console by pressing the f12 key on the keyboard.</p> </body> </html>
نحوه دسترسی به گره های والد
با استفاده از ویژگی parentNode
میتوانید برای دسترسی به والد گره مشخص شده در درخت DOM استفاده کنید. parentNode
همیشه برای گره سند null
برمیگرداند، زیرا والد ندارد.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JavaScript Get Parent Node</title> </head> <body> <div id="main"> <h1 id="title">My Heading</h1> <p id="hint"><span>This is some text.</span></p> </div> <script> var hint = document.getElementById("hint"); console.log(hint.parentNode.nodeName); // Prints: DIV console.log(document.documentElement.parentNode.nodeName); // Prints: #document console.log(document.parentNode); // Outputs: null </script> <p><strong>Note:</strong> Please check out the browser console by pressing the f12 key on the keyboard.</p> </body> </html>
نکته: بالاترین گره های درخت DOM را می توان مستقیماً از طریق پراپرتی های document
به انها دسترسی پیدا کرد.برای مثال، عنصر <html> با پراپرتی document.documentElement ، عنصر <head> با ویژگی document.head و عنصر <body> با پراپرتی document.body قابل دسترسی میباشند.
با این حال، اگر می خواهید فقط گره های عنصر را دریافت کنید، می توانید از parentElement
,مانند مثال زیر استفاده کنید:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JavaScript Get Only Parent Element Node</title> </head> <body> <div id="main"> <h1 id="title">My Heading</h1> <p id="hint"><span>This is some text.</span></p> </div> <script> var hint = document.getElementById("hint"); console.log(hint.parentNode.nodeName); // Prints: DIV hint.parentNode.style.backgroundColor = "yellow"; </script> <p><strong>Note:</strong> Please check out the browser console by pressing the f12 key on the keyboard.</p> </body> </html>
دسترسی به گره های خواهر و برادر
برای دسترسی به گره قبلی و بعدی در درخت DOM می توانید از ویژگی های previousSibling
و nextSibling
استفاده کنید.
به عنوان مثال:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JavaScript Get Previous and Next Node</title> </head> <body> <div id="main"> <h1 id="title">My Heading</h1> <p id="hint"><span>This is some text.</span></p><hr> </div> <script> var title = document.getElementById("title"); console.log(title.previousSibling.nodeName); // Prints: #text var hint = document.getElementById("hint"); console.log(hint.nextSibling.nodeName); // Prints: HR </script> <p><strong>Note:</strong> Please check out the browser console by pressing the f12 key on the keyboard.</p> </body> </html>
از طرف دیگر، میتوانید از previousElementSibling
و nextElementSibling
استفاده کنید تا المنت خواهر و برادر قبلی و بعدی را از هر گره text# یا فضای خالی رد کنید.اگر چنین خواهر و برادری وجود نداشته باشد، انگاه null
برگردانده میشود.
به عنوان مثال:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JavaScript Get Previous and Next Sibling Element</title> </head> <body> <div id="main"> <h1 id="title">My Heading</h1> <p id="hint"><span>This is some text.</span></p><hr> </div> <script> var title = document.getElementById("title"); console.log(title.previousSibling.nodeName); // Prints: #text var hint = document.getElementById("hint"); console.log(hint.nextSibling.nodeName); // Prints: HR </script> <p><strong>Note:</strong> Please check out the browser console by pressing the f12 key on the keyboard.</p> </body> </html>
ویژگی textContent
محتوای متن یک گره و همه فرزندان آن را نشان می دهد.
انواع گره های DOM
درخت DOM از انواع مختلفی از گره ها مانند عناصر، text، کامنتهاو ….تشکیل شده است.
هر گره دارای یک ویژگی nodeType
است که می توانید از آن استفاده کنید تا متوجه شوید با چه نوع گره ای سروکار دارید.جدول زیر مهمترین انواع گره ها را فهرست می کند:
دیدگاهتان را بنویسید