dom queryselector

//Pretend there is a <p> with class "example"
const myParagraph = document.querySelector('.example');
//You can do many this with is
myParagraph.textContent = 'This is my new text';

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

/*The querySelector() method returns the first element that matches a specified 
CSS selector(s) in the document. Note: The querySelector() method only returns 
the first element that matches the specified selectors. To return all the 
matches, use the querySelectorAll() method instead.*/

// for example 

//for class
document.querySelector(".ClassName")

// for id 
document.querySelector("#ID")

// etc.

 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>

//Get the first element in the document with class="example":
document.querySelector(".example");
/*
The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.
Note: The querySelector() method only returns the first element that matches the specified selectors. To return all the matches, use the querySelectorAll() method instead.
If the selector matches an ID in document that is used several times (Note that an "id" should be unique within a page and should not be used more than once), it returns the first matching element.
*/

//example :
//https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_queryselector_class

document.querySelector(".example");

document.querySelectorAll

// TO select all the h1 from Html
document.querySelectorAll("h1")

//To select h1 from a particular class or id
document.querySelector(".className/#id h1")