(javascript) Taking value from a very complex html structure

Question

I’ll try to be quite objective:

How do I get the value within a tag that is within 200 million other Childs ?

(understanding right away that I will not be able to make changes to the code, because it is the code of a site that I need to filter to collect specific data):

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>
...........

For example, I need to get the information from the second table (within the tags TR)... assuming there is no id or class, as I do to get this information ?

Grateful.

Answer 1

You can do this using selectors from jQuery or capturing all elements and returning only one of them through the index.

Document.getelementsbytagname

With document.getElementsByTagName('table') you return a array with the interface Htmlcollection.

This interface will give you the property length. This property will return the total amount of captured elements with the above code.

In addition to the mentioned property, you will also have access to two methods;

• HTMLCollection.item(): With this method you can capture the element through its index (that goes from 0..n-1). It’s the same as doing document.getElementsByTagName('table')[0] or document.getElementsByTagName('table')[1].

  If the element does not exist, returns null

• HTMLCollection.namedItem(): Returns the node specified by the ID or, if it has no ID, the item whose name property is equal to the query.

  Returns null if no node matches the searched name.

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

In addition to the above, you can also use document.querySelectorAll("table"). This method will not bring a array, but you will return the object Nodelist (or Collection) which works similar to array.

This interface also return the property length with the total quantity of elements caught.

However, it will bring a greater amount of methods. It is they:

• NodeList.item(): With this method you can capture the element through its index (that goes from 0..n-1). It’s the same as doing document.querySelectorAll("table")[0] or document.querySelectorAll("table")[1].

  If the element does not exist, returns undefined

• NodeList.entries(): Returns a iterator that allows you to pass through all key/value pairs contained in the object.

• NodeList.forEach(): Here you can add a function of ``callback. Assim ele percorrerá toda a lista enviando três argumentos para a função decallback`. Arguments are: Current Element; Current Index; Object List.

• NodeList.keys(): Similar to entries, but it will return only the keys of the collection.

• NodeList.values(): Similar to entries, but it will return only the values of the collection.

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

With jQuery Everything gets easier, however, a lot of unnecessary code in the "behind the scenes". But if you are already using in your project (either by taste or requirement of some plugin), it is worth using. Otherwise use Vanillajs

With the jQuery you can already enter the value of the index through the selector :eq. Ex:

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

Ready. That way you’ll have all the tr of the second table.

$("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>

Answer 2

If you have the basis of this structure you can use document.getElementsByTagName('table') and then to select use brackets (e.g.: [0],1), and to find the TR in question repeat the process:

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

If you’re sure about this, innerHTML to take the contents from inside his:

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

Now another way to work is by using querySelector second @Valdeir Psr For example if you want to automatically select the first TABLE:

Document.querySelector('table')

But if you want to select all in an ARRAY:

document.querySelectorAll('table')

Then the process is equal to the first example.

If you prefer to use Jquery follow the same logic to select, only write less:

$("table")

Now if you want to select between Odd or Even arrays you can use so:

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

The possibilities are many even, even involving attributes, I did not find any ready list better than this of all types of selectors: Jquery Selectors