Websites – Document Object Model – JQuery – Linux

Publicado: 6 de novembro de 2014 em JavaScript, JQuery
0

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.

DOM: http://www.w3.org/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

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>

Deixe um comentário