883044 - querySelector doesn't work if the ID contains a colon (:)

Status: RESOLVED INVALID

(Core :: DOM: Core & HTML, defect)

Description

[Mike Kaply [:mkaply]]

Just tried:

document.querySelector("#Tools:PrivateBrowsing") and I get:

[Exception... "An invalid or illegal string was specified"  code: "12" nsresult: "0x8053000c (SyntaxError)"]

Comment 1

[Boris Zbarsky [:bzbarsky]]

That's because colons in CSS syntax are used for pseudo-classes or pseudo-elements and the argument to querySelector uses CSS syntax.

You want:

  document.querySelector("#Tools\\:PrivateBrowsing")

(One backslash to escape the ':' for CSS, and the other to escape the first one for JS).

Comment 2

[Boris Zbarsky [:bzbarsky]]

Note that it would similarly not work to blindly do querySelector("#foo bar") to find an element with id="foo bar", and various other variations on this theme.

Comment 3

[Mike Kaply [:mkaply]]

How do you specify the space? Again with the double escape?

None of this is in our querySelector docs. Probably would be worth putting there...

Comment 4

[Boris Zbarsky [:bzbarsky]]

> How do you specify the space? Again with the double escape?

Yes.  Just like this:

  id="foo\bar"

would need querySelector("foo\\\\bar"). Don't do that with your id's.  ;)

Comment 5

[Boris Zbarsky [:bzbarsky]]

> querySelector("foo\\\\bar")

querySelector("#foo\\\\bar"), of course.

Comment 6

[Jeremie Patonnier :Jeremie]

Added a note on documentation about this:

https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector
https://developer.mozilla.org/en-US/docs/Web/API/document.querySelectorAll
https://developer.mozilla.org/en-US/docs/Web/API/element.querySelector
https://developer.mozilla.org/en-US/docs/Web/API/element.querySelectorAll

Comment 7

[(not reading bugmail) Nick Desaulniers [:\n]]

@bz: How about if the selector contains a backslash?

var a = document.createElement("a");
a.id = "\n";
document.body.appendChild(a);
document.getElementById("\n"); // works
document.querySelector("#\n"); // invalid string error
document.querySelector("#\\n"); // null

Comment 8

[Boris Zbarsky [:bzbarsky]]

> @bz: How about if the selector contains a backslash?

Backslash is the CSS escape character.  It's also the JavaScript string escape character.

> a.id = "\n";

This creates an element whose ID is a single newline character.

> document.getElementById("\n"); // works

Right, because you're passing a string that has a newline and nothing else to getElementById.

> document.querySelector("#\n"); // invalid string error

Indeed, this is passing to querySelector a string consisting of '#' and then a newline, which is not a valid selector.

> document.querySelector("#\\n"); // null

This is passing to querySelector a string consisting of #\n, which will match an element whose ID is "n", since \n is not newline in CSS but just the literal character 'n'.

Furthermore, literal newlines cannot be escaped by prefixing them with a backslash in CSS.

If you want to match an element ID containing nothing but a newline in CSS, you need to do:

  document.querySelector("#\\0a")

(note that two newlines because you have to get the backslash through to CSS for the numeric escape so you have to escape it from the JS string literal syntax).

See also http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2013-June/039900.html