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

Question

我目前正在尝试创建一个实用程序，让我可以使用 eval 等通过其属性之一在元素上运行 JavaScript。我想要这样做，以便我可以引用使用名为 thisEl 的变量调用 JavaScript 代码的元素。

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

这让我想知道，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)};`);

Answer 1

一旦您知道何时要运行特定元素的代码，请选择该元素，然后将其代码作为新函数运行，定义一个您传入的 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，因此实际上没有任何其他选择。