Manipulando DOM no WordPress usando JQuery
Publicados: 2023-02-12Graças à plataforma de código aberto do WordPress e à vibrante comunidade de desenvolvedores, a criação de temas para a plataforma tem um apelo bastante amplo. Navegar em todos os elementos e conteúdos necessários para criar um site WordPress pode ser desafiador, dependendo do seu conhecimento e experiência em programação.
Felizmente, o Document Object Model (DOM) pode facilitar a manipulação ou a navegação pelo código HTML de um site. O DOM funciona permitindo que você crie uma árvore composta de vários nós ou objetos. Isso abre a oportunidade de alterar a exibição, estrutura ou função do site, usando bibliotecas JavaScript como jQuery.
Neste artigo, explicaremos o que é o DOM e por que você pode querer usá-lo. Em seguida, forneceremos algumas técnicas de manipulação jQuery padrão para usar o DOM com WordPress. Vamos mergulhar de cabeça!
O que é o DOM?
Simplificando, o DOM é uma interface de programação de aplicativos (API) para HTML. Ele cria uma árvore de objetos que representa o conteúdo e a estrutura de uma página da web. É também um script independente de plataforma e idioma, o que o torna bastante versátil. Quando o DOM representa o código-fonte HTML dessa maneira, ele o torna acessível para que várias linguagens de programação possam se conectar a ele.
Por que usar o DOM?
Como usuário do WordPress, você provavelmente verá o DOM em ação sempre que encontrar interatividade dinâmica. Isso pode incluir quando um erro é retornado se um formulário for enviado com informações ausentes. Os controles deslizantes de conteúdo são outro exemplo do DOM em uso:
Os desenvolvedores podem usar o DOM para atualizar e alterar quase todos os elementos em uma página da web. Você pode usá-lo para criar documentos e navegar em sua estrutura. O DOM também pode ser usado para adicionar, modificar ou excluir elementos e objetos.
Manipulação de DOM com JQuery
Para ser claro, o DOM e o HTML não são os mesmos, embora devam conter os mesmos elementos. O DOM é uma representação modelada do código-fonte HTML e pode ser alterado pelo JavaScript do lado do cliente.
Abaixo, veremos métodos na biblioteca jQuery para testar algumas técnicas de manipulação de DOM. Tenha em mente que diferentes navegadores lidam com o DOM à sua própria maneira, mas você não precisa fazer nada especial para começar a usá-lo. Todos os navegadores usam alguma forma do DOM para tornar as páginas acessíveis ao JavaScript.
Técnicas de Manipulação de DOM
O DOM pode ser usado de várias maneiras. Para ilustrar sua flexibilidade, vejamos seis técnicas que podem ajudar você a começar a usar essa API útil.
1. O método Before()
Fiel ao seu nome, o método before() é usado quando você deseja inserir qualquer elemento antes de outro elemento de destino, conforme indicado no código.
Neste exemplo, o método pode ser usado para adicionar um elemento quadrado com texto acima de um elemento designado, como um botão, uma vez clicado:
$(this).before( "<div class='square'>Outro quadrado</div>" );
O posicionamento e o layout da página são considerações a serem lembradas ao usar esse método. Você vai querer ter certeza de que seu novo elemento não vai quebrar seu layout ou causar problemas visualmente.
2. O método After()
Da mesma forma que o método before() permite inserir elementos antes de outro elemento indicado, o método after() permite o contrário. Por exemplo, pode ser usado para adicionar um elemento logo abaixo de um botão, uma vez que o botão é selecionado:
$(this).after( "<div class='square'>Outro quadrado</div>" );
Adicionar conteúdo interativo manipulando o DOM com jQuery dessa forma é uma forma sólida de ganhar interatividade, sem perder velocidade no processo.
3. O método Append()
Em vez de fazer novos elementos individuais aparecerem, você pode querer adicionar seu novo elemento a um existente. Por exemplo, talvez você queira adicionar o texto “Parabéns!” dentro de uma área colorida sempre que um botão específico é clicado.
Para anexar seu novo elemento ao conteúdo existente do elemento de destino, você deve inserir o comando jQuery append() no código-fonte HTML:
$( ".box" ).append( "<p>Feliz Aniversário!</p>" );
Este método adiciona a manipulação no final do elemento que você indica na string, em vez de colocá-lo antes ou depois. Dentro do contexto do documento HTML completo, você pode ver como a manipulação ocorre:
<!doctype html>
<title>Exemplo</title>
<estilo>
.caixa {
fundo: laranja;
cor branca;
cor branca;
largura: 150px;
preenchimento: 20px;
margem: 10px;
}
</estilo>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$( função() {
$( "botão" ).click( function() {
$(this).after( "<div class='box'>Feliz Aniversário!</div>" );
});
});
</script>
<button>Criar uma caixa</button>
Essa técnica oferece uma opção simples para criar interatividade em um espaço confinado. Apenas lembre-se, com este método particular, as manipulações aparecerão como uma extensão do elemento que você indicar, ao invés de novos elementos individuais.
4. O método Prepend()
Como saldo para o método append() , prepend() adicionará um elemento ao final de qualquer elemento de destino que você indicar no comando jQuery:
$( ".banner" ).prepend( "<p>Feliz Aniversário!</p>" );
Neste exemplo, o texto “Parabéns!” apareceria no início do banner indicado na string de código.
Vale a pena notar que esses métodos (incluindo before() , after() e append() ) são abordagens aceitáveis para usos simples. No entanto, recomendamos outras técnicas para inserções mais complexas.
5. O Método Clone()
Em seguida, o método clone() é uma opção bastante poderosa em termos de manipulação do DOM com jQuery. Enquanto as quatro técnicas anteriores permitem inserir elementos e movê-los, clone() permite copiar um elemento, removê-lo de seu local original e reinserir ou anexá-lo em outro lugar.
Por exemplo, esta linha significa que o elemento caixa original permanecerá onde está, enquanto um clone dele será anexado ao elemento triângulo:
$( ".box" ).clone().appendTo( ".triangle" );
A desvantagem desse método é que ele pode causar a duplicação do atributo id do elemento. Esses atributos devem ser exclusivos. Você pode evitar esse problema usando os atributos de classe como identificadores e empregando o método clone com moderação.
6. O Método Wrap()
Por fim, o método wrap() é útil se você deseja envolver um elemento em uma string existente. Por exemplo, você pode agrupar vários parágrafos em uma nova estrutura HTML identificando a classe e indicando qual estrutura está sendo implementada:
$( ".targetclass" ).wrap( "<div class='new'></div>" );
Com esta técnica, você está criando um <div> em torno de qualquer elemento que corresponda à classe de destino na string wrap() . Embora você possa criar um envoltório com vários níveis de profundidade, verifique se há apenas um elemento mais interno.
Solução de problemas do DOM
Quando se trata de trabalhar com o DOM, queremos destacar um aspecto-chave ao qual você deve prestar atenção. Para manter suas páginas carregando rapidamente e evitar código desnecessário (especialmente se você estiver desenvolvendo um tema), você deve estar atento para não usar nenhum elemento que não faça parte da árvore DOM.
Se você não tem certeza se um elemento faz parte do DOM ou não, pode verificar cada um deles por meio de seu navegador no front-end de seu site. Você pode inspecionar elementos na página e determinar onde eles estão incluídos na árvore DOM.
Isso é especialmente útil quando outro script alterou o HTML original do seu site. Caso contrário, às vezes seu HTML e DOM podem parecer exatamente iguais.
Explorar outros recursos e ferramentas do WP Engine
Se você pensar no DOM como uma parte orgânica do seu site, um recurso vivo que responde ao código-fonte HTML, o poder de sua acessibilidade é surpreendente. É por isso que entender o DOM e como ele pode ser usado para aprimorar seus projetos pode ajudar a levar seu site para o próximo nível.
Manipular o DOM com jQuery destaca a beleza da plataforma de código aberto do WordPress. Aqui no WP Engine, entendemos como recursos de desenvolvedor de alta qualidade podem fazer toda a diferença. É por isso que oferecemos muita ajuda para usuários do WordPres, juntamente com planos de hospedagem de alto nível!