دسترسی (DOM Accessing)
اینجا یاد می گیری «دسترسی (Access)» به گره های DOM را انجام دهی. DOM یعنی مدل شیءِ سند. سپس با سه روش ساده سراغ هر گره می رویم و نامش را می خوانیم.
سه روش دسترسی به گره ها
طبق منبع سه راه داریم: 1) متد getElementsByTagName 2) پیمایش درخت 3) پیمایش با رابطه های خویشاوندی.
- استفاده از getElementsByTagName برای برگرداندن تگ های هم نام.
- پیمایش (Traverse) کل درخت با حلقه و فیلتر نوع گره.
- راه رفتن روی والد، فرزند و همسایه ها.
استفاده از getElementsByTagName
این متد همه عناصر با یک نام خاص را می دهد. سپس با «ایندکس (Index)» سراغ هرکدام می رویم. ایندکس از صفر شروع می شود.
<!DOCTYPE html>
<html>
<body>
<p id="out"></p>
<script>
var x;
var third;
x = xmlDoc.getElementsByTagName("title");
third = x[2];
document.getElementById("out").innerHTML = third.childNodes[0].nodeValue;
<\/script>
</body>
</html>
نکته: برای دریافت همه <title> های سند، از xmlDoc.getElementsByTagName("title") استفاده کن.
طول فهرست گره ها و حلقه
ویژگی length تعداد گره ها را می دهد. بنابراین با حلقه for روی آن ها حرکت می کنیم.
<!DOCTYPE html>
<html>
<body>
<div id="list"></div>
<script>
var x;
var i;
var html;
html = "";
x = xmlDoc.getElementsByTagName("title");
for (i = 0; i < x.length; i++) {
html += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("list").innerHTML = html;
<\/script>
</body>
</html>
پیمایش گره ها با نوع گره (nodeType)
گاهی فقط عناصر مهم اند. بنابراین فقط nodeType == 1 را پردازش کن. واحد درسی شبیه فیلتر کلاس هاست.
<!DOCTYPE html>
<html>
<body>
<div id="names"></div>
<script>
var root;
var children;
var i;
var txt;
txt = "";
root = xmlDoc.documentElement;
children = root.childNodes;
for (i = 0; i < children.length; i++) {
if (children[i].nodeType == 1) {
txt += children[i].nodeName + "<br>";
}
}
document.getElementById("names").innerHTML = txt;
<\/script>
</body>
</html>
پیمایش با رابطه ها: firstChild و nextSibling
می خواهی بین همسایه ها بچرخی؟ از firstChild شروع کن و با nextSibling جلو برو.
<!DOCTYPE html>
<html>
<body>
<div id="fields"></div>
<script>
var book;
var count;
var y;
var i;
var out;
out = "";
book = xmlDoc.getElementsByTagName("book")[0];
count = book.childNodes.length;
y = book.firstChild;
for (i = 0; i < count; i++) {
if (y.nodeType == 1) {
out += y.nodeName + "<br>";
}
y = y.nextSibling;
}
document.getElementById("fields").innerHTML = out;
<\/script>
</body>
</html>
نکات تکمیلی کوتاه
- documentElement یعنی ریشه سند.
- nodeName نام گره را می دهد.
- nodeType نوع گره را مشخص می کند.
- مشاهده ریشه در ادیتور
جمع بندی سریع
- getElementsByTagName سریع و ساده است.
- length برای حلقه خیلی مهم است.
- فقط عناصر را با nodeType == 1 بگیر.
- firstChild و nextSibling برای گردشند.
- دسترسی DOM پایه جست وجوست.