document.queryselector in javascript code example

Example 1: queryselector

var el = document.querySelector(".myclass");

Example 2: js queryselector names

// This selects the first element with that name
document.querySelector('[name="your-selector-name-here"]');

Example 3: queryselector javascript

var element = document.querySelector("#myid .myclass p");

Example 4: queryselector function in javascript

/*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.

Example 5: dom queryselector

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

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

Example 6: document.queryselector

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