0

Fascinating situation.

I am trying to select elements by class name, just by typing in the Chrome Dev Tools console. I can see the elements that I want to select and they are visible on the page. I wait 3+ seconds for the page to load before I go directly to the Dev Console and type:

document.getElementsByClassName("example");
>> HTMLCollection []

Then, I right click on the element in question and hit "Inspect". I then return to the console and type:

document.getElementsByClassName("example");
>> HTMLCollection [div.example.row]

So now the elements are there! But I did nothing in Dev Tools when inspecting the elements other than hover over them. Can someone help explain this mystery? Thanks so much.

If it's any explanation, I am using Quovo. Here is a demo: https://youtu.be/lPcIYupa2kY.

Russell Pekala
  • 61
  • 5
  • 3
    Perhaps you're loading the elements dynamically and trying to access them before they're actually in the DOM. You haven't posted enough code to know whether that's really the case, however. – Pointy Jul 03 '18 at 19:15
  • Thanks for the tip @Pointy. I think the elements are completely loaded because I can very clearly see them on the page and I wait for the page to completely load. – Russell Pekala Jul 03 '18 at 19:26
  • Please share the rest of the code needed to reproduce the problem – Luca Kiebel Jul 03 '18 at 19:31
  • Hi, I included a one minute demo video. Thanks @Luca. – Russell Pekala Jul 03 '18 at 19:35
  • 1
    Please don't post videos of your code. Post the actual code, right here in your question. – Scott Marcus Jul 03 '18 at 19:36
  • The code in question is the code that I type into the dev tools console. The other code is not the crux of the question @ScottMarcus – Russell Pekala Jul 03 '18 at 19:38
  • I don't understand anything in your question, other than "It makes no sense." – Igor Jul 03 '18 at 19:40
  • 2
    You say *these elements don't get found by the JavaScript*. What **exactly** do you get in your console? Why do you believe that the DOM should be interactive after 3 seconds? Are any elements being dynamically added to the document? If so, then when? Why aren't you simply setting up a `DOMContentLoaded` event handler in your page and attempting to find your elements within its callback? There are so many questions that need answering before we can help you. – Scott Marcus Jul 03 '18 at 19:52
  • @Igor Could you please take another look? I tried to make a lot of edits so that this is as clear as possible. – Russell Pekala Jul 03 '18 at 20:09

2 Answers2

1

What you are describing is really not all that "fascinating". It's really just a matter of understanding how the console reports values.

When you type: 

document.getElementsByClassName("example");

the console will respond by reporting what the return value of that statement is. getElementsByClassName() returns a node list (also known as an HTML Collection) and so that's just what the console shows you:

HTMLCollection []

The elements were there the whole time. If you were to type:

document.getElementsByClassName("example")[0];

The console would report on that particular DOM element. And, if you were to type:

document.getElementsByClassName("example").length;

The console would report the number of elements within that collection.

But, when you inspect an element, you are telling the console that you are interested in just one element and, while each vendor's development tools are built differently, they are all going to show content that is in the scope of that inspected element. So, when you return to the console and try your code again, you get the same collection as before, but with the inspected item taking center stage.

Essentially, this all just boils down to knowing how to interpret the console output. It is not a matter of the DOM being ready in one case and not in another.

If you were to set up a DOMContentLoaded event handler and try your code in there, you'd see that your code works correctly all the time.

Scott Marcus
  • 57,085
  • 6
  • 34
  • 54
1

I figured out that in this case the issue was actually that the element in question was in an iframe. Ran into this issue here: SecurityError: Blocked a frame with origin from accessing a cross-origin frame.

Russell Pekala
  • 61
  • 5
  • This is really just a more specific example of what I stated in my answer. `getElementsByClassName()` returns a collection and that's what the console showed you. Inspecting the element allows the dev tool to peek inside the scope of the iframe and so your next query is based on that scope. – Scott Marcus Jul 03 '18 at 20:34