在document.querySelector中使用变量

Question

如果我有:

<div class="test" data-name="Paul" >

和

var name = "Paul";

我可以document.querySelector用来做这样的事情吗？

document.querySelector("[data-name=name]");

这不起作用.我需要做什么？

Answer 1

您可以这样做,但是您需要使用该CSS.escape()函数来确保正确编码值以便在CSS表达式中使用.

var name = "hello, world!";
document.querySelector("[data-name=" + CSS.escape(name) + "]");

<div data-name=?"hello, world!">?…</div>

const name = "hello, world!";
document.querySelector(`[data-name=${CSS.escape(name)}]`);

如果您不使用,CSS.escape(...)那么某些值name可能会导致您的代码抛出错误.

var name = "hello, world!";
document.querySelector("[data-name=" + name + "]");

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '[data-name=hello, world!]' is not a valid selector

如果您的目标是一个本身不支持的浏览器,CSS.escape()您可以使用Mathias Bynens的这个polyfill.

Answer 2

您需要连接字符串，例如：

document.querySelector("[data-name=" + name + "]");

例如：

（请参阅@Jeremy Bank 的答案以获得更好的答案）

var name = "Paul";
var element = document.querySelector("[data-name=" + name + "]");

alert(element.nodeName);

<div class="test" data-name="Paul">
  test.
</div>

Answer 3

你也可以这样做

let name = 'Paul'
document.querySelector('.'+ name)

那么你不需要数据名称