Selecting HTML elements which are loaded from scripts

The webpages of a certain website are all constructed out in sets of tables. Basically, each set of tables is constructed from scripts.

There are about 80 table tags in the DOM of any webpage I’ve checked in that site (I counted 77 tables in one page in the DOM). A very old site.

Some element children (td) include some tables inside themselves.

I Came to the conclusion that webpages in that site are constructed from scripts because of two reasons:

1) Either of these won’t work on basically any table element in a webpage:

document.querySelector("#mySelector").style.display = "none";
document.querySelector(".mySelector").style.display = "none";
document.querySelector(" /* LONG-CSS-PATH-TAKEN-FROM-DEVTOOL (via "Copy CSS path") */ ").style.display = "none";

Such action will usually output:

TypeError: document.querySelector(…) is null

Ofcourse, all 3 examples work fine on other websites.

2) There are script segments before different parts of the DOM.


My question:

My question is comprised of the following two questions:

1) How could I prevent loading of a particular script that creates a certain set of tables? (a certain part of the whole webpage)?

  • I ask this because it seems to be the only way to hide some elements in this odd layout, given that targeting them traditionally (ID, Class, CSS-PATH) gives the above error.

2) May there be another reason than “loading HTML from scripts” that causes the elements not to be targeted in the traditional way?

Notes:

  1. I run this script from Console.

  2. I also tried to run it with Greasemonkey inside a window.onload event handler.

If you can see the element in the DOM, you can query it.

One possible explanation for the behavior you’re seeing is that the elements are being loaded into the DOM after your query. You haven’t provided enough clues to offer any practical advice other than to figure out what scripts are being loaded and take it from there.

Another possible explanation is that the tables are in iframes. Querying against the DOM of the top frame won’t return elements in the DOMs of other frames. You might see them in the DevTools Elements pane because it shows all the DOMs, but you have to get a reference to the correct frame’s document before your can query it.

Last but definitely not least is the very simple question… WAT? What’s going on there? Hundreds of tables? It makes no sense, even by the standards of the late 90s when using tables for layout was considered a good idea.

Your strategy shouldn’t be to hide them but rather to completely get rid of them. Consider running away.