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。

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)

那么您不需要数据名称

Answer 4

这适用于打字稿：

document.querySelector(\`[data-name=${name}]`)

Answer 5

我迟到了，但请查看代码片段 - 它向您展示了如何获取 data-name 的当前值以及如何更改该值

    let test = document.querySelector('.test');
    // get the current value of data-name
    let name = test.dataset.name;
    console.log('current value of data-name: ' + name)

    // change the value of data-name
    let newName = 'Jimmy'
    console.log(test.dataset.name = newName);

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

在document.querySelector中使用变量

5 个答案: