如何从Chrome开发者控制台访问w3school页面上的元素？

Question

I would like to experimenting with onfocus event on page: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onfocus

I use Chrome developer console (Ctrl+Shift+I). When I try to access the input element by typing in the console:

document.getElementsByTagName("input")

I get two hidden input elements instead of the text input element. Screenshot image: http://i.imgur.com/zGBsZWY.png So What's going on here, and how can access those elements on the "tryout" pages?

Answer 1

@David is right, each iframe is a separate javascript context.

If you want to execute javascript in context of an iframe, see this question

Alternatively, you can use element picker of Chrome Dev Tools (ctrl-shift-c) and then in console type $0 , it will return the last focused element. When you then focus something else, you can use $0 to the newly focused element, $1 for previously focused one etc.

See Dev Tools command line API