Elementos
Com o intuito de ensinar noções básicas para que o usuário entenda como utilizar os elementos nas ações de navegador é que este artigo foi criado, assim será explicado o que é um elemento e como ele pode ser manipulado. Um elemento é qualquer componente gráfico criado em HTML. Esses componentes são construídos através de tags. Como no exemplo abaixo:
<h1> Texto </h1> <!-- <- Isso é uma tag HTML capaz de criar cabeçalhos (headers) -->
Existe uma grande quantidade de tags e cada uma delas são responsáveis por criar um elemento com finalidades específicas, caso queira saber mais sobre todas essas tags é possível encontrá-las através deste link.
Atributos
Através das tags é possível passar atributos para um elemento. Como no exemplo abaixo:
<h1 class="título"> Texto </h1> <!-- class é um atributo capaz de agrupar elementos
que possuem o mesmo valor para class. -->
Os atributos são propriedades que controlarão o comportamento do elemento. Eles são passados dentro das tags como mostrado no exemplo acima. O valor de um determinado atributo pode ser obtido através da ação obter atributo. No exemplo anterior, seria possível obter o valor do atributo class que no caso é "título". Existem diversos tipos de atributos e cada um deles tem uma função diferente para a manipulação do elemento. Caso queira saber mais sobre cada um deles clique aqui.
Seletores
Há várias ações de navegador que necessitam de seletores. Seletores são formas de identificar/selecionar grupos de elementos ou um elemento exclusivamente através da estrutura HTML de uma determina página web. Então por exemplo, se a ação de clicar for utilizada para clicar em um único elemento, o usuário terá que obter o seletor do elemento de forma que identifique-o unicamente na página e passá-lo como parâmetro no campo de seletores da ação.
É possível construir um seletor através das tags e dos valores dos atributos de um determinado elemento. Por exemplo:
input#login <!-- Este seria um exemplo de seletor de um input do tipo caixa de texto,
onde seu atributo id possui o valor login -->
A estrutura HTML do elemento que seria obtido pelo seletor demonstrado acima seria da seguinte forma:
<input id="login">
A composição do seletor input#login se deu da seguinte forma: primeiro, pegou-se a tag input do elemento acima, depois foi inserido o símbolo "#" que representa o atributo id e depois foi colocado o valor desse atributo, que neste caso é "login". É possível observar que neste exemplo, o seletor referenciaria um único elemento pois ele está sendo selecionado através de seu id e em uma estrutura HTML o valor de um id deve ser único, já que é essa é a sua função. Mas e se for preciso obter um grupo de elementos? Para que o seletor seja capaz de selecionar vários elementos, esses elementos devem possuir um atributo que agrupem-os pelo mesmo valor. Um atributo que é capaz de exercer essa função é o class. Abaixo está um exemplo de como usar seletores com class.
div.login <!-- Este é um exemplo de seletor que obteria todos elementos de tag
<div></div> que possui o valor de class igual a login -->
A estrutura HTML dos elementos que seriam obtidos pelo seletor demonstrado acima poderiam ser, por exemplo, desta forma:
<div class= "login" > "Conteúdo" </div>
<div class= "login" > "Conteúdo 2" </div>
A composição do seletor div.login se deu da seguinte forma: primeiro, pegou-se a tag div dos elementos acima, depois foi inserido o símbolo "." que representa o atributo class e depois foi colocado o valor correspondente as duas tags de div, que neste caso é "login". É possível observar que neste exemplo, o seletor referenciaria dois elementos e portanto retornaria dois elementos em uma busca. Caso o usuário desejasse obter todos elementos da página que possuem class com o valor "login", o seletor deve ser constituído de apenas . e valor da class, utilizando o exemplo acima ficaria: .login. Assim seria selecionado todos elementos que possuem class .login, independentemente de sua tag.
O propósito dessas explicações é fazer com que o usuário possa ir em qualquer página web e extrair os seletores dos elementos que ele desejar.
Então aqui está um breve tutorial de como obter um seletor de um botão da página do roberty.app. O passo a passo ilustrado abaixo é válido para qualquer elemento de qualquer website.
- Navegar até o site roberty.app.
- Na página inicial, identifique o botão de "Login".
- Coloque o ponteiro do mouse sobre o botão "Login", clique com o botão direito e selecione a opção inspecionar. Assim abrirá a ferramenta de desenvolvedor do navegador (também pode ser acessada pressionando F12) já focada no elemento inspecionado.
A partir dos passos acima já é possível construir o seletor. Na imagem anterior, é mostrado que o elemento selecionado é uma tag de links < a></ a> e também temos a sua propriedade class sendo possível copiá-la clicando sobre ela duas vezes com o botão esquerdo do mouse e pressionando Ctrl + C. Seguindo as lógicas anteriores bastaria então compor o seletor da seguinte forma: a.header-module--menuItem--902FT.d-none.d-lg-inline-block. Uma observação importante aqui, é que caso a classe esteja com espaços, será preciso unir todos eles com "**.**" para construir o seletor.
Existe uma forma de verificar quais elementos o seletor está referenciando na página através do console. Vá até ele.
- Aqui podemos codificar algumas coisas. Se pegarmos o seletor que criamos anteriormente e colocarmos o seguinte código no terminal:
document.querySelectorAll('a.header-module--menuItem--902FT.d-none.d-lg-inline-block')
Teremos o seguinte retorno:
NodeList(3) [a.header-module--menuItem--902FT.d-none.d-lg-inline-block,
a.header-module--menuItem--902FT.d-none.d-lg-inline-block,
a.header-module--menuItem--902FT.d-none.d-lg-inline-block]
O que nós fizemos foi utilizar a palavra reservada document da linguagem javascript para fazer uma busca em toda a estrutura da página através do método querySelectorAll(). Passamos o seletor como parâmetro e o resultado foi o retorno de 3 elementos < a>< /a> que possuem o mesmo valor para class. Se o intuito fosse obter todos os elementos que correspondem a esse seletor, poderíamos parar aqui. Porém, o que nós queremos é referenciar apenas o botão de "Login" da página, então precisamos achar uma forma de fazer o seletor referenciar exclusivamente este botão.
- É possível passar atributos e seus respectivos valores para as tags que estão dentro do seletor. Repare que no elemento que selecionamos no passo 2 possui um atributo href. Então podemos realizar o comando novamente, só que dessa vez passando o atributo da seguinte forma:
document.querySelectorAll('a[href="https://studio.roberty.app/?_gl=1*1jige1k*_ga*MTgxNjUwMTQyNC4xNjQwMTMxMzUy*_ga_65RTMBPB2J*MTY0MzI4OTU5Ni4xMDcuMS4xNjQzMjg5NTk3LjA."].header-module--menuItem--902FT.d-none.d-lg-inline-block')
Agora estamos passando para o seletor que a tag que queremos possui um atributo href com o valor mostrado acima. O retorno agora será:
NodeList [a.header-module--menuItem--902FT.d-none.d-lg-inline-block]
Pronto! Temos o retorno apenas do botão de "Login", ou seja, esse seletor referencia apenas o botão que queremos. Mas e se caso o elemento não possuísse atributos capazes de diferenciá-lo de todos os outros? Bom, neste caso teríamos que passar toda a estrutura de elementos pai e filhos até que chegasse no elemento que quiséssemos. O exemplo abaixo ilustra como seria o seletor de um elemento div que está dentro de outra div.
document.querySelectorAll('div > div')
O símbolo ">" é um separador de tags assim como "#" e "." são separadores de identificadores e classes respectivamente. Então com o exemplo acima, estaríamos selecionando todos os elementos que estão dentro de uma div e é, ao mesmo tempo, uma div. Assim, é possível montar toda uma estrutura no seletor referenciando elemento por elemento até chegar no desejado. Se estivermos na página com a ferramenta de desenvolvedor aberta, podemos copiar o seletor do elemento que nos trará exatamente esse tipo de estrutura. Veja o exemplo com o elemento de "Login" na página https://roberty.app:
Copiando o seletor. Basta selecionar o elemento com o botão direito do mouse, ir em "copy" e depois "copy selector".
Agora colocamos no console o código com o valor copiado:
document.querySelectorAll('#gatsby-focus-wrapper > main > div.index-module--mainHeader--sXPMc > header > div > div > div > nav > div:nth-child(2) > a')
O retorno será exatamente igual ao que fizemos anteriormente:
NodeList [a.header-module--menuItem--902FT.d-none.d-lg-inline-block]
Essa cópia do seletor do elemento através da ferramenta de desenvolvedor é um atalho, mas não é uma boa prática já que ele obtém todo o caminho da árvore da página até chegar no elemento que você necessita e isso dificulta muito a visualização de qual é o elemento que está sendo referenciado. Esse uso é necessário apenas quando não houver nenhuma forma de referenciar o elemento exclusivamente através dos atributos.