Leitura de arquivos XML utilizando JavaScript/ DOM

<root>
<nopai atributo=”PrimeiroFilho”>
<nofilho>Texto do primeiro nó filho</nofilho>
<nofilhoeirmao>Texto do primeiro nó filho e irmao</ nofilhoeirmao >
</nopai>
<nopai atributo=”SegundoFilho”>
<nofilho>Texto do segundo nó filho </nofilho>
<nofilhoeirmao>Texto do segundoo nó filho e irmao</ nofilhoeirmao >
</nopai>
<nopai atributo=”TerceiroFilho”>
<nofilho>Texto do terceiro nó filho </nofilho>
<nofilhoeirmao>Texto do terceiro nó filho e irmao</ nofilhoeirmao >
</nopai>
</root>

A propriedade parentNode é o nó pai ou seja a TAG <nopai>.
A propriedade childNodes são todos os filhos do nó pai, ou seja as três tags <nofilho> e as três <nofilhoeimao>
A propriedade firstChild é o primeiro filho do nó pai, ou seja a tag <nofilho>
A propriedade lastChild é o último filho do nó pai, ou seja a última tag <nofilhoeirmao>
A propriedade attributes são os atributos atributo=”"

Depois de identificado o nó, utilizamos:

A propriedade nodeValue é o valor do nó, ou seja, o texto “Texto” do nó filho <nofilho>
A propriedade nodeName é o nome do proprio nó
A propriedade nodeType é o tipo de nó

Acessando os nós

O texto está armazenado nos nós filhos <nofilho>, para acessar-lo e necessário primeiro utilizar o método getElementByTagName(“nofilho”) acompanhador do índice 0 para pegar o primeiro no <noFilho>, em seguida utilizar o atributo childNodes para acessar os nós filhos, e para retornar o valor do nó utilizamos o atributo nodeValue, resultando na seguinte declaração:

texto = xmlDoc.getElementsByTagName("nofilho")[0].childNodes[0].nodeValue;
document.write(texto);

Após a execução da declaração a variável texto vai ter o valor da primeira tag <nofilho>, ou seja, o valor “Texto do primeiro nó filho” isso porque:

xmlDoc é a estrutura XML armazenada na memória
getElementsByTagName(“nofilho”)[0] pegar somente o primeiro nó <nofilho>.
childNodes[0] acessa o primeiro nó filho
nodeValue retorna o valor ou texto do nó
document.write(texto) escrever o valor do nó na tela

Para acessar e pegar o valor do segundo nó filho <nofilhoeirmao>, basta apenas passa-lo para o método getElementByTagName()

texto = xmlDoc.getElementsByTagName("nofilhoeirmao")[0].childNodes[0].nodeValue;
document.write(texto);

No primeiro exemplo foi pego apenas o primeiro nó filho <nofilho>, de cada nó pai, pois informamos o número do índice ([0]) junto com o método getElementByTagName() , mas no arquivo XML existem três nós filhos <nofilho>. Para pode acessar e retonar todos os nós filho <nofilho>, é só utilizar um comando de repetição ou loop, como o caso do loop for, onde será retornado todos os nós filhos

x=xmlDoc.getElementsByTagName("nofilho");
for (i=0; i<x.length; i++)
{
document.write(x[i].childNodes[0].nodeValue);
document.write("<br />");
}
Você deve ter percebido que estamos apenas pegando os valores dos primeiros nós filhos <nofilho>, de cada nó pai <nopai>, sendo de cada nó pai existem três nós filhos. Para pega todos os nós filhos de um pai incluindo o nó filho e irmão <nofilhoeirmao> que também é um filho, devemos:

Primeiro pegar o nó pai <nopai> e depois acessar todos os nós filhos, sendo os nós <nofilho> e <nofilhoeirmao> e armazena-los na variável X, essa variável terá a lista com todos os nós filhos do nó pai, e será utilizada como parâmetro do comando de repetição for.

x=xmlDoc.getElementsByTagName("nopai")[0].childNodes;

Segundo acessar o nó pai <nopai> e com o atributo firstChild acessar o primeiro filho, e armazena-lo na variável y:

y=xmlDoc.getElementsByTagName("nopai")[0].firstChild;

