XML DOM Eğitimi

DOM nedir?

DOM, belgeye erişim ve işlemek için standartları tanımlar:

“W3C Belge Object Model (DOM) platform ve dil bağımsız bir arayüzüdür ve programların ve betiklerin belge içeriğini, yapısını ve tarzını dinamik olarak erişim ve güncelleme yeteneği sağlar.”

HTML DOM, HTML belgelerine erişim ve işlemek için standart yöntemleri tanımlar. HTML belgelerini bir ağaç yapısı olarak sunar.

XML DOM, XML belgelerine erişim ve işlemek için standart yöntemleri tanımlar. XML belgelerini bir ağaç yapısı olarak sunar.

HTML veya XML kullanan herkes için DOM anlaşılması zorunludur.

HTML DOM

Tüm HTML elementleri HTML DOM aracılığıyla erişilebilir.

Örnek 1

Bu örnek id="demo" olan HTML öğesinin değerini değiştirir:

<h1 id="demo"> Bu başlık </h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

Deneyin

Örnek 2

Bu örnek HTML belgesinde ilk <h1> öğesinin değerini değiştirir:

<h1> Bu başlık </h1>
<h1> Bu başlık </h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>

Deneyin

Dikkat:HTML belgesi sadece bir <h1> öğesi içeriyorsa bile, getElementsByTagName() yöntemi her zaman bir dizi döndürdüğü için array indeksi [0] belirtmelisiniz.

HTML DOM hakkında daha fazla bilgiyi JavaScript derslerimizde öğrenebilirsiniz.

XML DOM

Tüm XML öğeleri XML DOM aracılığıyla erişilebilir.

XML DOM:

  • XML'in standart nesne modeli
  • XML'in standart programlama arayüzü
  • Platform ve dil bağımsız
  • W3C Standartları

Yani: XML DOM, XML öğelerini nasıl almak, değiştirmek, eklemek veya silmek hakkında standart bir dizedir.

XML öğesinin değerini alır

Bu örnek XML belgesinde ilk <title> öğesinin metin değerini arar:

Örnek

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

XML dosyasını yükler

Bu örnekte kullanılan XML dosyası books.xml'dir.

Bu örnek "books.xml" dosyasını xmlDoc'ye okur ve books.xml dosyasında ilk <title> öğesinin metin değerini arar:

Örnek

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

Deneyin

Örnek Açıklaması

  1. xmlDoc - Ayrıştırıcı tarafından oluşturulan XML DOM nesnesi
  2. getElementsByTagName("title")[0] - İlk <title> elementini almak
  3. childNodes[0] - <title> elementinin ilk alt düğümü (metin düğümü)
  4. nodeValue - Düğümün değeri (metin kendisi)

XML dizisini yükleyin

Bu örnek, metin dizisini XML DOM nesnesine yükler ve JavaScript ile bilgi çıkarır:

Örnek

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

Deneyin

Programlama Arayüzü

DOM, XML'yi bir grup düğüm nesnesi olarak modeller. Düğümleri erişmek için JavaScript veya diğer programlama dilleri kullanılabilir. Bu dersde JavaScript kullanıyoruz.

DOM, programlama arayüzünü bir grup standart özellik ve yöntem tanımlarıyla oluşturur.

ÖzelliklerGenellikle ne olduğunu ifade eder (örneğin, nodename "book").

YöntemlerGenellikle ne yapabileceğinizi ifade eder (örneğin, "book" eylemini silmek gibi).

XML DOM özellikleri

Bu, bazı tipik DOM özellikleridir:

  • x.nodeName - x'nin adı
  • x.nodeValue - x'nin değeri
  • x.parentNode - x'nin ana düğümü
  • x.childNodes - x'nin alt düğümleri
  • x.attributes - x'nin özellik düğümü

注释：Yukarıdaki listede, x bir düğüm nesnesidir.

XML DOM Yöntemleri

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

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