DOM определяет стандарт для доступа и работы с документами.
XML DOM представляет документ XML в виде древовидной структуры.
HTML DOM представляет HTML-документ в виде древовидной структуры.
Понимание DOM является обязательным для тех, кто работает с HTML или XML.
XML DOM Пример дерева
Что такое DOM?
DOM определяет стандарт для доступа к документам, как XML и 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 разделяется на 3 части / уровней:
- Core DOM - стандартная модель для любого структурированного документа
- XML DOM - стандартная модель для XML - документов
- HTML DOM - стандартная модель для HTML - документов
DOM определяет objects and properties всех элементов документа, а также methods (interface) для доступа к ним.
HTML DOM
HTML DOM определяет стандартный способ для доступа и управления HTML-документов.
Все HTML-элементы могут быть доступны через HTML DOM.
HTML DOM определяет objects, properties and methods всех HTML - элементов.
Измените значение HTML-элемента
Этот пример изменяет значение HTML-элемента с ID = "демо":
пример
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script> Попробуй сам " Этот пример изменяет значение первого <h1> элемента в HTML - документе:
пример
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script> Попробуй сам " Примечание: Даже если containes документ HTML только ОДИН <h1> элемента вам все равно придется указать индекс массива [0], потому что getElementsByTagName() метод всегда возвращает массив.
Вы можете узнать гораздо больше о HTML DOM в нашем JavaScript учебнике .
XML DOM
XML DOM определяет стандартный способ для доступа и манипулирования XML-документами.
Все элементы XML могут быть доступны через XML DOM.
XML DOM определяет objects, properties and methods всех элементов XML.
XML DOM является:
- Стандартная модель объекта для XML
- Стандартный интерфейс программирования для XML
- Платформы и языка независимой
- Стандарт W3C
Другими словами: The XML DOM is a standard for how to get, change, add, or delete XML elements. - The XML DOM is a standard for how to get, change, add, or delete XML elements. того, The XML DOM is a standard for how to get, change, add, or delete XML elements. - The XML DOM is a standard for how to get, change, add, or delete XML elements.
Получить значение элемента XML
Этот код извлекает текстовое значение первого <title> элемента в документе XML:
пример
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
Загрузка XML-файла
Файл XML , используемый в примерах ниже books.xml .
Этот пример читает "books.xml" в xmlDoc и извлекает текстовое значение первого <title> элемент в books.xml:
пример
<!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>
Попробуй сам " Пример Разъяснения
- xmlDoc - объект XML DOM , созданный анализатором.
- getElementsByTagName("title")[0] - получить первый <title> элемент
- childNodes[0] - первый ребенок из <title> элемента (текстового узла)
- nodeValue - значение узла (the text itself)
Загрузка XML-строки
Этот пример загружает текстовую строку в объект DOM XML, и извлекает информацию из него с JavaScript:
пример
<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>
Попробуй сам " Интерфейс программирования
Модели DOM XML как набор объектов узла. Узлы могут быть доступны с JavaScript или других языках программирования. В этом уроке мы используем JavaScript.
Программный интерфейс к DOM определяется набором стандартных свойств и методов.
Properties часто называют как то , что (т.е. имя узла «книга»).
Methods часто называют то , что делается (то есть удалить "книга").
Свойства XML DOM
Вот некоторые типичные свойства DOM:
- x.nodeName - имя х
- x.nodeValue - значение х
- x.parentNode - родительский узел х
- x.childNodes - дочерние узлы х
- x.attributes - Атрибуты узлов х
Примечание: В приведенном выше списке, х представляет собой объект узла.
Методы XML DOM
- x.getElementsByTagName( name ) - получить все элементы с указанным именем тега
- x.appendChild( node ) - вставить дочерний узел к х
- x.removeChild( node ) - удалить дочерний узел из х
Примечание: В приведенном выше списке, х представляет собой объект узла.