XML DOM টিউটোরিয়াল

ডম (DOM) কি?

DOM ডকুমেন্টকে প্রবেশ্য এবং পরিচালনার জন্য একটি প্রমাণপত্র নির্দেশ করে:

“W3C ডকুমেন্ট ওবজেক্ট মডেল (DOM) একটি প্ল্যাটফর্ম এবং ভাষা নির্ভর না করে ইন্টারফেস, যা প্রোগ্রাম এবং স্ক্রিপ্টকে ডকুমেন্টের বিষয়, কাঠামো এবং স্টাইলকে ডাইনামিকভাবে প্রবেশ্য এবং আপডেট করতে অনুমতি দেয়。”

HTML DOM HTML ডকুমেন্টকে প্রবেশ্য এবং পরিচালনার জন্য একটি প্রমাণপত্র নির্দেশ করে। এটি HTML ডকুমেন্টকে একটি ট্রি কাঠামোতে প্রদর্শিত করে。

XML DOM XML ডকুমেন্টকে প্রবেশ্য এবং পরিচালনার জন্য একটি প্রমাণপত্র নির্দেশ করে। এটি XML ডকুমেন্টকে একটি ট্রি কাঠামোতে প্রদর্শিত করে。

যে কোনও ব্যবহারকারী যারা HTML বা XML ব্যবহার করেন, DOM বোঝা প্রয়োজনীয়

HTML DOM

সমস্ত HTML ইলেমেন্টগুলি HTML DOM দ্বারা প্রবেশ্য হয়。

উদাহরণ 1

এই উদাহরণে id="demo"-এর HTML ইলেকট্রনের মার্কাস পরিবর্তন করা হয়:

<h1 id="demo">এটি শিরোনাম</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

স্বয়ং প্রয়াস করুন

উদাহরণ 2

এই উদাহরণে HTML ডকুমেন্টে প্রথম <h1> ইলেকট্রনের মার্কাস পরিবর্তন করা হয়:

<h1>এটি শিরোনাম</h1>
<h1>এটি শিরোনাম</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>

স্বয়ং প্রয়াস করুন

অত্যাশা করা না হলে:যদিও HTML ডকুমেন্টটি শুধুমাত্র একটি <h1> ইলেকট্রন নিয়ে আছে, আপনি তবুও সংখ্যা ইনডেক্স [0] নির্দিষ্ট করতে হবে কারণ getElementsByTagName() মথড সবসময় একটি আইন্ডেক্স আর্রেই ফিরায়।

আপনি আমাদের JavaScript টিউটোরিয়ালে HTML DOM-এর বিষয়ে আরও শিখতে পারেন。

XML DOM

সমস্ত XML ইলেকট্রনকে XML DOM-এর মাধ্যমে পাওয়া যায়。

XML DOM-এর বিষয় হল:

  • XML-এর প্রমাণিত ওবজেক্ট মডেল
  • XML-এর প্রমাণিত প্রোগ্রামিং ইন্টারফেস
  • প্ল্যাটফর্ম এবং ভাষা থেকে স্বাধীন
  • W3C স্ট্যান্ডার্ড

অর্থাৎ: XML DOM-এর বিষয় হল কিভাবে XML ইলেকট্রনকে পাওয়া, পরিবর্তন, যোগ করা বা মুছে ফেলা হয় এবং এটি একটি প্রমাণিত স্ট্যান্ডার্ড।

XML ইলেকট্রনের মার্কাস পাওয়া

এই উদাহরণে XML ডকুমেন্টে প্রথম <title> ইলেকট্রনের টেক্সট মার্কাস অনুসন্ধান করা হয়:

উদাহরণ

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

XML ফাইল লোড করা

এই উদাহরণে ব্যবহৃত XML ফাইল books.xml

এই উদাহরণে "books.xml"-কে xmlDoc-তে পড়া হয় এবং books.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>

স্বয়ং প্রয়াস করুন

উদাহরণ ব্যাখ্যা

  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>

স্বয়ং প্রয়াস করুন

প্রোগ্রামিং ইন্টারফেস

ডম একটি গ্রুপ নোড অবজেক্ট হিসাবে XML কে মডেলিং করে। নোডগুলোকে JavaScript বা অন্যান্য প্রোগ্রামিং ভাষা দ্বারা প্রত্যাহার করা যায়। এই ট্যুটোরিয়ালে আমরা JavaScript ব্যবহার করি。

ডম প্রোগ্রামিং ইন্টারফেস একটি গ্রুপ স্ট্যান্ডার্ড প্রতিমান ও পদ্ধতির দ্বারা নির্ধারিত

প্রতিমানসাধারণত এটি কী (যেমন nodename হল "book")

পদ্ধতিসাধারণত এটি কী করা যায় (যেমন "book" নামক পদক্ষেপ মোছার কাজ)

XML 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 是一个节点对象。