Inne działy

 

XML DOM zaawansowane

 

 

XML DOM - Zaawansowane

W poprzednim rozdziale tego podręcznika opisywaliśmy XML DOM, i użyliśmy getElementsByTagName () aby pobrać dane z dokumentu XML.

W tym rozdziale omówimy kilka innych ważnych metod XML DOM.

Możesz dowiedzieć się więcej o XML DOM w naszym tutorialu DOM XML


 

Pobierz wartości elementu

Plik XML używany w poniższych przykładach to: ksiazki.xml.

Kod źródłowy pliku:

 

<księgarnia>
  <kisążka kategoria="COOKING">
<tytuł lang="en">Everyday Italian</tytuł>
<autor>Giada De Laurentiis</autor>
<rok>2005</rok>
<cena>30.00</cena>
  </książka>
  <książka kategoria="CHILDREN">
<title lang="en">Harry Potter</title>
<autor>J K. Rowling</autor>
<rok>2005</rok>
<cena>29.99</cena>
  </książka>
  <książka kategoria="WEB">
<tytuł lang="en">XQuery Kick Start</tytuł>
<autor>James McGovern</autor>
<autor>Per Bothner</autor>
<autor>Kurt Cagle</autor>
<autor>James Linn</autor>
<autor>Vaidyanathan Nagarajan</autor>
<rok>2003</rok>
<cena>49.99</cena>
  </książka>
  <książka kategoria="WEB">
<tytuł lang="en">Learning XML</tytuł>
<autor>Erik T. Ray</autor>
<rok>2003</rok>
<cena>39.95</cena>
  </książka>
</księgarnia>

 

Poniższy przykład pobiera wartość tekstu pierwszego elementu <tytuł>:

 

Przykład

 

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

 

Kod źródłowy:

 

<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
  {// kod dla IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// kod dla IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","ksiazki.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

txt=xmlDoc.getElementsByTagName("tytuł")[0].childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>

Pobierz wartości atrybutu

Poniższy przykład pobiera wartość tekstową atrybutu "lang" pierwszego elementu <title>:

Przykład

txt=xmlDoc.getElementsByTagName("tytuł")[0].getAttribute("lang");

 

Kod źródłowy

 

<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
  {// kod dla IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// kod dla IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","ksiazki.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

txt=xmlDoc.getElementsByTagName("tytuł")[0].getAttribute("lang");
document.write(txt);
</script>
</body>
</html>

Zmień wartość elementu

Poniższy przykład zmienia wartość tekstową pierwszego elementu <tytuł>:

Przykład

 

x=xmlDoc.getElementsByTagName("tytuł")[0].childNodes[0];
x.nodeValue="Easy Cooking";

 

Kod źródłowy:

 

<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
  {// kod dla IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// kod dla IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","ksiazki.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

x=xmlDoc.getElementsByTagName("tytuł")[0].childNodes[0];
x.nodeValue="Easy Cooking";
x=xmlDoc.getElementsByTagName("tytuł")[0].childNodes[0];
txt=x.nodeValue;
document.write(txt);
</script>
</body>
</html>

 

Tworzenie nowego atrybutu

Metoda setAttribute() XML DOM może służyć do zmiany wartości istniejącego atrybutu, lub do stworzenia nowego atrybutu.

The following example adds a new attribute (edition="first") to each <book> element:

W następującym przykładzie dodano nowy atrybut (wydanie = "pierwsze") do każdego elementu <książka>

Przykład

x=xmlDoc.getElementsByTagName("książka");

for(i=0;i<x.length;i++)
  {
  x[i].setAttribute("wydanie","pierwsze");
  }

 

 

Kod źródłowy pliku

<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
  {// kod dla IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// kod dla IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","ksiazki.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

x=xmlDoc.getElementsByTagName("książka");
for(i=0;i<x.length;i++)
  {
  x[i].setAttribute("wydanie","pierwsze");
  }

//Output all attribute values
for (i=0;i<x.length;i++)
{
document.write("Kategoria: " + x[i].getAttribute('kategoria') + "<br>");
document.write("Wydanie: " + x[i].getAttribute('wydanie') + "<br>");
}
</script>
</body>
</html>

Tworzenie elementu

Metoda createElement() XML DOM tworzy nowy węzeł elementu.

Metoda createTextNode() XML DOM tworzy nowy węzeł tekstu.

Metoda appendChild() XML DOM dodaje węzeł dziecko do węzła (po ostatnim dziecku).

Aby utworzyć nowy element z zawartością tekstu, konieczne jest, aby zarówno utworzyć nowy węzeł elementu i nowy węzeł tekstu, a następnie dodać do istniejącego węzła.

Poniższy przykład tworzy nowy element (<wydanie>), z następującym tekstem: pierwsze, i dodaje go do pierwszego elementu <książka>:

Przykład

newel=xmlDoc.createElement("wydanie");
newtext=xmlDoc.createTextNode("pierwsze");
newel.appendChild(newtext);

x=xmlDoc.getElementsByTagName("książka");
x[0].appendChild(newel);

 

Kod źródłowy:

<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
  {// kod dla IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// kod dla IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","ksiazki.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

newel=xmlDoc.createElement("wydanie");
newtext=xmlDoc.createTextNode("pierwsze");
newel.appendChild(newtext);
x=xmlDoc.getElementsByTagName("książka");
x[0].appendChild(newel);

for (i=0;i<x[0].childNodes.length;i++)
{
if (x[0].childNodes[i].nodeType==1)
  { 
  document.write(x[0].childNodes[i].nodeName);
  document.write(": ");
  document.write(x[0].childNodes[i].childNodes[0].nodeValue);
  document.write("<br>");
  }
}
</script>
</body>
</html>

 

Wyjaśnienie przykładu:

  • ·         Tworzenie elementu <wydanie>
  • ·         Utwórz węzeł tekstowy z następującym tekstem: pierwsze
  • ·         Dołącz węzeł tekstowy do nowego elementu <wydanie>
  • ·         Dołącz element <wydanie> do pierwszego elementu <książka>

 

Usuń Element

Poniższy przykład usuwa pierwszy węzeł w pierwszym elemencie <książka>:

 

Przykład

x=xmlDoc.getElementsByTagName("książka")[0];
x.removeChild(x.childNodes[0]);

 

Kod źródłowy:

<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
  {// kod dla IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// kod dla IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","książki.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

var x=xmlDoc.getElementsByTagName("książka")[0];
document.write("Węzły podrzędne przed usunięciem: ");
document.write(x.childNodes.length);
x.removeChild(x.childNodes[0]);

document.write("<br> Węzły podrzędność po usunięciu: ");
document.write(x.childNodes.length);

</script>
</body>
</html>

Uwaga: Wynik powyższego przykładu może być różny w zależności od używanej przeglądarki. Firefox traktuje nowe linie, jako pusty tekst węzłów, program Internet Explorer nie. Możesz przeczytać więcej na ten temat i jak go unikać w naszym poradniku XML DOM.

 

Zobacz nasze wszystkie kursy

WWW


HTML
HTML - Znaczniki
CSS - Tutorial
CSS - Selektory
PHP
JavaScript

XML

XSLT

Bazy danych


SQL
SQLite
MySQL
PostgreSQL

 

 

Programowanie


C
C++
C#
Java
VisualBasic
Python

Linux


Podstawy Linuxa
Bash
Linuks artykuły

Windows


Excel funkcje
Windows wskazówki
Outlook

Pozotałe działy


Programy
Rozrywka

 

 

 

This email address is being protected from spambots. You need JavaScript enabled to view it.