document.queryselector in jquery code example

Example 1: jquery from object to queryselector

$( "#foo" )[ 0 ]; // Equivalent to document.getElementById( "foo" ) or document.querySelector('#foo')

$( "#foo" ).get( 0 ); // Identical to above, only slower.

Example 2: queryselector for jquery

var x = $(".yourclass")[0];
console.log('jq' + x);
var y = document.querySelector(".yourclass");
console.log('js' + y);

Example 3: js queryselector

const content = document.querySelector('.content');

const towns = ['Helsinki', 'Espoo', 'Vantaa'];

towns.forEach(city => {
    content.innerHTML += `<p>${city}</p>`;
});

Example 4: query selector js

element = document.querySelector(sélecteurs);

Example 5: js queryselector

const para = document.querySelectorAll('p');

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>