A variavel y vai acessar o primeiro filho, depois de acessa o primeiro nó filho, será utilizado o atributo nextSibling para ir acessando os próximos filhos. Mas como já sabemos o Firefox pode interpretar espaços vazios como sendo um nó, isso pode atralhar e da erro no script, ja que teremos que acessar nó por nó, então antes de retornar o valor, vamos criar um teste com base na propriedade nodeType para sabe se realmente é um nó, como vimos um nó é um elemento, e todo elemento tem valor igual a 1 na propriedade nodeype, então:

if (y.nodeType==1) {
document.write(y.childNodes[0].nodeValue + "<br />");
}

Nó final da declaração, como ja foi retornado o primeiro valor do nó filho, será utilizado o nextSibling para acessar o próximo nó filho

y.nextSibling;

Ao final de tudo a declaração deve ser assim;

x=xmlDoc.getElementsByTagName("nopai")[0].childNodes;
y=xmlDoc.getElementsByTagName("nopai")[0].firstChild;
for (i=0;i<x.length;i++)
{
if (y.nodeType==1)
{
document.write(y.childNodes[0].nodeValue + "<br />");
}
y=y.nextSibling;
}

Como avança e volta um nó

Veja o exemplo aqui. A função getElementByTagName() armazena todos os nós em uma array, essa array como foi visto logo no inicio pode ser acessado pelo valor do índice, que sempre começar com zero. Será criada a variável i que armazenará que índice deve ser acessado, com o índice começa com zero, esse será o valor de i.

O que as funções próximo e anterior vai fazer e mudar os índices na lista de nós, como cada nó e representado nessa lista com um valor que se inicia com zero e vai até a última quantidade de nó, quando for acionado a função próximo() ele apenas soma mais um na variável que armazena o valor do índice da lista, assim ele retorna o próximo nó, e caso seja acionada a função anterior() ele diminua um valor do índice, retornando um índice anterior. Mais para evitar que no índice não tenha valores maiores que a quantidade de nós na lista, criaremos a variável x que terá o quantidade de nós no documento, e a função próximo será executada somente até o ultimo nó, evitando assim que seja acessando índices que não exista e retorne resultados em branco.

var x=xmlDoc.getElementsByTagName("nopai");
i=0;
function next()
{
if (i<x.length)
{
i++;
display();
}
}
function previous()
{
if (i>0)
{
i--;
display();
}
}

Agora iremos criar uma função para retornar os valores que estão nos nós. E mostra-los dentro da div cujo id é mostrar

function display()
{
tagpai=(x[i].getElementsByTagName("nofilho")[0].childNodes[0].nodeValue);
tagfilho=(x[i].getElementsByTagName("nofilhoeirmao")[0].childNodes[0].nodeValue);
document.getElementById("mostrar").innerHTML="Tag pai: " + tagpai + "<br />Tag filho: " + tagfilho;
}

A função display vai carregar no inicio a div mostrar, para que os valores do nós seja injetado dentro dela, e os botões serão responsáveis por acionar a função próximo e anterior

<body onLoad="display()">
<div id='mostrar'>
</div>
<br />
<input type="button" onClick="previous()" value="previous" />
<input type="button" onClick="next()" value="next" />

Acessando os atributo dos nós

No arquivo XML existem atributos (atributo=”PrimeiroFilho”), esses atributos podem ser lidos utilizando o atributo attributes. Para acessar um atributo do arquivo XML, utilize o método getElementsByTagName(“nopai”) para acessar o nó com atributo e getAttribute(“atributo”) para retorna o valor do atributo

texto=xmlDoc.getElementsByTagName("nopai")[0].getAttribute("atributo");
document.write(texto);

Para acessar todos os valores dos tributos, é so utilizar o método getElementsByTagName(“nopai”) para acessar o nó pai e utilizar um comando de repetição

var x=xmlDoc.getElementsByTagName('nopai');
for (i=0;i<x.length;i++)
{
document.write(x[i].getAttribute('atributo'));
document.write("<br />");
}

Acessando os nome dos nós

Para retornar o nome do nó é necessário pega-lo com o método método getElementsByTagName(tagname) e utilizar o atributo nodeName

texto = xmlDoc.getElementsByTagName("nopai")[0].nodeName;
document.write(texto);

Para acessar os nome de todo os nós que o método getElementsByTagName(tagname) recuperou, basta apenas utilizar o atributo nodeName com um comando de repetição

x=xmlDoc.getElementsByTagName("nofilho");
for (i=0; i<x.length; i++)
{
document.write(x[i].nodeName);
document.write("<br />");
}

Qualquer dúvida envie um email para marcelo@marceloramos.blog.br ou acesse meu blog www.marceloramos.blog.br