Объектная модель документа (DOM) определяет стандартный способ доступа к элементам документа и манипулирования ими.
HTML DOM
HTML DOM определяет стандартный способ доступа к элементам HTML документа и манипулирования ими.
При помощи дерева HTML DOM можно получить доступ ко всем элементам HTML документа.
XML DOM
XML DOM определяет стандартный способ доступа к элементам XML документа и манипулирования ими.
XML DOM представляет XML документ в виде древовидной структуры.
При помощи дерева DOM можно получить доступ ко всем элементам документа. Можно изменять и удалять содержимое (текст и атрибуты) элементов, создавать новые элементы. Элементы, их текст и атрибуты формируют, так называемые, узлы DOM.
Загрузка данных из XML файла
В следующем примере XML документ загружается в объект XML DOM, из которого затем при помощи Javascript извлекается нужная информация:
<html>
<body>
<h1>Заметка</h1>
<div>
<b>Кому:</b> <span id="to"></span><br />
<b>От:</b> <span id="from"></span><br />
<b>Сообщение:</b> <span id="message"></span>
</div>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("to").innerHTML = xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML = xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML = xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
}
};
xhttp.open("GET", "note.xml", true);
xhttp.send();
</script>
</body>
</html>
Важное замечание!
Чтобы извлечь текст "Tove" из элемента <to> XML файла, используется следующее выражение:
getElementsByTagName("to")[0].childNodes[0].nodeValue
Обратите внимание, что даже если в XML файле присутствует только ОДИН элемент <to>, все равно необходимо использовать индекс массива [0]. Это объясняется тем, что метод getElementsByTagName() возвращает массив.
Загрузка данных из XML строки
В следующем примере XML строка загружается в объект XML DOM, из которого затем при помощи Javascript извлекается нужная информация:
<html>
<body>
<h1>Заметка</h1>
<div>
<b>Кому:</b> <span id="to"></span><br />
<b>От:</b> <span id="from"></span><br />
<b>Сообщение:</b> <span id="message"></span>
</div>
<script>
txt = "<note>";
txt = txt + "<to>Tove</to>";
txt = txt + "<from>Jani</from>";
txt = txt + "<heading>Напоминание</heading>";
txt = txt + "<body>Не забудь обо мне в эти выходные!</body>";
txt = txt + "</note>";
if (window.DOMParser)
{
parser = new DOMParser();
xmlDoc = parser.parseFromString(txt,"text/xml");
}
else // Internet Explorer
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(txt);
}
document.getElementById("to").innerHTML = xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML = xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML = xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
Пример XML в HTML
В следующем примере мы открываем XML файл и затем в цикле обходим каждый элемент CD и отображаем значения элементов ARTIST и TITLE в таблице HTML:
<html>
<body>
<script>
if (window.XMLHttpRequest)
{ // для IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{ // для IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","cd_catalog.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
document.write("<table border='1'>");
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i < x.length; i++)
{
document.write("<tr><td>");
document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");
</script>
</body>
</html>
