Use variables in document.querySelector

Question

If I have:

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

and

var name = "Paul";

Can I use document.querySelector to do something like this?

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

This doesn't work. What do I have to do?

`document.querySelector('.test')` or `document.getElementsByClassName('test')[0]` if you have a class, why would you want to use an unconventional way? — zer00ne, May 06 '16 at 21:41
No man, there are a lot's of elements with class 'test', I have to select with data-name — Gicminos, May 06 '16 at 21:42
Reopening because escaping CSS identifiers is not covered by the other question. — Oriol, May 30 '16 at 15:03

Jeremy · Accepted Answer · 2016-05-11T08:40:49.983

You can do that, but you need to use the CSS.escape() function to ensure the value is properly encoded for use in a CSS expression.

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)}]`);

If you don't use CSS.escape(...) then certain values of name could cause your code to throw an error instead.

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

If you're targeting a browser which doesn't natively support CSS.escape() you can use this polyfill by Mathias Bynens.

blurfus · Answer 2 · 2016-05-06T21:35:56.920

8

You need to concatenate the strings, like:

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

For example:

(See @Jeremy Bank's answer for a much better answer, tho)

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

alert(element.nodeName);

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

edited May 06 '16 at 21:35

answered May 06 '16 at 21:33

blurfus

13,485
8
55
61

Only if the value of `name` is a [CSS identifier](https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier). – Oriol May 06 '16 at 21:35
fair comment, thx - directing readers to the better answer that handles the case when it's not a CSS Identifier – blurfus May 06 '16 at 21:41

score 5 · Answer 3 · answered Mar 01 '20 at 13:20

5

you could also do this

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

then you do not need a data-name

answered Mar 01 '20 at 13:20

coding-i-like

61
1
1

1

It will not work - use of "." - indicate that you are trying to grab div with class - Paul - and div does not have that class – Sandeep Chikhale Mar 01 '20 at 14:08

score 0 · Answer 4 · edited May 20 '21 at 18:37

0

This works in Typescript:

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

edited May 20 '21 at 18:37

jxramos

7,356
6
57
105

answered May 20 '21 at 11:34

Kevin Leto

17
4

score 0 · Answer 5 · answered Oct 05 '22 at 05:27

0

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

Try in this way it may be work :-

var username = "Paul";

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

answered Oct 05 '22 at 05:27

Althaf Ahd

1
1
1

score -1 · Answer 6 · answered Mar 18 '21 at 20:11

I'm super late to this party but check out the code snippet - it shows you how to get the current value of data-name and also how to change the value

    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>

Use variables in document.querySelector

6 Answers6

Linked