O Document Object Model (DOM) ou modelo de objeto de documento é uma convenção multi-plataforma e independente de linguagem para representação e interação com objetos em documentos HTML, XHTML e XML. Os nós de cada documento são organizados em uma estrutura de árvore, chamada de árvore DOM. Os objetos na árvore DOM podem ser endereçados e manipulados pelo uso de métodos sobre os objetos. A interface pública de um DOM é especificada em sua interface de programação de aplicações (API). O JQuery possibilita através de seus métodos de manipulação a capacidade de manusear vários tipos de operações sobre os objetos DOM.
- append() – Adiciona um elemento no parâmetro especificado no final do elemento.
- remove() – Remove um elemento do DOM.
Você pode saber mais sobre manipulações DOM no seguinte link:
DOM: http://api.jquery.com/category/manipulation/
JQuery – DOM
Exemplo:
Neste exemplo utilizamos métodos de manipulação para inserir e remover elementos no modelo de objeto do documento .
JQuery
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Desenvolvimento Aberto</title>
<style type="text/css">
.imagem {
border-style: double;
border-width: 10px;
width: 500px;
height: 200px;
}
</style>
<!-- Está é uma instalação do JQuery, você apenas precisa apontar
para o respectivo script da versão que você deseja utilizar -->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>
<!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
Todo o script roda no evento equivalent ao OnLoad da pagina html-->
<script>
// Declara eventos de clique
$( document ).ready(function() {
$(".imagem").append("<p>Este é um elemento adicionado na arvore DOM</p>");
// Manipulação de atributos
$( "#bnt01" ).click(function() {
$("div").addClass("imagem");
});
$( "#bnt02" ).click(function() {
$("div").removeClass("imagem");
});
$( "#bnt03" ).click(function() {
$(".imagem").remove();
});
});
</script>
</head>
<body>
<h1>Desenvolvimento Aberto - DOM</h1>
<div class="imagem"
></div>
<p>
Escolha uma opção:
</p>
<button id="bnt01">Adicionar Classe CSS</button>
<button id="bnt02">Remover Classe CSS</button>
<button id="bnt03">Remover Elemento DOM</button>
</body>
</html>
Ricardo Mantovani
Desenvolvimento Código Aberto 