مقدمه (DOM Introduction)
در این «مقدمه DOM» می بینی DOM چطور کار می کند. DOM یعنی مدل شیءِ سند. یعنی بتوانیم محتوا و ساختار صفحه را تغییر دهیم، بدون رفرش کامل.
DOM چیست؟
DOM یک استاندارد جهانی است. مرورگر سند را به شکل درخت نشان می دهد. سپس با زبان ها مثل JavaScript کنترلش می کنیم.
نکته: برای شروع سریع، از مقدمه DOM کمک بگیر. سپس به گره ها (DOM Nodes) برو.
HTML DOM: تغییر یک عنصر
HTML DOM یعنی دسترسی به عناصر HTML. با شناسه عنصر، متنش را عوض می کنیم.
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
<\/script>
گاهی چند <h1> داریم. پس باید عنصر اول را با ایندکس صفر بگیریم.
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
<\/script>
XML DOM: گرفتن مقدار یک عنصر
XML DOM هم شبیه است. با نام تگ مقدار متن را می خوانیم.
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
بارگذاری یک فایل XML
با XMLHttpRequest یک فایل XML می خوانیم. سپس مقدار نخستین <title> را نشان می دهیم.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var 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 = xml.responseXML;
document.getElementById("demo").innerHTML = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}
<\/script>
</body>
</html>
بارگذاری یک رشته XML
گاهی XML را به صورت متن می سازیم. سپس با DOMParser تبدیلش می کنیم.
<html>
<body>
<p id="demo"></p>
<script>
var text;
var parser;
var xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"<\/book><\/bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text, "text/xml");
document.getElementById("demo").innerHTML = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
<\/script>
</body>
</html>
رابط برنامه نویسی DOM
DOM مجموعه ای از ویژگی ها (Properties) و متدها (Methods) دارد. با آن ها گره ها را می خوانیم یا تغییر می دهیم.
ویژگی های پرکاربرد
- x.nodeName: نام گره x.
- x.nodeValue: مقدار گره x.
- x.parentNode: والد x.
- x.childNodes: فرزندان x.
- x.attributes: ویژگی های x.
متدهای پرکاربرد
- x.getElementsByTagName(name): همه تگ های name.
- x.appendChild(node): افزودن فرزند به x.
- x.removeChild(node): حذف فرزند از x.
جمع بندی سریع
- DOM درختِ سند است.
- HTML DOM برای عناصر HTML است.
- XML DOM برای عناصر XML است.
- با ویژگی و متد، گره ها کنترل می شوند.
- «مقدمه DOM» راه شروع سریع است.
نکته: برای تمرین بیشتر AJAX، به مثال ها (AJAX Examples) سر بزن.