O DOM define um padrão para acessar e manipular documentos.
O DOM XML apresentar um documento XML como uma estrutura de árvore.
O DOM HTML apresenta um documento HTML como uma estrutura de árvore.
Entendendo o DOM é uma obrigação para quem trabalha com HTML ou XML.
XML DOM Exemplo Árvore
Qual é o DOM?
O DOM define um padrão de acesso a documentos como XML e 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."
O DOM é separada em 3 diferentes peças / níveis:
- Core DOM - modelo padrão para qualquer documento estruturado
- XML DOM - modelo padrão para documentos XML
- HTML DOM - modelo padrão para documentos HTML
O DOM define os objects and properties de todos os elementos do documento, e os methods (interface) para acessá-los.
O DOM HTML
O HTML DOM define uma maneira padrão para acessar e manipular documentos HTML.
Todos os elementos HTML podem ser acessados através do DOM HTML.
O HTML DOM define os objects, properties and methods de todos os elementos HTML.
Alterar o valor de um elemento HTML
Este exemplo altera o valor de um elemento HTML com id = "demonstração":
Exemplo
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script> Tente você mesmo " Este exemplo altera o valor da primeira <h1> elemento 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> Tente você mesmo " Nota: mesmo que o documento contentores de HTML apenas um <h1> elemento que você ainda tem que especificar o índice de array [0], porque o getElementsByTagName() método sempre retorna uma matriz.
Você pode aprender muito mais sobre o DOM HTML em nosso tutorial JavaScript .
O DOM XML
O DOM XML define uma maneira padrão para acessar e manipular documentos XML.
Todos os elementos XML pode ser acessado através do DOM XML.
O DOM XML define os objects, properties and methods de todos os elementos XML.
O DOM XML é:
- Um modelo de objeto padrão para XML
- Uma interface de programação padrão para XML
- Plataforma e independente de linguagem
- Um padrão W3C
Em outras palavras: The XML DOM is a standard for how to get, change, add, or delete XML elements.
Obter o valor de um elemento XML
Este código recupera o valor de texto do primeiro <title> elemento em um documento XML:
Exemplo
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
Carregando um arquivo XML
O ficheiro XML usado nos exemplos abaixo é books.xml .
Este exemplo lê "books.xml" em xmlDoc e recupera o valor de texto do primeiro <title> elemento em books.xml:
Exemplo
<!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>
Tente você mesmo " exemplo Explicado
- xmlDoc - o objeto DOM XML criado pelo analisador.
- getElementsByTagName("title")[0] - obter a primeira <title> elemento
- childNodes[0] - o primeiro filho do <title> elemento (o nó de texto)
- nodeValue - o valor do nó (the text itself)
Carregando uma string XML
Este exemplo carrega uma seqüência de texto em um objeto DOM XML, e extrai a informação a partir 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>
Tente você mesmo " interface de programação
Os modelos DOM XML como um conjunto de objetos de nó. Os nós podem ser acessados com JavaScript ou outras linguagens de programação. Neste tutorial vamos usar JavaScript.
A interface de programação do DOM é definida por um conjunto de propriedades padrão e métodos.
Properties são muitas vezes referidos como algo que é (ou seja nodename é "livro").
Methods são muitas vezes referida como algo que é feito (ou seja, apagar "livro").
Propriedades DOM XML
Estas são algumas propriedades típicas DOM:
- x.nodeName - o nome 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 nodos atributos de x
Nota: Na lista acima, X é um objecto do nó.
Métodos DOM XML
- x.getElementsByTagName( name ) - obter todos os elementos com um nome de marca especificada
- x.appendChild( node ) - inserir um nó filho para x
- x.removeChild( node ) - remover um nó filho de x
Nota: Na lista acima, X é um objecto do nó.