پیمایش DOM (DOM Navigation)
«پیمایش DOM» یعنی حرکت بین گره ها (Node) در صفحه. DOM یک درخت است؛ مثل شجره نامه کلاس. با آن می توان والد، فرزند و هم سطح ها را پیدا کرد و متن را خواند یا عوض کرد.
گره ها در DOM
هر چیز در سند یک «گره (Node)» است: سند، عنصر، متن، ویژگیِ نگهداری شده، و حتی نظر. بنابراین، با جاوااسکریپت می توان همه را دسترسی داد، ساخت یا حذف کرد.
روابط والد، فرزند، هم سطح
والد یعنی یک سطح بالاتر؛ فرزند یعنی داخلش؛ هم سطح یعنی گره هایی با والد مشترک. مثل دفتر مدرسه: کلاس والد نیمکت هاست؛ دانش آموزها هم سطح هم هستند.
پیمایش بین گره ها با ویژگی ها
با ویژگی های parentNode، firstChild، lastChild، nextSibling و previousSibling حرکت کن.
const h1 = document.getElementById("id01");
const parent = h1.parentNode;
const first = parent.firstChild;
const next = h1.nextSibling;
خواندن متن با innerHTML
«innerHTML» محتوای یک عنصر را می دهد. این راه ساده و رایج است.
const h1Text = document.getElementById("id01").innerHTML;
document.getElementById("id02").innerHTML = h1Text;
nodeValue و firstChild
گاهی متن، گره متن است. پس با firstChild.nodeValue یا childNodes[0].nodeValue هم می توان خواند.
const val1 = document.getElementById("id01").firstChild.nodeValue;
document.getElementById("id02").innerHTML = val1;
const val2 = document.getElementById("id01").childNodes[0].nodeValue;
document.getElementById("id02").innerHTML = val2;
گره های ریشه: body و documentElement
برای دسترسی کامل از document.body و document.documentElement کمک بگیر.
document.getElementById("demo").innerHTML = document.body.innerHTML;
document.getElementById("demo").innerHTML = document.documentElement.innerHTML;
nodeName و nodeType
«nodeName» نام گره است؛ برای عنصر برابر نام تگ است. «nodeType» نوع گره را عددی برمی گرداند.
const tagName = document.getElementById("id01").nodeName;
document.getElementById("id02").innerHTML = tagName;
const t = document.getElementById("id01").nodeType;
document.getElementById("id02").innerHTML = t;
گام های عملی
- عنصر هدف را با
getElementByIdبگیر. - با
parentNodeیاchildNodesجابه جا شو. - با
innerHTMLمتن را بخوان یا بنویس.
نکته: متنِ عنصر داخل گره متن است؛ گاهی باید firstChild.nodeValue را بخوانی.
لینک های مرتبط
- شنونده رویداد؛ برای اتصال رویدادها به عناصر پیمایش شده.
- گره های DOM؛ آشنایی عمیق با انواع گره ها.
جمع بندی سریع
- DOM یک درخت از گره هاست.
- با parent/child/sibling جابه جا شو.
- متن را با innerHTML یا nodeValue بگیر.
- ریشه ها: body و documentElement.