Selecting HTML elements which are loaded from scripts (DOM-like HTML lists inside the DOM)

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 100 table tags in the DOM of any webpage in that 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")[0].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?

Hi,

Maybe you’re trying to select them before they are present on the page?

Is it possible to provide a link to this website?

Hi, I run this code in console basically, after all the webpage was loaded.

It is important to me not to link to that website…

Then it’s a bit difficult to help. Good luck :slight_smile:

In the end I manipulated the elements via CSS:

Here’s a way to directly control the CSS of several HTML elements at once:

let myCss =`
   .site_mainTable > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(4) {display: none}
   .site_mainTable > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(5) {display: none}
   gallery-banner, .gallery-banner-gl {display: none}
`;

style = document.createElement("style");
style.type = "text/css";
style.styleSheet ? style.styleSheet.cssText = myCss : style.appendChild(document.createTextNode(myCss) );
   // IF... style tag has a styleSheet, put its cssText as myCSS. ELSE... createTextNode with the contents of myCSS for later use. 

head = document.head || document.getElementsByTagName("head")[0];
head.appendChild(style);

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.