Manipulação de DOM
Anteriormente, você viu que as estruturas JavaScript facilitam a obtenção de elementos específicos usando seletores e travessia de DOM . No entanto, para alterar o conteúdo e a aparência de elementos específicos em uma página web, você precisa manipular o DOM e aplicar as alterações. Usar JavaScript puro daria muito trabalho, mas felizmente a maioria dos frameworks JavaScript fornecem funções úteis que facilitam isso.
Suponha que você tenha uma caixa com o ID the-box.
<div id="the-box">A mensagem vai aqui</div>
Use jQuery para alterar seu texto para "A mensagem vai aqui", que pode ser facilmente usado assim:
$('#the-box').html('Esta é a nova mensagem!');
Na verdade, você pode usar código HTML em funções e ele será analisado pelo navegador, por exemplo:
$('#the-box').html('Esta é a <strong>nova</strong> mensagem!');
Neste exemplo, o conteúdo dentro do elemento DIV é assim:
<div id="the-box">Esta é a <strong>nova</strong> mensagem!'</div>
É claro que, no exemplo, você precisa usar caracteres especiais, como maior ou menor que, em vez de especificar códigos de entidade HTML especiais. Você pode usar a função de texto do jQuery:
$('#a-caixa').text('300 >200');
O código após atualizar o elemento div é o seguinte:
<div id="the-box">300 > 200</div>
No exemplo acima, o conteúdo existente é substituído por novo conteúdo. E se você quiser apenas acrescentar algumas informações ao texto? Felizmente, o jQuery fornece a função de acréscimo para essa finalidade.
$('#the-box').append(', aqui vai a mensagem');
Depois de realizar as operações acima no div original, o conteúdo do elemento div fica assim:
<div id="the-box">A mensagem vai aqui, aqui vai a mensagem</div>
Em vez de anexar, você pode preceder o conteúdo, inserindo-o antes do conteúdo existente, em vez de depois dele. Além disso, o jQuery fornece funções para inserir conteúdo em um determinado elemento, antes ou depois. Também existem funções para substituir conteúdo, limpar conteúdo, remover elementos, clonar elementos e muito mais.
Além das funções de manipulação do DOM, os frameworks JavaScript geralmente contêm diversas funções para manipular estilos e classes de elementos. Por exemplo, você tem uma tabela que destaca uma linha quando o mouse passa sobre ela. Você pode criar uma classe especial chamada hover que pode ser adicionada dinamicamente a uma linha. Usando YUI, você pode usar o código a seguir para determinar se a linha tem um nome de classe flutuante. Em caso afirmativo, ela será ignorada.
if(row.hasClass('hover')) row.removeClass('hover'); senão row.addClass('hover');
Da mesma forma, a maioria dos frameworks JavaScript possuem funções integradas para manipulação de CSS.