javascript - 使用 document.write 时元素不显示在检查元素中

Question

我写了以下JS代码：

<script>
function myFunction() {
  document.write("<img src=x>")
}
myFunction();
</script>

虽然我的功能工作正常，并且每当我在 Chrome 中使用 Ctrl+Shift+I 然后 Ctrl+F 然后我输入<img src=x>并得到0 of 0 found. 如何解决这个问题？

标签： javascriptgoogle-chromegoogle-chrome-devtoolsinspect-element

Answer 1

从您的评论中：

chrome 中的 ctrl+shift+i 然后 ctrl+F 然后我输入，我得到 0 of 0 found

没有必要这样做。只需右键单击图像，然后单击检查。Chrome 会在 Elements 面板中直接将您带到它。

在元素面板中重新搜索：

Elements 面板不会显示您编写的确切 HTML，它会显示 DOM，呈现为规范的 HTML。因此，例如，该src属性将用引号引起来。

但是，元素面板中的搜索框不搜索HTML，它搜索 DOM。因此，输入纯文本将匹配文本节点中的文本、属性中的文本、属性名称、标签名称等，但不是精确的 HTML。因此，如果您搜索图像的 URL，它会找到它，但如果您搜索<img src=. 这与通过 添加它无关document.write，这只是 Chrome 的元素面板的工作方式。

您可以通过键入 XPath 或 CSS 选择器来查找元素，例如img[src=x]会找到它。这是一个示例（我使用了您的 Gravatar 而不是x）：

在那里，您可以看到选择器img[src*=gravatar]找到了图像，因为该选择器（使用“包含”属性选择器*=）与元素匹配。