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

user_8977717 0
Viewed 775

I ran into an error with the document.querySelector() function when using a specific type of id in an element. When the id is canvas-= then the querySelector fails with an error -> Failed to execute 'querySelector' on 'Document': '#canvas-=' is not a valid selector.

But when I use document.getElementById(), it works. I can use "[id='canvas-=']" inside querySelector but why is it failing on document.querySelector("#canvas-=")?

  1. document.querySelector("#canvas-=")

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

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

<script>
const elem = document.querySelector("#canvas-=");
console.log(elem.innerHTML);
</script>

</body>
</html>

  1. document.getElementById("canvas-=")

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

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

<script>
const elem = document.getElementById("canvas-=");
console.log(elem.innerHTML);
</script>

</body>
</html>

But everything works fine if I remove = from the id. It doesn't work in any way you insert it. ==-, =-, -= all of these give the error. So what is wrong with the = symbol in this and why does the second method works but the first doesn't?

css html javascript
2 Answers

querySelector method uses CSS3 selectors for querying the DOM.

That means

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.

clearly you have =. So without = it works fine.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

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

<script>
const elem = document.querySelector("#canvas-");
console.log(elem.innerHTML);
</script>

</body>
</html>

More about it. https://www.w3.org/TR/CSS21/syndata.html#characters checkout topic 4.1.3

user_39168310

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>

why does the second method works but the first doesn't?

This happens because getElementById() does not use the same CSS3 selectors for querying the DOM and thus we can use special characters without any issues.

Working Demo:

const elem = document.getElementById("canvas-=");
console.log(elem.innerHTML);

const elem2 = document.getElementById("canvas.foo");
console.log(elem2.innerHTML);
<h1>This is a Heading</h1>
<p id="canvas-=">This is a paragraph.</p>
<p id="canvas.foo">This is a 2nd paragraph.</p>

user_18238410
Related