xxxxxxxxxx
//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';
xxxxxxxxxx
// TO select all the h1 from Html
document.querySelectorAll("h1")
//To select h1 from a particular class or id
document.querySelector(".className/#id h1")
xxxxxxxxxx
// Select the first <div>
const firstDiv = document.querySelector('div');
// Select the first .button element inside .main-navigation
const navMenu = document.getElementById('main-navigation');
const firstButtonChild = navMenu.querySelector('.button');
xxxxxxxxxx
<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>
xxxxxxxxxx
// Go to html and find out what type of HTML element you want to select.
// Is it div, p, h3 or something else?
// When you know, select it with
document.querySelector();
// querySelector() accepts the name of the element as argument