时间戳

首页 > 解决方案 > Firefox 的检查元素如何确定 HTML 元素的查询选择器？

javascript - Firefox 的检查元素如何确定 HTML 元素的查询选择器？

问题描述

我目前正在尝试制作一个实用程序，让我通过它的一个属性在一个元素上运行 JavaScripteval以及诸如此类。我想这样做，以便我可以使用名为的变量引用调用 JavaScript 代码的元素thisEl。

虽然我已经能够制作一个基本的查询选择器生成器，但它是一种相当低效的方法。

所以这让我想知道，Firefox 在检查元素中使用了什么（Ctrl+Shift+I，右键单击任何元素 -> 复制 -> CSS 选择器）？我知道它可能是 C++ 或其他一些本地语言，但它可能可以翻译成 JavaScript，不是吗？

编辑：这是一些示例代码。

在 HTML 中，我会有以下内容：

<div code="console.log(thisEl.tagName); // --> DIV."></div>

理想情况下，我希望通过执行以下操作来执行代码：

eval(`let thisEl = document.querySelector('${(QUERY SELECTOR HERE)}'); 
${(ELEMENTS CODE HERE)};`);

标签： javascript

解决方案

一旦您知道何时要运行特定元素的代码，请选择该元素，然后将其code作为 a运行new Function，定义thisEl您传入的参数：

document.querySelector('button').addEventListener('click', () => {
  const div = document.querySelector('div');
  const code = div.getAttribute('code');
  const fn = new Function('thisEl', code);
  fn(div);
});
<div code="console.log(thisEl.tagName); // --> DIV."></div>
<button>click</button>

如果要运行所有code具有属性的元素的代码，请使用[code]选择器：

document.querySelector('button').addEventListener('click', () => {
  const elms = document.querySelectorAll('[code]');
  for (const elm of elms) {
    const code = elm.getAttribute('code');
    const fn = new Function('thisEl', code);
    fn(elm);
  }
});
<div code="console.log(thisEl.tagName);"></div>
<div code="console.log('foo bar');"></div>
<button>click</button>

使用new Function很少是一个好主意，但由于您想检索元素属性内的代码文本并将其解析为可运行的 Javascript，因此实际上没有任何其他选择。

推荐阅读