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

نحوه پیمایش بین گره های 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>

<!DOCTYPE html>

<head>

<title>JavaScript Get First and Last Child Nodes</title>

</head>

<body>

<h1 id="title">My Heading</h1>

</div>

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>

<!DOCTYPE html>

<head>

<title>JavaScript Get Only Element Child Nodes</title>

</head>

<body>

<h1 id="title">My Heading</h1>

</div>

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>

<!DOCTYPE html>

<head>

<title>JavaScript Get All Child Nodes</title>

</head>

<body>

<h1 id="title">My Heading</h1>

</div>

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>

<!DOCTYPE html>

<head>

<title>JavaScript Get All Element Child Nodes</title>

</head>

<body>

<h1 id="title">My Heading</h1>

</div>

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>

<!DOCTYPE html>

<head>

<title>JavaScript Get Parent Node</title>

</head>

<body>

<h1 id="title">My Heading</h1>

</div>

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>

<!DOCTYPE html>

<head>

<title>JavaScript Get Only Parent Element Node</title>

</head>

<body>

<h1 id="title">My Heading</h1>

</div>

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>

<!DOCTYPE html>

<head>

<title>JavaScript Get Previous and Next Node</title>

</head>

<body>

<h1 id="title">My Heading</h1>

</div>

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>

<!DOCTYPE html>

<head>

<title>JavaScript Get Previous and Next Sibling Element</title>

</head>

<body>

<h1 id="title">My Heading</h1>

</div>

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

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

سایر مقالات:

آموزش پیاده سازی کتابخانه والی در برنامه نویسی اندروید

سلکتورها در جاوا اسکریپت | JavaScript DOM Selectors

برای امتیاز به این نوشته کلیک کنید!

[کل: 1 میانگین: 4]

اشتراک‌گذاری

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

اضافه کردن ، ویرایش یا حذف المنت ها در جاوا اسکریپت | JavaScript DOM Manipulation نوشته بعد

علی فرجی

علی فرجی هستم، برنامه نویس جاوا اسکریپت و ریکت با بیش از 5 سال تجربه. من عاشق برنامه نویسیم و همیشه به دنبال یادگیری چیزهای جدید هستم.همچنین یکی از بنیانگذار های سایت کدایت ، یک سایت آموزش برنامه نویسی در حوزه جاوا اسکریپت، ریکت، اندروید و ... هستم. امیدوارم بتوانم با دانش و تجربه خود به سایر برنامه نویسان کمک کنم تا در این زمینه پیشرفت کنند.