javascript - 在 document.querySelector 中使用变量

Question

如果我有:

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

和

var name = "Paul";

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

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

这行不通。我必须做什么？

Answer 1

你可以这样做，但你需要使用 the CSS.escape() function以确保值被正确编码以用于 CSS 表达式。

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

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

ES2015:

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()，您可以使用 this polyfill by Mathias Bynens .