XML DOM Tutorial

What is DOM?

The DOM defines standard methods for accessing and manipulating documents:

The W3C Document Object Model (DOM) is a platform- and language-independent interface that allows programs and scripts to dynamically access and update the content, structure, and style of documents.

The HTML DOM defines standard methods for accessing and manipulating HTML documents. It presents HTML documents as a tree structure.

The XML DOM defines standard methods for accessing and manipulating XML documents. It presents XML documents as a tree structure.

Understanding DOM is essential for anyone using HTML or XML.

HTML DOM

All HTML elements can be accessed through the HTML DOM.

Exemplo 1

Este exemplo altera o valor do elemento HTML com id="demo":

<h1 id="demo">Este é o título</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

Experimente você mesmo

Exemplo 2

Este exemplo altera o valor do primeiro elemento <h1> no documento HTML:

<h1>Este é o título</h1>
<h1>Este é o título</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>

Experimente você mesmo

Atenção:Mesmo que o documento HTML contenha apenas um elemento <h1>, você ainda deve especificar o índice de array [0], porque o método getElementsByTagName() sempre retorna um array.

Você pode aprender mais sobre HTML DOM em nosso tutorial de JavaScript.

DOM de XML

Todos os elementos XML podem ser acessados através do XML DOM.

O XML DOM é:

  • Modelo de objeto de padrão do XML
  • Interface de programação de padrão do XML
  • Independente de plataforma e linguagem
  • Padrão W3C

Por outro lado: o XML DOM é o padrão para como obter, alterar, adicionar ou excluir elementos XML.

Obter valor do elemento XML

Este exemplo pesquisa o valor do texto do primeiro elemento <title> no documento XML:

Exemplo

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

Carregar arquivo XML

O arquivo XML usado neste exemplo é books.xml.

Este exemplo lê "books.xml" em xmlDoc e pesquisa o valor do texto do primeiro elemento <title> em books.xml:

Exemplo

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

Experimente você mesmo

Explicação do exemplo

  1. xmlDoc - Objeto DOM XML criado pelo parser
  2. getElementsByTagName("title")[0] - Obter o primeiro elemento <title>
  3. childNodes[0] - Primeiro nó filho do elemento <title> (nó de texto)
  4. nodeValue - Valor do nó (texto em si)

Carregar string XML

Este exemplo carrega uma string de texto em um objeto DOM XML e usa JavaScript para extrair informações dela:

Exemplo

<html>
<body>
<p id="demo"></p>
<script>
var text, parser, xmlDoc;
text = "<bookstore><book>"
"<title>雅舍谈吃</title>" +
"<author>梁实秋</author>" +
"<year>2013</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>

Experimente você mesmo

Interface de Programação

O DOM modela o XML em um conjunto de objetos nó. Pode-se acessar os nós usando JavaScript ou outro linguagem de programação. Neste tutorial, usamos JavaScript.

A interface de programação do DOM é definida por um conjunto de atributos e métodos padrão.

AtributosNormalmente se refere ao que é a coisa (por exemplo, nodename é "book").

MétodosNormalmente se refere a o que pode ser feito (por exemplo, a ação de excluir "book").

Atributos do XML DOM

Estes são alguns atributos DOM típicos:

  • x.nodeName - nome de x
  • x.nodeValue - valor de x
  • x.parentNode - nó pai de x
  • x.childNodes - nós filhos de x
  • x.attributes - nó de atributos de x

Notas:Na lista acima, x é um objeto nó.

Métodos do XML DOM

  • x.getElementsByTagName(name) - Obter todos os elementos com o nome de etiqueta especificado
  • x.appendChild(node) - Inserir um subnó em x
  • x.removeChild(node) - Remover subnó de x

Notas:Na lista acima dex É um objeto de nó.