在 document.querySelector 中使用变量

Use variables in document.querySelector

本文关键字：变量 document querySelector      更新时间：2023-09-26

如果我有：

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

和

var name = "Paul";

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

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

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

你可以这样做，但你需要使用 CSS.escape() 函数来确保值被正确编码以便在 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()您可以使用Mathias Bynens的这个polyfill。

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

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

例如：

(请参阅@Jeremy银行的答案以获得更好的答案，tho(

var name = "Paul";
var element = document.querySelector("[data-name=" + name + "]");
alert(element.nodeName);
<div class="test" data-name="Paul">
  test.
</div>

你也可以这样做

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

那么你不需要数据名称

这

在打字稿中有效：

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

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

尝试以这种方式它可能是有效的：-

var username = "Paul";
document.querySelector(`[data-name="${username}"]`);

我参加这个聚会太晚了，但请查看代码片段 - 它向您展示了如何获取 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>

相关文章：