DOM definiuje standard do uzyskiwania dostępu i manipulowania dokumentami.
DOM XML zawiera dokument XML jako drzewo strukturze.
DOM HTML przedstawia dokument HTML w postaci drzewiastej struktury.
Zrozumienie DOM jest koniecznością dla każdego, kto pracuje z HTML lub XML.
XML DOM Drzewo Przykład
Czym jest DOM?
DOM definiuje standardy w zakresie dostępu do dokumentów, takich jak XML i HTML:
"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 jest podzielone na 3 różne części / poziomach:
- Core DOM - standardowy model dla każdego dokumentu uporządkowanego
- XML DOM - standardowy model dla dokumentów XML
- HTML DOM - standardowy model dla dokumentów HTML
DOM definiuje objects and properties wszystkich elementów dokumentu, a także methods (interface) do nich dostęp.
DOM HTML
DOM HTML definiuje standardowy sposób dla dostępu i manipulowania dokumentami HTML.
Wszystkie elementy HTML można uzyskać za pośrednictwem DOM HTML.
DOM HTML określa objects, properties and methods wszystkich elementów HTML.
Zmień wartość elementu HTML
Ten przykład zmienia wartość elementu HTML z id = "demo":
Przykład
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script> Spróbuj sam " Ten przykład zmienia wartość pierwszego <h1> elementu w dokumencie HTML:
Przykład
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script> Spróbuj sam " Uwaga: Nawet jeśli Dokument HTML containes tylko JEDEN <h1> elementów trzeba jeszcze określić indeks tablicy [0], ponieważ getElementsByTagName() metoda zawsze zwraca tablicę.
Można dowiedzieć się dużo więcej o HTML DOM w naszym poradniku JavaScript .
DOM XML
DOM XML definiuje standardowy sposób dla dostępu i manipulowania dokumentami XML.
Wszystkie elementy XML mogą być dostępne za pośrednictwem DOM XML.
DOM XML określa objects, properties and methods wszystkich elementów XML.
DOM XML:
- Standardowy model obiektowy dla XML
- Standardowy interfejs programowania dla XML
- Platformy i niezależny od języka
- Standardem W3C
Innymi słowy: The XML DOM is a standard for how to get, change, add, or delete XML elements.
Uzyskać wartość elementu XML
Ten kod pobiera wartość tekstową pierwszego <title> element dokumentu XML:
Przykład
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
Ładowanie pliku XML
Plik XML wykorzystywane w przykładach poniżej Books.xml .
Przykład ten czyta "books.xml" pod xmldoc i pobiera wartość tekstową pierwszego <title> element Books.xml:
Przykład
<!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>
Spróbuj sam " Przykład Poradnik
- xmlDoc - obiekt XML DOM utworzone przez parser.
- getElementsByTagName("title")[0] - zdobyć pierwszy <title> elementu
- childNodes[0] - pierwsze dziecko <title> element (węzeł tekstu)
- nodeValue - wartość węzła (the text itself)
Ładowanie ciąg znaków XML
Ten przykład ładuje ciąg tekstu do obiektu XML DOM i wydobywa z niego informacje z JavaScript:
Przykład
<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>
Spróbuj sam " Interfejs programowania
Modele DOM XML jako zbiór obiektów węzłów. Węzły mogą być dostępne z JavaScript lub innych języków programowania. W tym tutorialu użyjemy JavaScript.
Interfejs programistyczny do DOM jest określony przez zestaw właściwości i metod standardowych.
Properties określane są często jako coś, co jest (tj nazwawęzła jest "rezerwacji").
Methods są często określane jako coś, co jest wykonywana (czyli usunięcie "książki").
Właściwości XML DOM
Są to typowe właściwości DOM:
- x.nodeName - nazwa X
- x.nodeValue - wartość x
- x.parentNode - węzeł rodzic x
- x.childNodes - węzły potomne x
- x.attributes - te atrybuty węzłów x
Uwaga: W powyższej liście, x jest obiektem węzła.
Metody XML DOM
- x.getElementsByTagName( name ) - uzyskać wszystkie elementy o określonej nazwie znacznika
- x.appendChild( node ) - wstawić węzła podrzędnego x
- x.removeChild( node ) - usunąć węzeł dziecko od x
Uwaga: W powyższej liście, x jest obiektem węzła.