آموزش جاوا اسکریپت – پیمایش DOM در جاوا اسکریپت

در این بخش از سری آموزش جاوا اسکریپت قصد داریم شما را با پیمایش DOM در جاوا اسکریپت آشنا کنیم.

پیمایش بین گره های DOM

در بخش های قبلی نحوه انتخاب المان ها در صفحه وب را یاد گرفتید. اما موقعیت های مختلفی وجود دارد که نیاز به دسترسی به یک فرزند, والد یا اجداد المان دارد.

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

گره DOM چندین خصوصیت و متد برای پیامیش بین ساختار درختی DOM و انجام خیلی آسان تغییر ارایه می دهد.

در بخش زیر نحوه پیمایش DOM در جاوا اسکریپت در جهت های بالا, پایین و چپ و راست را یاد می گیرید.

دسترسی به گره های فرزند

شما می توانید از خصوصیات firstChild و lastChild گره DOM برای درستی مستقیم به گره فرزند اول و آخر استفاده کنید.

اگر هیچ گره‌ی وجود ندارد مقدار null برگشت داده می شود.

<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>

<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>

نکته: nodeName یک خصوصیت فقط-خواندنی است که مقدار نام گره فعلی را بصورت رشته (string) برگشت می دهد. برای مثال, نام تگ را برای گره المان, #text برای گره متن , #comment برای گره کامنت و …

اگر متوجه شده باشید در مثال بالا, nodeName از اولین فرزند گره المان DIV اصلی, مقدار #text را به جای h1 برگشت می دهد چرا که فاصله ها, تب, خط جدید و غیره کاراکترهای معتبر از گره #text هستند و به یک بخش از درخت DOM تبدیل شده اند.

بنابراین, از آنجا که تگ <div> شامل یک خط جدید قبل از تگ <h1> هستند, بنابراین یک گره #text را می سازند.

برای جلوگیری از مشکل برگشت دادن گره های #text و #comment با firstChild و lastChild , باید از خصوصیت جایگزین firstElementChild و lastElementChild برای برگشت دادن اولین و آخرین المان گره استفاده کنید.

<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");
alert(main.firstElementChild.nodeName); // Outputs: H1
main.firstElementChild.style.color = "red";

var hint = document.getElementById("hint");
alert(hint.firstElementChild.nodeName); // Outputs: SPAN
hint.firstElementChild.style.color = "blue";
</script>

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

</div>

var main = document.getElementById("main");

alert(main.firstElementChild.nodeName); // Outputs: H1

main.firstElementChild.style.color = "red";

var hint = document.getElementById("hint");

alert(hint.firstElementChild.nodeName); // Outputs: SPAN

hint.firstElementChild.style.color = "blue";

</script>

مشابه آن می توانید از خصوصیت childNodes برای دسترسی به همه گره های فرزند المان داده شده که اولین فرزند گره با ایندکس ۰ است, بهره ببرید.

<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++) {
        alert(nodes[i].nodeName);
    }
}
</script>

<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++) {

alert(nodes[i].nodeName);

}

</script>

childNodes همه گره های فرزند شامل گره های غیر-المان مثل متن یا گره های کامنت را برگشت می دهد.

برای دریافت مجموعه ای از المان ها می توانید به جای آن از children بهره ببرید.

<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++) {
        alert(nodes[i].nodeName);
    }
}
</script>

<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++) {

alert(nodes[i].nodeName);

}

</script>

دسترسی به گره های والد

می توانید از parentNode برای دسترسی به والد های گره مشخص شده در درخت DOM استفاده کنید.

parentNode همیشه برای گره document مقدار null را برگشت می دهد چرا که هیچ والدی ندارد.

<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");
alert(hint.parentNode.nodeName); // Outputs: DIV
alert(document.documentElement.parentNode.nodeName); // Outputs: #document
alert(document.parentNode); // Outputs: null
</script>

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

</div>

var hint = document.getElementById("hint");

alert(hint.parentNode.nodeName); // Outputs: DIV

alert(document.documentElement.parentNode.nodeName); // Outputs: #document

alert(document.parentNode); // Outputs: null

</script>

