如何将 document.querySelector 作为变量传递？

Question

我需要一些帮助！为了应用 DRY 原则，我的代码中有很多 document.querySelector，并且我已经创建了一个这样的函数。

const documentQuerySelector = (tag, method, message) => {
  document.querySelector(`.${tag}`)`.${method}`= message;
};

现在当我这样调用函数时：

documentQuerySelector('message', '.textContent', '⛔️ No Number!');

具有“消息”类的 HTML 文本的文本内容不会更改为“⛔️ No Number！”

问题出在方法上。当我将“.textContent”传入函数，并在文档查询选择器中使用它时，document.querySelector(

.${tag}

)

.${method}

=消息，它无法识别

.${method}

。我知道这是问题所在的原因是因为当我使用相同的功能并改为放入“.textContent”时，它工作正常。我如何将该属性作为变量传递以及如何在 document.querySelector 中使用它？

谢谢

我尝试将它作为模板文字传递，但没有成功。

Answer 1

你想要太多的 DRY 以牺牲灵活性和可理解性为代价。此外，函数名称并不能推断出对找到的元素有一些操作。动作本身是一个属性设置器。什么是方法？如果你看得更近一些，你会发现你在这里也没有节省多少打字时间。其他程序员也应该学习如何处理您的功能。所以我的结论是 - 按原样使用

document.querySelector()

，它更简洁和必要。如果你想保存你的输入 - 使用 jQuery，我认为它在 2023 年仍然有效。

  document.querySelector('.message').textContent = '⛔️ No Number!';

如果你多次为同一个元素调用

querySelector

你实际上可以在这里做一些 DRY 并将元素保存在一个变量中：

  const elMessage = document.querySelector('.message');

  elMessage.textContent = '⛔️ No Number!';
  // some other code
  elMessage.classList.toggle('visible', isMessageVisible);

Answer 2

不确定它是如何干燥的，因为你基本上是在重复同样的事情，只是格式不同，但你需要使用括号表示法来使用动态属性。所以你的代码看起来像：

const documentQuerySelector = (selector, property, value) => {
  document.querySelector(selector)[property] = value;
};


documentQuerySelector('.message', 'textContent', '⛔️ No Number!');

<div class="message"></div>