Manipulação DOM com jQuery

Árvore DOMO Árvore DOM é a organização hierárquica do conteúdo do nosso documento HTMLIsto é muito útil para identificar os diferentes elementos que estão contidos no referido documento, pois com identificadores únicos podemos atribuir nomes diferentes a estruturas que, apesar de possuírem rótulos semelhantes, têm um objetivo diferente.
O problema no passado era que não era possível percorrer facilmente o Árvore DOM em tempo real, pois rotinas e funções complicadas tiveram que ser criadas em Javascript, no entanto, tudo isso mudou com o aparecimento de jQuery. Esta estrutura ajudou a fornecer uma abordagem para o uso de Javascript para não especialistas, fez sua popularidade disparar novamente.
Uma das coisas mais interessantes que podem parecer muito complicadas de fazer, é selecionar o filhos de um elementoComo falamos de uma estrutura hierárquica, podemos falar de uma família, onde o pai é o elemento supremo e seus filhos são os elementos que se regem sob seu manto ou proteção.
Digamos, por exemplo, que temos uma lista ou elemento não ordenado , é lógico pensar que seus filhos são os elementos que pode conter, se quisermos selecionar um elemento Uma lista específica pode parecer uma tarefa muito complexa, mas com jQuery podemos alcançá-lo de uma forma muito simples e limpa.
MétodosPara fazer isso, só temos que fornecer um identificador único para nosso elemento pai e, em seguida, chamar o método em seu seletor crianças (), com isso, obteremos a posição na qual podemos ir com o método cada () cada um de seus filhos.
Vamos ver no código a seguir um pequeno exemplo do que estamos falando:

 Manipulação DOM com JQuery

Filho 1
Filho 2
Filho 3

Experimentar 

Em primeiro lugar, começamos incluindo jQuery a partir de CDN oficial, com isso não temos a necessidade de armazenar o arquivo com o código fonte em nosso computador, portanto, com um navegador e conexão a Internet podemos usar este exemplo.
Em seguida, criamos um pequeno script onde indicamos que quando você clica no elemento com o id Começar o código interno é executado.
O código a ser executado simplesmente expressa que o elemento com o id deve ser pesquisado Papai e a este seletor aplicamos o método crianças () para localizar seus filhos e finalmente com o método cada () Percorremos cada um deles, no caso do código são três que nos vão permitir fazer a viagem e isso deve nos mostrar o texto que cada um contém. Vamos ver como o código acima funciona em nosso navegador:

Depois de clicar no botão experimentar podemos ver o primeiro Alerta:

PROLONGAR

Se continuarmos fechando os alertas, veremos todos os elementos filhos contidos na estrutura hierárquica:

PROLONGAR

Como pudemos ver, o manuseio dos elementos na estrutura de nossa página não é nada complicado, este é apenas um pequeno exemplo que nos dá uma boca aberta do que continuaremos a ver neste tutorial.
Embora encontrar elementos filho seja bastante útil, existe um método que nos permite fazer uma pesquisa mais direta através do ir, ondas aulas. Referimo-nos ao método encontrar (), este método encontrará todas as correspondências dos elementos filho do seletor que o invoca.
Com isso podemos ter um ótimo e chame um encontrar () nele para localizar classes ou id em particular, com o qual chegamos ao próximo ponto.
Estilos de injeçãoAssim que encontrarmos o item desejado no SOL, muitas vezes não queremos imprimir seu conteúdo se não o destacarmos de alguma forma, uma forma interessante é adicionar um estilo ao referido elemento, isso nos permitirá manipular o CSS de nossa página indiretamente e poder destacar elementos importantes nela e, assim, podemos ver algo mais dinâmico em nosso documento HTML.
Vamos ver no código a seguir como vamos implementar o uso do método encontrar () e então o injeção de estilo sobre os elementos encontrados, desta forma podemos nos aproximar de algo que podemos dar de útil na vida real:

 Manipulação DOM com JQuery

Filho 1
Filho 2
Filho 3

Experimentar 

Neste código, se observarmos que temos algo muito semelhante ao truque anterior, o que mudamos é que em primeiro lugar o conteúdo do rótulo aqui, em vez de percorrer os filhos de um elemento, usamos o método encontrar () para localizar um elemento com a classe destaque e para esse elemento com o método css () Vamos injetar estilos nele; neste caso, vamos defini-lo como uma cor de fundo vermelha.
Vamos ver como fica em nosso navegador depois de clicarmos no botão experimentar:

Assim como conseguimos localizar um filho de um elemento, podemos obter o efeito no sentido oposto da hierarquia, ou seja, a partir de um filho podemos localizar o pai. Isto é muito útil em listas longas que se geram dinamicamente, pois desta forma podemos destacar ou utilizar os pais de acordo com as nossas necessidades.
Método dos pais ()Para isso temos o método pais () que de uma forma semelhante a crianças () localiza o pai do seletor que está sendo invocado. Se adicionarmos o método each () a isso, traremos toda a herança do elemento, por exemplo, se for um vamos trazer o elemento e se subirmos na hierarquia até o elemento e assim por diante, até chegarmos ao elemento, uma vez que, pela hierarquia, todos eles são pais pela maneira como estão contidos.
Vamos ver no código a seguir como podemos fazer um script com jQuery que nos permite atingir este objetivo de mostrar todos os pais do nosso elemento escolhido:

 Manipulação DOM com JQuery

Filho 1
Filho 2
Filho 3

Experimentar 

A estrutura é muito semelhante aos exemplos anteriores, porém aqui fazemos uma alteração, desta vez usamos a classe destaque como seletor e aplicamos o método pais () e então com um each () podemos percorrer a hierarquia de dentro para fora.
Vamos ver como fica o código acima quando o executamos em nosso navegador:

PROLONGAR

Como no exemplo anterior, contanto que continuemos fechando o Alertas veremos todos os pais do elemento até chegarmos a HTML.
O truque anterior nos ajuda a estabelecer a árvore genealógica de um elemento, talvez nos ajude a depurar nosso HTML, mas o que acontece se quisermos obter um pai específico, por exemplo, se tivermos várias listagens, mas quisermos que o pai de uma determinada seja destacado.
Não devemos nos preocupar, para este caso temos o método pais até (), com isso podemos especificar um ponto de chegada e podemos fazer um Injeção de HTML Para destacar todo o bloco, vamos ver o seguinte código onde aplicamos esse conhecimento:

 Manipulação DOM com JQuery

Filho 1
Filho 2
Filho 3

Experimentar 

Se notarmos que este código é uma ligeira variação do anterior, a mudança principal acontece na chamada ao método que acabamos de explicar pais até () para o qual passamos div, que é onde a busca por elementos pais do seletor que estamos afetando irá parar.
Para mostrar que tudo funciona, injetamos um pouco HTML Para colorir a seção marcada de vermelho, vamos ver como isso fica em nosso navegador quando clicamos em experimentar:

Vemos então que apenas a seção com o div é aquela colorida em vermelho, mostrando que paramos a busca pelo pai no elemento específico, mesmo tendo um pai direto como o elemento que nos mostra o poder da pesquisa por meio de Árvore DOM.
Com isso terminamos nosso tutorial, é apenas uma pequena demonstração de todo o poder do jQuery para manipular o SOL de nosso HTML, o importante é que devemos praticar muito e ler muito bem a documentação, pois com ela poderemos obter conhecimentos e recursos adicionais para podermos aumentar nosso nível de desenvolvimento.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo