javascript - 需要深入了解这一小段 HTML 和 Javascript

Question

我在 my page 上嵌入了一个 LinkedIn Apply Now 按钮。但是有几件事让我感到困惑。首先，当我右键单击小部件时，我无法“另存为”图像。猜测，因为它不是图像!这样的按钮是如何创建的？

其次，当我右键单击页面并查看源代码时，我看到的只是我编写的代码。我认为包含的 in.js 会将 DOM 元素附加到文档以使该按钮可见。 (例如 headElement.appendChild(document.createElement('img')) 或类似的东西。怎么会？如果 DOM 树中没有嵌入任何东西，那个按钮怎么在那里？如果嵌​​入了某些东西，那么为什么它们在 HTML 源代码中不可见？因为当我 headElement.appendChild 东西时使用 Javascript，它也出现在 HTML 源代码中。

最后但同样重要的是，我如何检查 LinkedIn 按钮是在 iframe 中还是单独存在？

编辑: 我检查了 Chrome 上的元素，得到的是一堆 span 标签。还有一个带有 a 的 href="javascript:void(0); 标签。那是什么意思？ javascript:void(0) 有什么作用？

我希望对此有深入的了解，因为我对前端开发、html 和 javascript 以及所有...都是新手...

感谢任何帮助。

Answer 1

按钮无非就是几个嵌套的span，其中一个，id = li_ui_li_gen_1325073350899_0-logo 是用CSS样式化的，有背景图片，指向至 http://static02.linkedin.com/scds/common/u/img/sprite/sprite_connect_v13.png

请注意，该图像包含按钮背景以外的其他内容。那是因为他们使用了一种名为 CSS sprites 的技术。 .

实际上，大部分工作都是由 in.js 文件完成的。但是，如果您查看代码，您会发现它已被缩小，因此虽然有点(但并非完全不可能，这实际上是一个很好的练习)来查看代码。

最后，不，没有iframe，只是一堆span。

正如其他答案所说，您可以尝试使用 FF+Firebug 或 Chrome 浏览文档。