0

Vou tentar ser bastante objetivo:

Como eu faço para pegar o valor dentro de uma tag que está dentro de 200 milhões de outros childs ?

(compreendendo desde já que eu não poderei fazer alterações no código, porque é o código de um site que preciso filtrar para colher dados específicos):

ex:

    <div>
      <div>
        <div></div>
        <div>
          <div></div>
          <div></div>
          <h1></h1>
          <div>
            <div>
              <div>
              <h1></h1>
                <div>
                  <div></div>
                  <div></div>
                  <table>
                    <tbody>
                      <tr></tr>
                      <tr></tr>
                    </tbody>
                  </table>
                  <div>
                    <div></div>
                    <div></div>
                    <div>
                      <div>
                        <div></div>
                        <div>
                          <div>
                            <div></div>
                            <table>
                              <tbody>
                                <tr></tr>
                                <tr></tr> 
                              </tbody>
                            </table>   
                            <div></div>
...........

Por exemplo, eu preciso pegar as informações da segunda tabela (dentro das tags TR)... supondo que não existe id nem class, como eu faço para pegar essas informações ?

Grato.

2
  • Se você tiver base dessa estrutura pode usar document.getElementsByTagName('table') e daí pra selecionar use colchetes ([0],[1]), e pra achar o TR em questão repita o processo: document.getElementsByTagName('table')[0].getElementsByTagName('tr'), se estiver certo disto user o innerHTML para pegar o conteúdo de dentro do dele: document.getElementsByTagName('table')[0].getElementsByTagName('tr').innerHTML
    – RpgBoss
    11/02/2018 às 18:42
  • @RpgBoss Seu comentário está correto. Se possível adiciona como resposta. Você também pode adicionar exemplos com querySelector e jQuery para a resposta ficar bem completa. 11/02/2018 às 19:00

2 Respostas 2

2

Você pode fazer isso utilizando seletores do jQuery ou capturando todos os elementos e retornando apenas um deles através do índice.

document.getElementsByTagName

Com document.getElementsByTagName('table') você retorna um array com a interface HTMLCollection.

Essa interface te dará a propriedade length. Essa propriedade irá retornar a quantidade total de elementos capturados com o código acima.

Além da propriedade mencionada, você também terá acesso a dois métodos;

  • HTMLCollection.item(): Com esse método você poderá capturar o elemento através de seu índice (que vai de 0..n-1). É o mesmo que fazer document.getElementsByTagName('table')[0] ou document.getElementsByTagName('table')[1].

    Caso o elemento não exista, retorna null

  • HTMLCollection.namedItem(): Retorna o nó especificado pelo ID ou, caso não tenha ID, o item cuja propriedade name seja igual à pesquisa.

    Retorna null se nenhum nó corresponder ao nome pesquisado.

const segundaTabela = document.getElementsByTagName('table')[1];
const dadosDaTabela = segundaTabela.getElementsByTagName("td");

// Percorre todos os valores
for (let i = 0; i < dadosDaTabela.length; i++) {
  console.log( dadosDaTabela[i] );
}
<div>
  <div>
    <div></div>
    <div>
      <div></div>
      <div></div>
      <table>
        <tbody>
          <tr></tr>
          <tr></tr>
        </tbody>
      </table>
      <div>
        <div></div>
        <div></div>
        <div>
          <div>
            <table>
              <tbody>
                <tr>
                  <td>Valor 1.1</td>
                  <td>Valor 1.2</td>
                </tr>
                <tr>
                  <td>Valor 2.1</td>
                  <td>Valor 2.2</td>
                </tr>
              </tbody>
            </table>
            <div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

document.querySelectorAll

Além da forma citada anteriormente, você também pode utilizar document.querySelectorAll("table"). Esse método não de trará um array, mas te retornará o objeto NodeList (ou Collection) que funcionando semelhante ao array.

Essa interface também retornar a propriedade length com a quantidade total de elementos capturados.

