0

I'm trying to do some debugging using Chrome dev tools. I'm looking at the HTML - and in the console trying to find the corresponding content using documents.getElementsByClassName - the call returns empty set - while I'm actually looking at the element. I tried copy-pasting the class name - with the same result - see the screenshot below. What am I missing?

enter image description here

Mech
  • 3,611
  • 1
  • 12
  • 25
Aleks G
  • 52,841
  • 25
  • 149
  • 233
  • 2
    The DOM tree you are looking at is probably in a frame... Check the frame selector dropdown in the toolbar... – Vishwanath Aug 12 '14 at 12:28
  • @vishwanath Ah! that would explain it. Just looked through the hierarchy - and the element in question is inside the iframe. In this case, what's the right way to access it? – Aleks G Aug 12 '14 at 12:40
  • If you just want to check in the chrome developer console. There is selector of context as seen in screenshot just above Console was cleared. Use that. If you need programmatically Id rather write answer for that. – Vishwanath Aug 12 '14 at 12:43
  • Maybe this will help: [http://stackoverflow.com/questions/1451208/access-iframe-elements-in-javascript](http://stackoverflow.com/questions/1451208/access-iframe-elements-in-javascript) – Andranik Aug 12 '14 at 12:44
  • @vishwanath Yeah, I needed programmatically - but I got the answer from [this question](http://stackoverflow.com/questions/1088544/javascript-get-element-from-within-an-iframe). As for this question put your comment in an answer - and I'll accept it. – Aleks G Aug 12 '14 at 12:47

2 Answers2

2

You are getting blank nodeList because you are looking at DOM tree in an iFrame. If you need to access nodes inside an iFrame, you first needs to get access to its window and DOM.

You can don that using following

var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var innerWindow = iframe.contentWindow;

Once you have window and DOM you can just call the DOM related methods on document or if you have any other DOM parsing library like jQuery, object of which is stored on DOM. You can use that like following

Using document

innerDoc.getElementsByClassName('mh')

Using window

innerWindow.$('.mh')
Vishwanath
  • 6,027
  • 4
  • 34
  • 56
  • Am I correct in thinking that the `innerDoc` method is specific for native/vanilla Javascript, and the `innerWindow` method for jQuery? That they, i.e. the values of the two variables, are not interchangeable? – Frank Conijn Aug 12 '14 at 13:14
  • innerWindow is window object which contains all the global variables, jQuery being one. Whereas document object contains DOM API (yes its native) to access the DOM. PS: jQuery internally uses document object only. – Vishwanath Aug 12 '14 at 13:17
  • I'm afraid I don't understand a couple of terms/rationales in your comment reply, probably due to not having had any formal JS training. But I'll rephrase the question: using vanilla JS, should I use the `innerDoc` method? – Frank Conijn Aug 12 '14 at 13:22
-3

document.getElementsByClassName returns an array, so you must specify the index of the desired element.Example:

document.getElementsByClassName("class")[0];
Andranik
  • 90
  • 3