1

There's a div with the class name persona_1fc7fc3f that is added to the DOM when I click on a link that opens in a pop-up/modal-dialog window.

I noticed that in the Chrome Dev Tools Console I cannot query for it with JavaScript or jQuery.

For example, executing document.querySelector('[class="persona"]')in the console gives me null.

The strange thing is is that once I use the element inspection tool on the element I can query for it in the console although clicking on the element in the modal window does not help.

Any idea why that might be?

Thanks!

EDIT: Here's a screenshot of the modal dialog and where the class sits:

enter image description here

Unfortunately, targeting the class directly or with an attribute selector does not seem to work.

Using document.querySelector(".persona_1fc7fc3f")or document.querySelector("[class^='persona']")results in:

[enter image description here][

I thought of some kind of Chrome caching issue but even on another machine the problem is the same.

EDIT: Here's some of the DOM markup:

enter image description here

colonel_claypoo
  • 543
  • 1
  • 12
  • 25
  • 1
    `document.querySelector('[class="persona"]')` will match elements which have that single class *only*. If it has multiple classes it won't match. I'd suggest using an actual class selector instead of an attribute selector: `document.querySelector('.persona');` – Rory McCrossan May 15 '19 at 07:53
  • Unfortunately, that still doesn't work. I updated my original post, please have a look if you don't mind. – colonel_claypoo May 15 '19 at 08:29
  • 1
    Then the problem is simply that the element's don't exist in the DOM. Are they in an iframe? Without seeing the HTML to go with the JS selectors we can't help you – Rory McCrossan May 15 '19 at 08:32
  • Thanks. I added a screenshot of the most relevant (I think) DOM markup. – colonel_claypoo May 17 '19 at 09:01
  • 1
    There's two problems there. One is that the content appears to be in an iframe, so you need to adjust the logic to search within that instead of the current document ([here](https://stackoverflow.com/questions/1796619/how-to-access-the-content-of-an-iframe-with-jquery)), and also there is no `.persona` element. There is a `.persona_[randomcharacters]` element. If you want to select that without knowing what the following characters are then you need to use a attribute contains selector: `$('[class*="persona_"]')` – Rory McCrossan May 17 '19 at 09:05
  • You're right, the classname .persona*** always changes. Therefore I should use an attribute selector with 'contains' or 'startswith'. I'm trying to select the iframe but I'm unable to do so. The only attribute that would make sense to select the iframe on is its ***src*** attribute. But doing `$("iframe[src^='WHAT-I-OBFUSCATED-IN-SCREENSHOT']")` does not find it. I can find other iframes in the DOM when I use ***http*** for the src-term, though. Once I use the element selector on the iframe my query works. Same issue as initially reported. – colonel_claypoo May 17 '19 at 10:47
  • I've gotten a little further. It seems that `$("iframe[src^='WHAT-I-OBFUSCATED-IN-SCREENSHOT']")` does work as I can execute `$("iframe[src^='WHAT-I-OBFUSCATED-IN-SCREENSHOT']").contents().find("body").css('display','none')` with success. However, this only works if the modal dialog window has already popped up meaning I can only apply this code and hide the body when I can see the modal dialog window's contents on the screen. Therefore it's safe to assume that the DOM contents of the iframe I'm trying to change do not exist at the outset after all right? – colonel_claypoo May 17 '19 at 11:51

1 Answers1

1

Try document.querySelector('.persona')

document.querySelector('[class="persona"]') will select elements with a single class persona

For example:

console.log(document.querySelector('[class="bright"]'))
console.log(document.querySelector(".bright"))
<div class="bright low"></div>
Ali Elkhateeb
  • 3,413
  • 4
  • 21
  • 39