Porém, ela trará uma quantidade maior de métodos. São eles:

  • NodeList.item(): Com esse método você poderá capturar o elemento através de seu índice (que vai de 0..n-1). É o mesmo que fazer document.querySelectorAll("table")[0] ou document.querySelectorAll("table")[1].

    Caso o elemento não exista, retorna undefined

  • NodeList.entries(): Retorna um iterador que permite passar por todos os pares chave/valor contidos no objeto.

  • NodeList.forEach(): Aqui você pode adicionar uma função de ``callback. Assim ele percorrerá toda a lista enviando três argumentos para a função decallback`. Os argumentos são: Elemento Atual; Índice Atual; Lista de objeto.

  • NodeList.keys(): Semelhante ao entries, porém ele retornará apenas as chaves da coleção.

  • NodeList.values(): Semelhante ao entries, porém ele retornará apenas os valores da coleção.

const segundaTabela = document.querySelectorAll("table");
const dadosDaTabela = segundaTabela[1].querySelectorAll("td");

for (let resultado of dadosDaTabela) {
  console.log( resultado.innerText );
}
<div>
  <div>
    <div></div>
    <div>
      <div></div>
      <div></div>
      <table>
        <tbody>
          <tr></tr>
          <tr></tr>
        </tbody>
      </table>
      <div>
        <div></div>
        <div></div>
        <div>
          <div>
            <table>
              <tbody>
                <tr>
                  <td>Valor 1.1</td>
                  <td>Valor 1.2</td>
                </tr>
                <tr>
                  <td>Valor 2.1</td>
                  <td>Valor 2.2</td>
                </tr>
              </tbody>
            </table>
            <div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

jQuery

Com jQuery fica tudo mais fácil, porém, muito código desnecessário nos "bastidores". Mas caso você já esteja utilizando em seu projeto (seja por gosto ou requisito de algum plugin), vale a pena utilizado. Caso contrário utilize VanillaJs

Com o jQuery você já pode informar o valor do índice através do seletor :eq. Ex:

$("table:eq(1) tr")

Pronto. Dessa forma você terá todos os tr da segunda tabela.

$("table:eq(1) td").each( (index, el) => {
  console.log( el );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div>
    <div></div>
    <div>
      <div></div>
      <div></div>
      <table>
        <tbody>
          <tr></tr>
          <tr></tr>
        </tbody>
      </table>
      <div>
        <div></div>
        <div></div>
        <div>
          <div>
            <table>
              <tbody>
                <tr>
                  <td>Valor 1.1</td>
                  <td>Valor 1.2</td>
                </tr>
                <tr>
                  <td>Valor 2.1</td>
                  <td>Valor 2.2</td>
                </tr>
              </tbody>
            </table>
            <div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

0
0

Se você tiver base dessa estrutura pode usar document.getElementsByTagName('table') e daí pra selecionar use colchetes (ex.:[0],1), e pra achar o TR em questão repita o processo:

document.getElementsByTagName('table')[0].getElementsByTagName('tr')

Se estiver certo disto user o innerHTML para pegar o conteúdo de dentro do dele:

document.getElementsByTagName('table')[0].getElementsByTagName('tr').innerHTML

Agora outra maneira de trabalhar é usando querySelector segundo @Valdeir Psr Por exemplo se você quiser selecionar automaticamente o primeiro TABLE:

document.querySelector('table')

Mas se quiser selecionar todos numa ARRAY:

document.querySelectorAll('table')

Depois o processo é igual ao primeiro exemplo.

Se preferir usar JQuery segue a mesma lógica para selecionar, só que escreve menos:

$("table")

Agora se você quiser selecionar entre arrays Ímpar ou Par pode usar assim:

$('tr:even') //Para Ímpar
$('tr:odd') //Para Par

As possibilidades são muitas mesmo, até envolvendo atributos, eu não achei nenhuma lista pronta melhor que essa de todos tipos de seletores: Jquery Selectors

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .