Using querySelector with IDs that are numbers
From what I understand the HTML5 spec lets you use IDs that are numbers like this.
<div id="1"></div>
<div id="2"></div>
I can access these fine using getElementById
but not with querySelector
. If I try do the following I get SyntaxError: DOM Exception 12 in the console.
document.querySelector("#1")
I'm just curious why using numbers as IDs does not work querySelector
when the HTML5 spec says these are valid. I tried multiple browsers.
javascript html5 css-selectors selectors-api
add a comment |
From what I understand the HTML5 spec lets you use IDs that are numbers like this.
<div id="1"></div>
<div id="2"></div>
I can access these fine using getElementById
but not with querySelector
. If I try do the following I get SyntaxError: DOM Exception 12 in the console.
document.querySelector("#1")
I'm just curious why using numbers as IDs does not work querySelector
when the HTML5 spec says these are valid. I tried multiple browsers.
javascript html5 css-selectors selectors-api
1
I don't think the HTML5 spec says they are valid. I'll double check...
– beautifulcoder
Nov 30 '13 at 22:08
3
@beautifulcoder They are valid
– lifetimes
Nov 30 '13 at 22:08
1
Nevermind, according to validator.w3.org/check it is valid to use numbers. Maybe modern browsers haven't quite implemented the standard?
– beautifulcoder
Nov 30 '13 at 22:15
add a comment |
From what I understand the HTML5 spec lets you use IDs that are numbers like this.
<div id="1"></div>
<div id="2"></div>
I can access these fine using getElementById
but not with querySelector
. If I try do the following I get SyntaxError: DOM Exception 12 in the console.
document.querySelector("#1")
I'm just curious why using numbers as IDs does not work querySelector
when the HTML5 spec says these are valid. I tried multiple browsers.
javascript html5 css-selectors selectors-api
From what I understand the HTML5 spec lets you use IDs that are numbers like this.
<div id="1"></div>
<div id="2"></div>
I can access these fine using getElementById
but not with querySelector
. If I try do the following I get SyntaxError: DOM Exception 12 in the console.
document.querySelector("#1")
I'm just curious why using numbers as IDs does not work querySelector
when the HTML5 spec says these are valid. I tried multiple browsers.
javascript html5 css-selectors selectors-api
javascript html5 css-selectors selectors-api
edited May 18 '14 at 13:44
BoltClock♦
517k12811531193
517k12811531193
asked Nov 30 '13 at 22:06
Berry BlueBerry Blue
5,105103871
5,105103871
1
I don't think the HTML5 spec says they are valid. I'll double check...
– beautifulcoder
Nov 30 '13 at 22:08
3
@beautifulcoder They are valid
– lifetimes
Nov 30 '13 at 22:08
1
Nevermind, according to validator.w3.org/check it is valid to use numbers. Maybe modern browsers haven't quite implemented the standard?
– beautifulcoder
Nov 30 '13 at 22:15
add a comment |
1
I don't think the HTML5 spec says they are valid. I'll double check...
– beautifulcoder
Nov 30 '13 at 22:08
3
@beautifulcoder They are valid
– lifetimes
Nov 30 '13 at 22:08
1
Nevermind, according to validator.w3.org/check it is valid to use numbers. Maybe modern browsers haven't quite implemented the standard?
– beautifulcoder
Nov 30 '13 at 22:15
1
1
I don't think the HTML5 spec says they are valid. I'll double check...
– beautifulcoder
Nov 30 '13 at 22:08
I don't think the HTML5 spec says they are valid. I'll double check...
– beautifulcoder
Nov 30 '13 at 22:08
3
3
@beautifulcoder They are valid
– lifetimes
Nov 30 '13 at 22:08
@beautifulcoder They are valid
– lifetimes
Nov 30 '13 at 22:08
1
1
Nevermind, according to validator.w3.org/check it is valid to use numbers. Maybe modern browsers haven't quite implemented the standard?
– beautifulcoder
Nov 30 '13 at 22:15
Nevermind, according to validator.w3.org/check it is valid to use numbers. Maybe modern browsers haven't quite implemented the standard?
– beautifulcoder
Nov 30 '13 at 22:15
add a comment |
3 Answers
3
active
oldest
votes
It is valid, but requires some special handling. From here: http://mathiasbynens.be/notes/css-escapes
Leading digits
If the first character of an identifier is numeric, you’ll need to escape it based on its Unicode code point. For example, the code point for the character 1 is U+0031, so you would escape it as 00031 or 31 .
Basically, to escape any numeric character, just prefix it with 3 and append a space character ( ). Yay Unicode!
So your code would end up as (CSS first, JS second):
#31 {
background: hotpink;
}
document.getElementById('1');
document.querySelector('#\31 ');
What would the syntax be for values greater than 9? I can't get this to work with IDs like 10.
– Berry Blue
Dec 3 '13 at 1:23
5
You need a space after the first character:#\31 0
- you can refer to mothereffingcssescapes.com
– Dennis
Dec 3 '13 at 23:41
Thank you for the follow-up and the link!
– Berry Blue
Dec 4 '13 at 14:17
Note that the space is only necessary if a character that is a hex digit immediately follows the escape sequence, in order to distinguish that character from the escape sequence. See w3.org/TR/CSS21/syndata.html#characters for more details.
– BoltClock♦
May 18 '14 at 13:46
add a comment |
Because while they are valid in the HTML5 spec, they are not valid in CSS, which is what "query selector" means.
Instead, you would have to do this: document.querySelector("[id='1']")
, which is very long-winded considering you could give it a meaningful ID like message1
or something ;)
You don't "have to" - there is a way to use an id selector with a leading digit. I agree though that it is better to have a meaningful id.
– Dennis
Nov 30 '13 at 22:18
3
UUIDs can start by a number.
– Alfonso Nishikawa
Mar 15 '18 at 12:54
add a comment |
I needed an approach which was automated. A recent change meant the id values used were no longer simple alphabetic characters and included numbers and special characters.
I ended up using CSS.escape
: https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape
console.log(CSS.escape('1'));
First, this is the failing case:
const theId = "1";
document.querySelector(`#${theId}`);
const el = document.querySelector(`#${theId}`);
el.innerHTML = "After";
<div id="1">Before</div>
And now using CSS.escape
:
const theId = "1";
const el = document.querySelector(`#${CSS.escape(theId)}`);
el.innerHTML = "After";
<div id="1">Before</div>
See how it correctly changes to show After
, demonstrating the selector worked!
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f20306204%2fusing-queryselector-with-ids-that-are-numbers%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
It is valid, but requires some special handling. From here: http://mathiasbynens.be/notes/css-escapes
Leading digits
If the first character of an identifier is numeric, you’ll need to escape it based on its Unicode code point. For example, the code point for the character 1 is U+0031, so you would escape it as 00031 or 31 .
Basically, to escape any numeric character, just prefix it with 3 and append a space character ( ). Yay Unicode!
So your code would end up as (CSS first, JS second):
#31 {
background: hotpink;
}
document.getElementById('1');
document.querySelector('#\31 ');
What would the syntax be for values greater than 9? I can't get this to work with IDs like 10.
– Berry Blue
Dec 3 '13 at 1:23
5
You need a space after the first character:#\31 0
- you can refer to mothereffingcssescapes.com
– Dennis
Dec 3 '13 at 23:41
Thank you for the follow-up and the link!
– Berry Blue
Dec 4 '13 at 14:17
Note that the space is only necessary if a character that is a hex digit immediately follows the escape sequence, in order to distinguish that character from the escape sequence. See w3.org/TR/CSS21/syndata.html#characters for more details.
– BoltClock♦
May 18 '14 at 13:46
add a comment |
It is valid, but requires some special handling. From here: http://mathiasbynens.be/notes/css-escapes
Leading digits
If the first character of an identifier is numeric, you’ll need to escape it based on its Unicode code point. For example, the code point for the character 1 is U+0031, so you would escape it as 00031 or 31 .
Basically, to escape any numeric character, just prefix it with 3 and append a space character ( ). Yay Unicode!
So your code would end up as (CSS first, JS second):
#31 {
background: hotpink;
}
document.getElementById('1');
document.querySelector('#\31 ');
What would the syntax be for values greater than 9? I can't get this to work with IDs like 10.
– Berry Blue
Dec 3 '13 at 1:23
5
You need a space after the first character:#\31 0
- you can refer to mothereffingcssescapes.com
– Dennis
Dec 3 '13 at 23:41
Thank you for the follow-up and the link!
– Berry Blue
Dec 4 '13 at 14:17
Note that the space is only necessary if a character that is a hex digit immediately follows the escape sequence, in order to distinguish that character from the escape sequence. See w3.org/TR/CSS21/syndata.html#characters for more details.
– BoltClock♦
May 18 '14 at 13:46
add a comment |
It is valid, but requires some special handling. From here: http://mathiasbynens.be/notes/css-escapes
Leading digits
If the first character of an identifier is numeric, you’ll need to escape it based on its Unicode code point. For example, the code point for the character 1 is U+0031, so you would escape it as 00031 or 31 .
Basically, to escape any numeric character, just prefix it with 3 and append a space character ( ). Yay Unicode!
So your code would end up as (CSS first, JS second):
#31 {
background: hotpink;
}
document.getElementById('1');
document.querySelector('#\31 ');
It is valid, but requires some special handling. From here: http://mathiasbynens.be/notes/css-escapes
Leading digits
If the first character of an identifier is numeric, you’ll need to escape it based on its Unicode code point. For example, the code point for the character 1 is U+0031, so you would escape it as 00031 or 31 .
Basically, to escape any numeric character, just prefix it with 3 and append a space character ( ). Yay Unicode!
So your code would end up as (CSS first, JS second):
#31 {
background: hotpink;
}
document.getElementById('1');
document.querySelector('#\31 ');
edited May 18 '14 at 13:44
BoltClock♦
517k12811531193
517k12811531193
answered Nov 30 '13 at 22:11
DennisDennis
27.3k75174
27.3k75174
What would the syntax be for values greater than 9? I can't get this to work with IDs like 10.
– Berry Blue
Dec 3 '13 at 1:23
5
You need a space after the first character:#\31 0
- you can refer to mothereffingcssescapes.com
– Dennis
Dec 3 '13 at 23:41
Thank you for the follow-up and the link!
– Berry Blue
Dec 4 '13 at 14:17
Note that the space is only necessary if a character that is a hex digit immediately follows the escape sequence, in order to distinguish that character from the escape sequence. See w3.org/TR/CSS21/syndata.html#characters for more details.
– BoltClock♦
May 18 '14 at 13:46
add a comment |
What would the syntax be for values greater than 9? I can't get this to work with IDs like 10.
– Berry Blue
Dec 3 '13 at 1:23
5
You need a space after the first character:#\31 0
- you can refer to mothereffingcssescapes.com
– Dennis
Dec 3 '13 at 23:41
Thank you for the follow-up and the link!
– Berry Blue
Dec 4 '13 at 14:17
Note that the space is only necessary if a character that is a hex digit immediately follows the escape sequence, in order to distinguish that character from the escape sequence. See w3.org/TR/CSS21/syndata.html#characters for more details.
– BoltClock♦
May 18 '14 at 13:46
What would the syntax be for values greater than 9? I can't get this to work with IDs like 10.
– Berry Blue
Dec 3 '13 at 1:23
What would the syntax be for values greater than 9? I can't get this to work with IDs like 10.
– Berry Blue
Dec 3 '13 at 1:23
5
5
You need a space after the first character:
#\31 0
- you can refer to mothereffingcssescapes.com– Dennis
Dec 3 '13 at 23:41
You need a space after the first character:
#\31 0
- you can refer to mothereffingcssescapes.com– Dennis
Dec 3 '13 at 23:41
Thank you for the follow-up and the link!
– Berry Blue
Dec 4 '13 at 14:17
Thank you for the follow-up and the link!
– Berry Blue
Dec 4 '13 at 14:17
Note that the space is only necessary if a character that is a hex digit immediately follows the escape sequence, in order to distinguish that character from the escape sequence. See w3.org/TR/CSS21/syndata.html#characters for more details.
– BoltClock♦
May 18 '14 at 13:46
Note that the space is only necessary if a character that is a hex digit immediately follows the escape sequence, in order to distinguish that character from the escape sequence. See w3.org/TR/CSS21/syndata.html#characters for more details.
– BoltClock♦
May 18 '14 at 13:46
add a comment |
Because while they are valid in the HTML5 spec, they are not valid in CSS, which is what "query selector" means.
Instead, you would have to do this: document.querySelector("[id='1']")
, which is very long-winded considering you could give it a meaningful ID like message1
or something ;)
You don't "have to" - there is a way to use an id selector with a leading digit. I agree though that it is better to have a meaningful id.
– Dennis
Nov 30 '13 at 22:18
3
UUIDs can start by a number.
– Alfonso Nishikawa
Mar 15 '18 at 12:54
add a comment |
Because while they are valid in the HTML5 spec, they are not valid in CSS, which is what "query selector" means.
Instead, you would have to do this: document.querySelector("[id='1']")
, which is very long-winded considering you could give it a meaningful ID like message1
or something ;)
You don't "have to" - there is a way to use an id selector with a leading digit. I agree though that it is better to have a meaningful id.
– Dennis
Nov 30 '13 at 22:18
3
UUIDs can start by a number.
– Alfonso Nishikawa
Mar 15 '18 at 12:54
add a comment |
Because while they are valid in the HTML5 spec, they are not valid in CSS, which is what "query selector" means.
Instead, you would have to do this: document.querySelector("[id='1']")
, which is very long-winded considering you could give it a meaningful ID like message1
or something ;)
Because while they are valid in the HTML5 spec, they are not valid in CSS, which is what "query selector" means.
Instead, you would have to do this: document.querySelector("[id='1']")
, which is very long-winded considering you could give it a meaningful ID like message1
or something ;)
answered Nov 30 '13 at 22:08
Niet the Dark AbsolNiet the Dark Absol
256k53357467
256k53357467
You don't "have to" - there is a way to use an id selector with a leading digit. I agree though that it is better to have a meaningful id.
– Dennis
Nov 30 '13 at 22:18
3
UUIDs can start by a number.
– Alfonso Nishikawa
Mar 15 '18 at 12:54
add a comment |
You don't "have to" - there is a way to use an id selector with a leading digit. I agree though that it is better to have a meaningful id.
– Dennis
Nov 30 '13 at 22:18
3
UUIDs can start by a number.
– Alfonso Nishikawa
Mar 15 '18 at 12:54
You don't "have to" - there is a way to use an id selector with a leading digit. I agree though that it is better to have a meaningful id.
– Dennis
Nov 30 '13 at 22:18
You don't "have to" - there is a way to use an id selector with a leading digit. I agree though that it is better to have a meaningful id.
– Dennis
Nov 30 '13 at 22:18
3
3
UUIDs can start by a number.
– Alfonso Nishikawa
Mar 15 '18 at 12:54
UUIDs can start by a number.
– Alfonso Nishikawa
Mar 15 '18 at 12:54
add a comment |
I needed an approach which was automated. A recent change meant the id values used were no longer simple alphabetic characters and included numbers and special characters.
I ended up using CSS.escape
: https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape
console.log(CSS.escape('1'));
First, this is the failing case:
const theId = "1";
document.querySelector(`#${theId}`);
const el = document.querySelector(`#${theId}`);
el.innerHTML = "After";
<div id="1">Before</div>
And now using CSS.escape
:
const theId = "1";
const el = document.querySelector(`#${CSS.escape(theId)}`);
el.innerHTML = "After";
<div id="1">Before</div>
See how it correctly changes to show After
, demonstrating the selector worked!
add a comment |
I needed an approach which was automated. A recent change meant the id values used were no longer simple alphabetic characters and included numbers and special characters.
I ended up using CSS.escape
: https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape
console.log(CSS.escape('1'));
First, this is the failing case:
const theId = "1";
document.querySelector(`#${theId}`);
const el = document.querySelector(`#${theId}`);
el.innerHTML = "After";
<div id="1">Before</div>
And now using CSS.escape
:
const theId = "1";
const el = document.querySelector(`#${CSS.escape(theId)}`);
el.innerHTML = "After";
<div id="1">Before</div>
See how it correctly changes to show After
, demonstrating the selector worked!
add a comment |
I needed an approach which was automated. A recent change meant the id values used were no longer simple alphabetic characters and included numbers and special characters.
I ended up using CSS.escape
: https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape
console.log(CSS.escape('1'));
First, this is the failing case:
const theId = "1";
document.querySelector(`#${theId}`);
const el = document.querySelector(`#${theId}`);
el.innerHTML = "After";
<div id="1">Before</div>
And now using CSS.escape
:
const theId = "1";
const el = document.querySelector(`#${CSS.escape(theId)}`);
el.innerHTML = "After";
<div id="1">Before</div>
See how it correctly changes to show After
, demonstrating the selector worked!
I needed an approach which was automated. A recent change meant the id values used were no longer simple alphabetic characters and included numbers and special characters.
I ended up using CSS.escape
: https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape
console.log(CSS.escape('1'));
First, this is the failing case:
const theId = "1";
document.querySelector(`#${theId}`);
const el = document.querySelector(`#${theId}`);
el.innerHTML = "After";
<div id="1">Before</div>
And now using CSS.escape
:
const theId = "1";
const el = document.querySelector(`#${CSS.escape(theId)}`);
el.innerHTML = "After";
<div id="1">Before</div>
See how it correctly changes to show After
, demonstrating the selector worked!
console.log(CSS.escape('1'));
console.log(CSS.escape('1'));
const theId = "1";
document.querySelector(`#${theId}`);
const el = document.querySelector(`#${theId}`);
el.innerHTML = "After";
<div id="1">Before</div>
const theId = "1";
document.querySelector(`#${theId}`);
const el = document.querySelector(`#${theId}`);
el.innerHTML = "After";
<div id="1">Before</div>
const theId = "1";
const el = document.querySelector(`#${CSS.escape(theId)}`);
el.innerHTML = "After";
<div id="1">Before</div>
const theId = "1";
const el = document.querySelector(`#${CSS.escape(theId)}`);
el.innerHTML = "After";
<div id="1">Before</div>
answered Nov 22 '18 at 3:56
Glavin001Glavin001
366422
366422
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f20306204%2fusing-queryselector-with-ids-that-are-numbers%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
I don't think the HTML5 spec says they are valid. I'll double check...
– beautifulcoder
Nov 30 '13 at 22:08
3
@beautifulcoder They are valid
– lifetimes
Nov 30 '13 at 22:08
1
Nevermind, according to validator.w3.org/check it is valid to use numbers. Maybe modern browsers haven't quite implemented the standard?
– beautifulcoder
Nov 30 '13 at 22:15