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

【问题标题】：How to access elements on w3school pages from Chrome developer console?如何从 Chrome 开发者控制台访问 w3school 页面上的元素？
【发布时间】：2016-03-25 21:56:02
【问题描述】：

我想在页面上尝试 onfocus 事件：http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onfocus

我使用 Chrome 开发者控制台 (Ctrl+Shift+I)。当我尝试通过在控制台中键入来访问输入元素时：

document.getElementsByTagName("input")

我得到了两个隐藏的输入元素，而不是文本输入元素。截图图片：http://i.imgur.com/zGBsZWY.png 那么这里发生了什么，如何访问“试用”页面上的这些元素？

【问题讨论】：

我相信他们在 W3Schools 上将 iFrames 用于他们的试用页面，这意味着如果不先访问 iFrame，这些元素将不可用。你必须从那个角度接近它。

标签： javascript html google-chrome element w3c

【解决方案1】：

@David 是对的，每个 iframe 都是一个单独的 javascript 上下文。

如果您想在 iframe 的上下文中执行 javascript，请参阅 this question

或者，您可以使用 Chrome 开发工具 (ctrl-shift-c) 的元素选择器，然后在控制台输入 $0，它将返回最后一个焦点元素。然后，当您关注其他内容时，您可以使用 $0 到新关注的元素，$1 用于之前关注的元素等。

见Dev Tools command line API

【讨论】：

阻止来源为“w3schools.com”的框架访问跨域框架。
谢谢，现在它可以工作了，我只需要从相应的开发工具菜单中选择正确的 iframe 上下文。我现在的问题是，当我在文本输入元素上调用“focus()”时，不会触发 onfocus 事件处理程序。可能是什么问题？
我认为.focus() 方法只是将焦点放在元素上，但不会执行侦听器。可以执行.onfocus()直接调用元素上注册的监听器，也可以尝试dispatch an event