how to use queryselector with id

/*Do this for classes*/
document.querySelector(".example"); 
/*Do this for IDs*/
document.querySelector("#example");
/*This selects all of the elements in those groups*/

 document.querySelector("#demo").innerHTML = "Hello World!";

 

<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
  console.log('#foo\bar');               // "#fooar" (\b is the backspace control character)
  document.querySelector('#foo\bar');    // Does not match anything

  console.log('#foo\\bar');              // "#foo\bar"
  console.log('#foo\\\\bar');            // "#foo\\bar"
  document.querySelector('#foo\\\\bar'); // Match the first div

  document.querySelector('#foo:bar');    // Does not match anything
  document.querySelector('#foo\\:bar');  // Match the second div
</script>