تدریس XML DOM

DOM چیست؟

DOM روش‌های استاندارد دسترسی و عملیات بر روی مستند را تعریف می‌کند:

“W3C Document Object Model (DOM) یک رابط بی‌ربط با پلتفرم و زبان است که به برنامه‌ها و اسکریپت‌ها اجازه می‌دهد محتوای، ساختار و استایل مستند را به صورت دینامیک دسترسی پیدا کنند و به‌روزرسانی کنند.”

HTML DOM روش‌های استاندارد دسترسی و عملیات بر روی مستند HTML را تعریف می‌کند. آن مستند HTML را به صورت ساختار درختی نمایش می‌دهد.

XML DOM روش‌های استاندارد دسترسی و عملیات بر روی مستند XML را تعریف می‌کند. آن مستند XML را به صورت ساختار درختی نمایش می‌دهد.

برای هر کسی که از HTML یا XML استفاده می‌کند، درک DOM ضروری است.

HTML DOM

تمام عناصر HTML می‌توانند از طریق HTML DOM دسترسی پیدا کنند.

مثال 1

این مثال مقدار علامت HTML با id="demo" را تغییر می‌دهد:

<h1 id="demo">این عنوان است</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

آزمایش کنید

مثال 2

این مثال مقدار اولین علامت <h1> در مستند HTML را تغییر می‌دهد:

<h1>این عنوان است</h1>
<h1>این عنوان است</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>

آزمایش کنید

توجه داشته باشید:حتی اگر مستند HTML فقط یک علامت <h1> را شامل شود، شما همچنان باید شماره‌ی نشانه‌ی [0] را مشخص کنید، زیرا روش getElementsByTagName() همیشه یک آرایه را برمی‌گرداند.

شما می‌توانید更多信息 در مورد HTML DOM در آموزش‌های JavaScript ما یاد بگیرید.

XML DOM

تمام علامت‌های XML قابل دسترسی از طریق XML DOM هستند.

XML DOM است:

  • مدل علامت استاندارد XML
  • رابط برنامه‌نویسی استاندارد XML
  • قابل استفاده در هر پلتفرم و زبان
  • استانداردهای W3C

به عبارت دیگر: XML DOM استانداردی برای دریافت، تغییر، اضافه کردن یا حذف علامت‌های XML است.

مقدار علامت XML را دریافت کنید

این مثال متن ارزش اولین علامت <title> در مستند XML را جستجو می‌کند:

مثال

txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

بارگذاری فایل XML

فایل XML مورد استفاده در این مثال books.xml است.

این مثال "books.xml" را به xmlDoc می‌خواند و متن ارزش اولین علامت <title> در books.xml را جستجو می‌کند:

مثال

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

آزمایش کنید

توضیح مثال

  1. xmlDoc - شیء XML DOM ایجاد شده توسط تحلیل‌گر
  2. getElementsByTagName("title")[0] - دریافت اولین عنصر <title>
  3. childNodes[0] - اولین نقطه فرزند <title> (نقطه متنی)
  4. nodeValue - مقدار نقطه (متنی خود)

بارگذاری رشته XML

این مثال شامل بارگذاری یک رشته متنی به یک شیء XML DOM و استفاده از JavaScript برای استخراج اطلاعات از آن است:

مثال

<html>
<body>
<p id="demo"></p>
<script>
var text, parser, xmlDoc;
text = "<bookstore><book>" +
"<title>雅舍谈吃</title>" +
"<author>梁实秋</author>" +
"<year>2013</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 XML را به مجموعه‌ای از نقطه‌های شیء مدل‌سازی می‌کند. می‌توان از JavaScript یا زبان برنامه‌نویسی دیگری برای دسترسی به نقطه‌ها استفاده کرد. در این آموزش، ما از JavaScript استفاده می‌کنیم.

رابط برنامه‌نویسی DOM با مجموعه‌ای از ویژگی‌ها و روش‌های استاندارد تعریف شده است.

ویژگیمعمولاً به چیزی که چیست اشاره دارد (مثلاً nodename "book" است).

روشمعمولاً به کاری که می‌توان انجام داد اشاره دارد (مثلاً حذف عمل "book").

ویژگی‌های XML DOM

این‌ها برخی از ویژگی‌های DOM نمونه‌ای هستند:

  • x.nodeName - نام x
  • x.nodeValue - مقدار x
  • x.parentNode - نقطه والد x
  • x.childNodes - نقطه‌های فرزند x
  • x.attributes - نقطه属性 x

注释：در لیست بالا، x یک شیء نقطه است.

XML DOM 方法

  • x.getElementsByTagName(name) - 获取拥有指定标签名称的所有元素
  • x.appendChild(node) - 向 x 插入一个子节点
  • x.removeChild(node) - 从 x 中删除子节点

注释：在上面的列表中，x 是一个节点对象。