Using querySelector with IDs that are numbers












66















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.










share|improve this question




















  • 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
















66















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.










share|improve this question




















  • 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














66












66








66


14






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.










share|improve this question
















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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














  • 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












3 Answers
3






active

oldest

votes


















78














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 ');





share|improve this answer


























  • 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





















53














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 ;)






share|improve this answer
























  • 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



















1














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!






share|improve this answer























    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
    });


    }
    });














    draft saved

    draft discarded


















    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









    78














    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 ');





    share|improve this answer


























    • 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


















    78














    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 ');





    share|improve this answer


























    • 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
















    78












    78








    78







    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 ');





    share|improve this answer















    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 ');






    share|improve this answer














    share|improve this answer



    share|improve this answer








    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





















    • 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















    53














    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 ;)






    share|improve this answer
























    • 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
















    53














    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 ;)






    share|improve this answer
























    • 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














    53












    53








    53







    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 ;)






    share|improve this answer













    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 ;)







    share|improve this answer












    share|improve this answer



    share|improve this answer










    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



















    • 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











    1














    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!






    share|improve this answer




























      1














      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!






      share|improve this answer


























        1












        1








        1







        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!






        share|improve this answer













        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>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 22 '18 at 3:56









        Glavin001Glavin001

        366422




        366422






























            draft saved

            draft discarded




















































            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.




            draft saved


            draft discarded














            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





















































            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







            Popular posts from this blog

            404 Error Contact Form 7 ajax form submitting

            How to know if a Active Directory user can login interactively

            Refactoring coordinates for Minecraft Pi buildings written in Python