XML DOM -opas

Mikä on DOM?

DOM määrittelee standardeja dokumentin käsittelemiseen ja muokkaamiseen:

“W3C:n dokumenttiobjektimalli (DOM) on alustasta ja kielestä riippumaton rajapinta, joka mahdollistaa ohjelmien ja skriptien dynaamisen pääsyn ja päivittämisen dokumentin sisältöön, rakenteeseen ja muotoiluun.”

HTML DOM määrittelee standardeja HTML-dokumenttien käsittelemiseen ja muokkaamiseen. Se esittää HTML-dokumentin puurakenteena.

XML DOM määrittelee standardeja XML-dokumenttien käsittelemiseen ja muokkaamiseen. Se esittää XML-dokumentin puurakenteena.

Kaikille, jotka käyttävät HTML:ää tai XML:ää, DOM:n ymmärtäminen on välttämätöntä.

HTML DOM

Kaikki HTML-elementit voidaan saavuttaa HTML DOM:n kautta.

Esimerkki 1

Tämä esimerkki muuttaa id="demo" HTML-elementin arvon:

<h1 id="demo">这是标题</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

Kokeile itse!

Esimerkki 2

Tämä esimerkki muuttaa ensimmäisen <h1>-elementin arvon HTML-dokumentissa:

<h1>这是标题</h1>
<h1>这是标题</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>

Kokeile itse!

Huomaa:Vaikka HTML-dokumentti sisältää vain yhden <h1>-elementin, sinun on aina määritettävä taulukon indeksi [0], koska getElementsByTagName()-menetelmä palauttaa aina taulukon.

Voit oppia lisää HTML DOMista JavaScript-opetusohjelmistostamme.

XML DOM

Kaikki XML-elementit voidaan saavuttaa XML DOM:n avulla.

XML DOM on:

  • XML:n standardoitu objektimalli
  • XML:n standardoitu ohjelmointirajapinta
  • Riippumaton alustasta ja kielestä
  • W3C-standardi

Toisin sanoen: XML DOM on standardi, joka kertoo, miten hakea, muuttaa, lisätä tai poistaa XML-elementtejä.

Hae XML-elementin arvo

Tämä esimerkki hakee ensimmäisen <title>-elementin tekstiarvon XML-dokumentista:

Esimerkki

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

Lataa XML-tiedosto

Tässä esimerkissä käytettävä XML-tiedosto on books.xml.

Tämä esimerkki lukee "books.xml":n xmlDoc:iin ja hakee ensimmäisen <title>-elementin tekstiarvon books.xml:sta:

Esimerkki

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

Kokeile itse!

Esimerkki selitys

  1. xmlDoc - Parseeraaja luoma XML DOM -objekti
  2. getElementsByTagName("title")[0] - Saada ensimmäinen <title> -elementti
  3. childNodes[0] - <title> -elementin ensimmäinen lapsisolmu (tekstisolmu)
  4. nodeValue - Solmun arvo (teksti itseään)

Lataa XML-merkkijono

Tässä esimerkissä tekstijono ladataan XML DOM-objektiin ja tietoja haetaan siitä JavaScriptin avulla:

Esimerkki

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

Kokeile itse!

Ohjelmointikäyttöliittymä

DOM mallintaa XML:n joukko solmuobjekteja. Solmuja voidaan käyttää JavaScriptin tai muiden ohjelmointikielien avulla. Tässä oppaassa käytämme JavaScriptiä.

DOM:n ohjelmointikäyttöliittymä määritellään joukolla standardeja ominaisuuksia ja menetelmiä.

OminaisuudetTavallisesti viitataan siihen, mitä asia on (esim. nodename on "book").

MetoditTavallisesti viitataan siihen, mitä voidaan tehdä (esim. poistaa "book" -toiminto).

XML DOM ominaisuudet

Nämä ovat joitakin tyypillisiä DOM-ominaisuuksia:

  • x.nodeName - x:n nimi
  • x.nodeValue - x:n arvo
  • x.parentNode - x:n emo-solmu
  • x.childNodes - x:n lapsisolmut
  • x.attributes - x:n ominaisuussolmu

Huomautus:Yllä olevassa luettelossa x on solmuobjekti.

XML DOM menetelmät

  • x.getElementsByTagName(name) - Hae kaikki määritellyllä nimellä olevat elementit
  • x.appendChild(node) - Lisää x:hen alisolu
  • x.removeChild(node) - Poista x:stä alisolut

Huomautus:Yllä olevassa listassa,x Se on soluobjekti.