DOM erişmek ve belgeleri manipüle etmek için bir standart tanımlar.
XML DOM ağaç yapısı olarak bir XML belgesi sunar.
HTML DOM ağaç yapısı olarak bir HTML belgesi sunar.
DOM anlama HTML veya XML ile çalışan herkes için bir zorunluluktur.
XML DOM Ağacı Örneği
DOM nedir?
DOM XML ve HTML gibi belgeleri erişmek için bir standart tanımlar:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
DOM 3 farklı parçalar / seviyeleri ayrılır:
- Core DOM - herhangi bir yapısal belge için standart model
- XML DOM - XML belgeleri için standart model
- HTML DOM - HTML belgeleri için standart modeli
DOM tanımlayan objects and properties tüm belge elemanları ve methods (interface) erişmek için.
HTML DOM
HTML DOM HTML belgeleri erişen ve işlenmesi için standart bir yol tanımlar.
Tüm HTML öğeleri, HTML DOM üzerinden erişilebilir.
HTML DOM tanımlayan objects, properties and methods tüm HTML elemanları.
Bir HTML öğesinin değerini değiştirin
Bu örnek id = "demo" ile bir HTML öğesinin değerini değiştirir:
Örnek
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script> Kendin dene " Bu örnek ilk değerini değiştirir <h1> HTML belgesindeki elemanı:
Örnek
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script> Kendin dene " Not: Hatta HTML belgesi bidonlara sadece BİR eğer <h1> girdiğinden [0] dizi indeksi belirtmek zorunda eleman, getElementsByTagName() metodu her zaman dizisi döndürür.
Bizim HTML DOM hakkında çok daha fazla bilgi edinebilirsiniz JavaScript öğretici .
XML DOM
XML DOM XML belgeleri erişmek ve değiştirmek için standart bir yol tanımlar.
Tüm XML öğelerinin XML DOM üzerinden erişilebilir.
XML DOM tanımlayan objects, properties and methods tüm XML elemanları.
XML DOM geçerli:
- XML için standart bir nesne modeli
- XML için standart bir programlama arayüzü
- Platformdan ve dilden bağımsız
- Bir W3C standardı
Başka bir deyişle: The XML DOM is a standard for how to get, change, add, or delete XML elements.
Bir XML öğesinin değerini alın
Bu kod ilk metin değerini alır <title> bir XML belgesindeki elemanı:
Örnek
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
Bir XML dosyası yükleniyor
Örneklerde kullanılan XML dosyası altındadır books.xml .
Bu örnek okur "books.xml" xmlDoc içine ve ilk metin değerini alır <title> books.xml elemanı:
Örnek
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
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>
Kendin dene " Örnek Açıklaması
- xmlDoc - çözümleyici tarafından oluşturulan XML DOM nesnesi.
- getElementsByTagName("title") [0] - ilk elde <title> elemanının
- childNodes[0] - ilk alt <title> elemanın (metin düğümü)
- nodeValue - düğümünün değeri (the text itself)
Bir XML dizesi yükleniyor
Bu örnek bir XML DOM nesnesine bir metin dizesi yükler ve JavaScript ile ondan bilgi ayıklar:
Örnek
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
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>
Kendin dene " Programlama Arayüzü
Düğüm nesne kümeleri olarak DOM modelleri XML. düğümleri JavaScript veya diğer programlama dilleri ile ulaşılabilir. Bu dersimizde JavaScript kullanır.
DOM programlama arayüzü bir dizi standart özellikler ve metotlar ile tanımlanır.
Properties sıklıkla (yani düğümadı olan "kitap") 'dir şey olarak adlandırılır.
Methods genellikle (yani "kitabı" delete) yapılır şey olarak adlandırılır.
XML DOM Özellikleri
Bunlar bazı tipik DOM özellikleri şunlardır:
- x.nodeName - x'in adı
- x.nodeValue - x değerinin
- x.parentNode - x üst düğüm
- x.childNodes - x'in çocuk düğümleri
- x.attributes - x'in nitelikleri düğümleri
Not: Yukarıdaki listede x, bir düğüm amacıdır.
XML DOM Yöntemleri
- x. getElementsByTagName( name ) x. getElementsByTagName( name ) - Belirtilen etiket adı ile tüm öğelerini almak
- x. appendChild( node ) x. appendChild( node ) - x çocuk düğüm eklemek
- x. removeChild( node ) x. removeChild( node ) - x bir çocuk düğüm kaldırma
Not: Yukarıdaki listede x, bir düğüm amacıdır.