24

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?

5
  • 1
    Uhhhhh... "[data-name="+name+"]", maybe? May 6, 2016 at 21:33
  • that's not a variable, that's a string literal. May 6, 2016 at 21:36
  • document.querySelector('.test') or document.getElementsByClassName('test')[0] if you have a class, why would you want to use an unconventional way?
    – zer00ne
    May 6, 2016 at 21:41
  • No man, there are a lot's of elements with class 'test', I have to select with data-name
    – Gicminos
    May 6, 2016 at 21:42
  • Reopening because escaping CSS identifiers is not covered by the other question.
    – Oriol
    May 30, 2016 at 15:03

6 Answers 6

54

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.

0
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>

2
  • Only if the value of name is a CSS identifier.
    – Oriol
    May 6, 2016 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 6, 2016 at 21:41
5

you could also do this

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

then you do not need a data-name

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 Mar 1, 2020 at 14:08
0

This works in Typescript:

document.querySelector(\`[data-name=${name}]`)
0
<div class="test" data-name="Paul"></div>

Try in this way it may be work :-

var username = "Paul";

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

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.