ناوبری (DOM Navigating)
ناوبری DOM یعنی حرکت بین گره ها با «روابط». «گره (Node)» همان تگ یا متن است. با این کار، والد، فرزند و خواهر برادرها را پیدا می کنیم. مثل پیدا کردن کلاس، نیمکت و هم نیمکتی در مدرسه.
روابط اصلی گره ها در DOM
روابط رایج: parentNode، childNodes، firstChild، lastChild، nextSibling، previousSibling. این ها مسیر حرکت ما هستند.
یافتن والد (parentNode)
می خواهیم والد اولین <book> را نمایش دهیم.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
function myFunction(xml) {
var xmlDoc;
var x;
xmlDoc = xml.responseXML;
x = xmlDoc.getElementsByTagName("book")[0];
document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}
<\/script>
</body>
</html>
دوری از گره های متن خالی
برخی مرورگرها فاصله خالی را «گره متن» حساب می کنند. پس nextSibling ممکن است به متن خالی برسد. با این تابع، فقط گره «عنصری (Element)» می گیریم.
<script>
function get_nextSibling(n) {
var y;
y = n.nextSibling;
while (y.nodeType != 1) {
y = y.nextSibling;
}
return y;
}
<\/script>
گرفتن اولین فرزند عنصری
اگر firstChild متن خالی باشد، با یک کمک تابع اولین «عنصر» را می یابیم.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc;
var x;
xmlDoc = xml.responseXML;
x = get_firstChild(xmlDoc.getElementsByTagName("book")[0]);
document.getElementById("demo").innerHTML = x.nodeName;
}
function get_firstChild(n) {
var y;
y = n.firstChild;
while (y.nodeType != 1) {
y = y.nextSibling;
}
return y;
}
<\/script>
</body>
</html>
نمونه های بیشتر ناوبری DOM
lastChild() — پیدا کردن آخرین فرزند عنصری.
nextSibling() — یافتن خواهر برادر بعدی به صورت امن.
previousSibling() — یافتن خواهر برادر قبلی بدون افتادن در متن خالی.
گام های عملی سریع
- XML را بارگذاری کن و xmlDoc بساز.
- گره هدف را با تگ پیدا کن.
- با روابط DOM بین گره ها حرکت کن.
ادامه مسیر: بخش «پیمایش DOM» برای حلقه زدن، و «دریافت گره ها» برای گرفتن مجموعه ها.
جمع بندی سریع
- ناوبری DOM یعنی حرکت با روابط گره ها.
- فاصله خالی می تواند مزاحم مسیر شود.
- کمک توابع، عناصر واقعی را برمی گردانند.
- از parent، child و sibling ها استفاده کن.