نکته: بالاترین گره های درخت DOM می توانید مستقیما به عنوان خصوصیات سند قابل دسترس باشند. برای مثال, المان <html> می تواند با document.documentElement قابل دسترس باشد. از آنجا که المان <head> می تواند با خصوصیت document.head قابل دسترس باشد. پس به المان <body> نیز با خصوصیت document.body دسترسی داشته باشید.

به هرحال, اگر می خواهید فقط گره های المان را بدست بیارید می توانید از parentElement بصورت زیر استفاده کنید:

<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");
alert(hint.parentNode.nodeName); // Outputs: DIV
hint.parentNode.style.backgroundColor = "yellow";
</script>

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

</div>

var hint = document.getElementById("hint");

alert(hint.parentNode.nodeName); // Outputs: DIV

hint.parentNode.style.backgroundColor = "yellow";

</script>

دسترسی به گره های هم نیا (sibling)

می توانید از previousSibling و nextSibling برای دسترسی گره های قبل و بعد در درخت DOM استفاده کنید.

<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");
alert(title.previousSibling.nodeName); // Outputs: #text

var hint = document.getElementById("hint");
alert(hint.nextSibling.nodeName); // Outputs: HR
</script>

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

</div>

var title = document.getElementById("title");

alert(title.previousSibling.nodeName); // Outputs: #text

var hint = document.getElementById("hint");

alert(hint.nextSibling.nodeName); // Outputs: HR

</script>

می توانید از previousElementSibling و nextElementSibling برای دریافت المان های هم سطح قبلی و بعدی کناری استفاده کنید. اگر هیچ گره هم نیا (sibling) وجود نداشته باشد مقدار null را برگشت می دهد.

<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");
alert(hint.previousElementSibling.nodeName); // Outputs: H1
alert(hint.previousElementSibling.textContent); // Outputs: My Heading

var title = document.getElementById("title");
alert(title.nextElementSibling.nodeName); // Outputs: P
alert(title.nextElementSibling.textContent); // Outputs: This is some text.
</script>

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

</div>

var hint = document.getElementById("hint");

alert(hint.previousElementSibling.nodeName); // Outputs: H1

alert(hint.previousElementSibling.textContent); // Outputs: My Heading

var title = document.getElementById("title");

alert(title.nextElementSibling.nodeName); // Outputs: P

alert(title.nextElementSibling.textContent); // Outputs: This is some text.

</script>

خصوصیت textContent محتوای متن یک گره و همه فرزندان آن را برگشت می دهد. در بخش دستکاری DOM می توانید بیشتر درباره آن یاد بگیرید.

انواع گره های DOM

درخت DOM شامل انواع مختلف گره ها مثل المان, متن, کامنت و غیره… است.

هر گره یک خصوصیت nodeType دارد که می توانید از آن برای پیدا کردن نوع گره استفاده کنید.

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

ثابت	مقدار	توضیح
`ELEMENT_NODE`	۱	یک گره المان مانند `<p>` یا `<img>`.
`TEXT_NODE`	۳	متن داخلی المان
`COMMENT_NODE`	۸	یک گره کامنت مثل `<!-- some comment -->`
`DOCUMENT_NODE`	۹	یک گره سند مثل والد سند `<html>`
`DOCUMENT_TYPE_NODE`	۱۰	یک نوع گره سند مثل `<!DOCTYPE html>` برای سند HTML5

امیدوارم از آموزش نحوه پیمایش DOM در جاوا اسکریپت نهایت استفاده را برده باشید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

آموزش جاوا اسکریپت – پیمایش DOM در جاوا اسکریپت

پیمایش بین گره های DOM

دسترسی به گره های فرزند

دسترسی به گره های والد

دسترسی به گره های هم نیا (sibling)

انواع گره های DOM

آموزش جاوا اسکریپت – کوکی ها در جاوا اسکریپت

آموزش جاوا اسکریپت – اعتبارسنجی فرم در جاوا اسکریپت

آموزش جاوا اسکریپت – Regular Expression در جاوا اسکریپت ۲

آموزش جاوا اسکریپت – Regular Expression در جاوا اسکریپت ۱

لغو پاسخ

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

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه