Tutorial XML DOM
XML DOM
O que é o DOM?
O DOM define um padrão para acessar e manipular documentos:
O HTML DOM define uma forma padrão para acessar e manipular documentos HTML. Apresenta um documento HTML como uma estrutura em árvore.
O XML DOM define uma forma padrão para acessar e manipular documentos XML. Apresenta um documento XML como uma estrutura em árvore.
Compreender o DOM é uma obrigação para quem trabalha com HTML ou XML.
O HTML DOM
Todos os elementos HTML podem ser acessados através do HTML DOM.
Este exemplo altera o valor de um elemento HTML com id="demo":
Exemplo
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
Este exemplo altera o valor do primeiro elemento <h1> em um documento HTML:
Exemplo
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>
Nota: Mesmo que o documento HTML contenha apenas UM elemento <h1>, você ainda precisa especificar o índice do array [0], pois o método getElementsByTagName() sempre retorna um array.
Você pode aprender muito mais sobre o HTML DOM em nosso tutorial de JavaScript .
O XML DOM
Todos os elementos XML podem ser acessados através do XML DOM.
O XML DOM é:
- Um modelo de objeto padrão para XML
- Uma interface de programação padrão para XML
- Independente de plataforma e idioma
- Um padrão W3C
Em outras palavras: O XML DOM é um padrão de como obter, alterar, adicionar ou excluir elementos XML.
Obter o valor de um elemento XML
Este código recupera o valor de texto do primeiro elemento <title> em um documento XML:
Exemplo
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
Carregando um arquivo XML
O arquivo XML usado nos exemplos abaixo é books.xml .
Este exemplo lê "books.xml" em xmlDoc e recupera o valor de 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>
Exemplo explicado
- xmlDoc - o objeto XML DOM criado pelo analisador.
- getElementsByTagName("title")[0] - obtém o primeiro elemento <title>
- childNodes[0] - o primeiro filho do elemento <title> (o nó de texto)
- nodeValue - o valor do nó (o próprio texto)
Carregando uma string XML
Este exemplo carrega uma string de texto em um objeto XML DOM e extrai as informações dele com JavaScript:
Exemplo
<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>
Interface de programação
O DOM modela XML como um conjunto de objetos de nó. Os nós podem ser acessados com JavaScript ou outras linguagens de programação. Neste tutorial usamos JavaScript.
A interface de programação para o DOM é definida por um conjunto de propriedades e métodos padrão.
Propriedades são muitas vezes referidas como algo que é (ou seja, nodename é "book").
Os métodos são frequentemente referidos como algo que é feito (ou seja, excluir "livro").
Propriedades XML DOM
Estas são algumas propriedades típicas do DOM:
- x.nodeName - o nome de x
- x.nodeValue - o valor de x
- x.parentNode - o nó pai de x
- x.childNodes - os nós filhos de x
- x.attributes - os nós de atributos de x
Nota: Na lista acima, x é um objeto de nó.
Métodos XML DOM
- x.getElementsByTagName( name ) - obtém todos os elementos com um nome de tag especificado
- x.appendChild( node ) - insere um nodo filho em x
- x.removeChild( node ) - remove um nó filho de x
Nota: Na lista acima, x é um objeto de nó.