What Chars Needs Escaping in Queryselector

What chars needs escaping in querySelector?

Updated answer:

In a comment below you said:

The thing is Im making a firefox addon Im doing is identifying items by the attribute in label (cuz class is same for all items). and so querySelector('[label="blah blah blah"]') and the user can edit the label, so thats where the problem comes in, users can make it anything.

Ah, that changes everything. A completely different set of rules applies for the operand in an attribute selector. As you're using " to surround the operand, I think you just have to escape the " with a backslash (and of course, escape any backslashes with a backslash), e.g. the selector (not the string for querySelector, we'll come back to that) for a label with the text testing "one" two three would be [label="testing \"one\" two three"]. So starting with a variable containing the target label, we'd replace all " characters with \" and all \ characters with \\:

var div = document.querySelector('[label="' + theLabel.replace(/["\\]/g, '\\$&') + '"]');

Full example: Live Copy

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Escaping attributes</title>
</head>
<body>
  <div label='testing "one" \two three'>This should turn green</div>
  <script>
    (function() {
      var label = 'testing "one" \\two three';
      var div = document.querySelector('[label="' + label.replace(/["\\]/g, '\\$&') + '"]');
      div.style.color = "green";
    })();
  </script>
</body>
</html>

Original answer:

Full details in the CSS specification; for instance, the details for what characters in ID and class selectors need escaping is here:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

Now, the thing about querySelector / querySelectorAll is that since they take a string, and backslashes are special in string literals, you have to use two backslashes in a string literal to have one backslash in your CSS selector. So for the last example in the quote, suppose you wanted to use that as a class selector. You'd have to do this:

var list = document.querySelectorAll(".B\\26 W\\3F");

...which passes the selector .B\26 W\3F into the selector engine. Live Example | Live Source

How to understand escaping characters in document.queryselector?

According to the MDN Web Docs, about litteral Strings:

Besides regular, printable characters, special characters can be encoded using escape notation.

\\ -> \

Now, about Document.querySelector method:

To match against an ID or selectors that do not follow standard CSS syntax (by using a colon or space inappropriately, for example), you must escape the character with a backslash ("\"). As the backslash is also an escape character in JavaScript, if you are entering a literal string, you must escape it twice (once for the JavaScript string, and another time for querySelector()):

No such things is required for Document.getElementById (no explanation is given, maybe it's for legacy reason). Now, back to our question:

Consider the process as a two-pass formatting, let's view them backwards:

You need to send to querySelector a backslash. To fit the requirement of querySelector, You need to escape it once : "#foo\\bar".
If you want to represent a backslash in a Javascript String, you need to escape it. Let's escape each backslash; we get "#foo\\\\bar"

How to escape correctly querySelector() characters

I start with the obvious, but this line work:

document.getElementById('google_ops_iframe_/15465462/cor.it_320x320_domestic_mobile_OF_0__container');

You don't have to escape characters when using getElementById.

But if you really have to use querySelector, the problem is with / and . characters. So your selector should be #google_ops_iframe_\\/15465462\\/cor\\.it_320x320_domestic_mobile_OF_0__container

Here a working example:

console.log(document.querySelector('#google_ops_iframe_\\/15465462\\/cor\\.it_320x320_domestic_mobile_OF_0__container'));

<iframe id="google_ops_iframe_/15465462/cor.it_320x320_domestic_mobile_OF_0__container"></iframe>

Does querySelectorAll support the period(.) character in an id?

A period in querySelectorAll means you are specifying a css class. In your case querySelectorAll is trying to find out a DOM element with id "my" and having a css class "divid". How will querySelectorAll know that this time you want element by id and not by class? It is up to you to have proper id atrribute so as to no to confuse the method. Though a period is allowed, the best practise is to avoid it most of the time so that you do not confuse other libraries like jquery etc.

document.querySelector is not working with = symbol inside the id

So what is wrong with the = symbol in this
document.querySelector("#canvas-=")

As mentioned in the querySelector docs:

To match against an ID or selectors that do not follow standard CSS syntax (by using a colon or space inappropriately, for example), you must escape the character with a backslash ("\"). As the backslash is also an escape character in JavaScript, if you are entering a literal string, you must escape it twice (once for the JavaScript string, and another time for querySelector()):

Working Demo:

const elem = document.querySelector("#canvas-\\=");

console.log(elem.innerHTML);

<h1>This is a Heading</h1>

<p id="canvas-=">This is a paragraph.</p>

What Chars Needs Escaping in Queryselector