Výukový program XML DOM

XML DOM

Co je DOM?

DOM definuje standard pro přístup a manipulaci s dokumenty:

"W3C Document Object Model (DOM) je platforma a jazykově neutrální rozhraní, které umožňuje programům a skriptům dynamicky přistupovat a aktualizovat obsah, strukturu a styl dokumentu."

HTML DOM definuje standardní způsob pro přístup a manipulaci s HTML dokumenty. Prezentuje HTML dokument jako stromovou strukturu.

XML DOM definuje standardní způsob pro přístup a manipulaci s dokumenty XML. Prezentuje XML dokument jako stromovou strukturu.

Pochopení DOM je nutností pro každého, kdo pracuje s HTML nebo XML.

HTML DOM

Ke všem prvkům HTML lze přistupovat prostřednictvím HTML DOM.

Tento příklad změní hodnotu prvku HTML pomocí id="demo":

Příklad

<h1 id="demo">This is a Heading</h1>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

Tento příklad změní hodnotu prvního prvku <h1> v dokumentu HTML:

Příklad

<h1>This is a Heading</h1>

<h1>This is a Heading</h1>

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

Poznámka: I když dokument HTML obsahuje pouze JEDEN prvek <h1>, stále musíte zadat index pole [0], protože metoda getElementsByTagName() vždy vrací pole.

Mnohem více o HTML DOM se můžete dozvědět v našem výukovém programu JavaScript .

XML DOM

Ke všem prvkům XML lze přistupovat prostřednictvím XML DOM.

XML DOM je:

Standardní objektový model pro XML
Standardní programovací rozhraní pro XML
Platformově a jazykově nezávislé
Standard W3C

Jinými slovy: XML DOM je standard pro to, jak získat, změnit, přidat nebo odstranit prvky XML.

Získejte hodnotu prvku XML

Tento kód načte textovou hodnotu prvního prvku <title> v dokumentu XML:

Příklad

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

Načítání souboru XML

Soubor XML použitý v níže uvedených příkladech je books.xml .

Tento příklad přečte „books.xml“ do xmlDoc a načte textovou hodnotu prvního prvku <title> v books.xml:

Příklad

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

Příklad vysvětlen

xmlDoc – objekt XML DOM vytvořený analyzátorem.
getElementsByTagName("title")[0] – získání prvního prvku <title>
childNodes[0] – první potomek prvku <title> (textový uzel)
nodeValue - hodnota uzlu (samotný text)

Načítání řetězce XML

Tento příklad načte textový řetězec do objektu XML DOM a extrahuje z něj informace pomocí JavaScriptu:

Příklad

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

Programovací rozhraní

DOM modeluje XML jako sadu objektů uzlů. K uzlům lze přistupovat pomocí JavaScriptu nebo jiných programovacích jazyků. V tomto tutoriálu používáme JavaScript.

Programovací rozhraní k DOM je definováno souborem standardních vlastností a metod.

Vlastnosti jsou často označovány jako něco, co je (tj. název uzlu je „kniha“).

Metody jsou často označovány jako něco, co je hotovo (tj. smazat „knihu“).

Vlastnosti XML DOM

Toto jsou některé typické vlastnosti DOM:

x.nodeName – název uzlu x
x.nodeValue - hodnota x
x.parentNode - nadřazený uzel x
x.childNodes - podřízené uzly x
x.attributes - uzly atributů x

Poznámka: Ve výše uvedeném seznamu je x objekt uzlu.

Metody XML DOM

x.getElementsByTagName( name ) - získat všechny prvky se zadaným názvem značky
x.appendChild( node ) - vloží podřízený uzel do x
x.removeChild( node ) - odebere podřízený uzel z x

Poznámka: Ve výše uvedeném seznamu je x objekt uzlu.

❮ Předchozí Další ❯