به نام خدا با عرض سلانم و وقت بخی خدمت دوستان گرامی در راستای آموزش جاوا اسکریپت این جلسه به مبحث پیمایش نودها در جاوا اسکریپت خواهیم پرداخت.باماهمراه باشید.

نحوه پیمایش بین گره های 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 است که می توانید از آن استفاده کنید تا متوجه شوید با چه نوع گره ای سروکار دارید.جدول زیر مهمترین انواع گره ها را فهرست می کند: