//Its very useful to be able to access HTML elements and CSS styling in JavaScript, so that, for example, we can program JavaScript to make changes to things like text and appearance based on conditional statements. In this section, we will learn how to access HTML and CSS in JavaScript, store elements in variables.

////////////1.1 document.querySelector()

//When we access HTML or CSS in JavaScript, we always start with the document object. We will learn two different methods that can be used to access HTML elements. The first one is querySelector(). 

//document.querySelector() can be used to access an element with no class or id, an element with an id, or the FIRST element of a specified class. 

//If we want to access an element with an id, we use document.querySelector() and in the parentheses, we put a hash sign and the name of the id, all in quotes. We could access the first paragraph in our HTML like this:

//document.querySelector("#para1")

//If we want to change something about it, one of the easiest things to change is the text itself, and we change that with the property innerHTML, which we can set equal to a new text, like this:

//document.querySelector("#para1").innerHTML = "hello!";

//If I uncomment this code, it will change the text in the first paragraph!

///////////Practice////////////////

//1. In HTML, create two paragraphs, and give them both an id. No need to put any text. 
//2. In JavaScript, access both paragraphs using document.querySelector(). Set the innerHTML of the first one equal to your name (as a string!). Set the second one to your favorite sport. 

/////////////////////////////////

//If we want to access the first element of a class, we use the same procedure, but instead of using #, we use a period, to tell JavaScript that we are accessing a class, not an id. 

//This is how we would access the first header, which has a class of "headers", and change its text: 

//document.querySelector(".headers").innerHTML = "New Header Text";

//This would not affect the text of the other headers. 

//To change the innerHTML of every element in the class, we would have to use the method querySelectorAll() in combination with a for loop, which we will learn later on. 

///////////document.getElementById()//////////

//The second method we will learn is document.getElementById(), which is used only to access an element by its id name. 

//For this method, we DO NOT use the hash sign (#), because JavaScript already knows that it is looking for an id. So if we want to change the text of the second header, using its id, we can do so like this: 

//document.getElementById("header2").innerHTML = "New Text for the Second Header!";

//We can store elements in a variable, which allows use to use them in many different ways, for example: 

//let header2 = document.getElementById("header2");

//Now that we have stored this in a variable, we can apply innerHTML to our variable, instead of typing out all of the code, like this: 

//header2.innerHTML = "This is so easy!"

//No we can use the header2 variable storing our element in as many ways as we want!

//////////////Practice////////////////

//1. Create a paragraph in HTML and give it an id. 
//2. In JavaScript, store your paragraph in a variable. 
//3. Set the innerHTML to some random text using your variable. 

///////////Accessing CSS in JavaScript

//In order to change CSS styling in JavaScript, we first need to access the HTML element that we want to style, and we do that in the ways we've just learned. Then, we add the style property, which specifies that we're accessing CSS, and then whatever specific CSS property we want to change, for example color. So, if we want to change the color of the text in our first paragraph, we could do it like this:

//document.getElementById("para1").style.color = "green"

//Notice that in CSS, we put the name of the color without quotes, but in JavaScript, we need to use quotes to make the color a string. 

//We can also use variables which store elements, which is very useful, so we could change the style of our already specified header2 variable like this: 

//header2.style.color = "orange"

//In CSS, we use dashes inbetween words for different properties, for example background-color, or font-size. JavaScript does not recognize dashes in properties, so in JavaScript, we use camelCase, so backgroundColor or fontSize. 

//So if we wanted to change the background color of the body, we would do it like this:

//document.querySelector("body").style.backgroundColor = "violet"

//1.3 document.getElementsByTagName()

// The getElementsByTagName() method returns a collection of all elements with a specified tag name.
// This method returns an HTML collection, which is an array-like collection (list) of HTML elements.

//Let's look at an example:

let myTags = document.getElementsByTagName("p");
console.log(myTags);

//We can see that we get a list of the different paragraph elements in our document. 

//We can now access each element by using square brackets, similar to accessing elements of an array, so if we want to change the text in the first paragraph element, we could uncomment the following code:

//myTags[0].innerHTML = "This is the first paragraph";

//Or to change the text in the second paragraph, uncomment the following code:

//myTags[1].innerHTML = "This is the second paragraph";


////////////////////////////////Exercises/////////////////////////////////////

//1. In HTML, create two headers and two paragraphs. Give them all their own id. 
//2. In JavaScript, store each of your elements in a variable. 
//3. Using innerHTML, set some text for each element. 
//4. Using style.color, set a text color for each element. 
//5. Access the body of the webpage in JavaScript, and set the background color. 

////////////Extra Exercises:
//1. Create a function that changes the text of a header when the header is clicked on!
//First, make a header in HTML and give it an id and an onclick. Give it some text. 
//Next, make a function in JavaScript with the same name as the onclick. Iside the function, store your header as a variable (using document.getElementbyId()) and set the innerHTML to something new. 
//Now, click on your header! The text should change!