DOMs

Interacting with the Browser

Interacting with the browser is the best part of JavaScript (in my opinion)
In this section we can learn how to change CSS styles or react to the user clicking and also make annoying popups show up

The DOM Explained

DOM is Document Object Model
it adds changes and removes information from websites
DOM makes it so there is an object "Document" which is everything that shows up in HTML that can be used in JavaScript
If you open the document object in JavaScript you will see a copy of the entire website planted into JavaScript. This is how it's able to change things within HTML, by making a copy of the website and communicating with it

The Query Selector

The query selector is made to reach into the DOM and find the element that you want to get the handle or tag of
you would usually edit the handle/tag but for this section im going to focus on just getting the handle

First lets make out HTML website to see what we want to reach into

<div>
<p>Hello world</p>
<p>lorem ipsum</p>
<p class = "error">this is an error message</p>
</div>
<div class = "error">this is an error</div>

first lets grab the sentence that says "hello world"

const para = document.querySelector('p')
console.log(para)

the query select command says that within the document it should find p
and with this it will find the first p that shows up and show that. but what if we don't want to just the first p what if we want to grab the p with the class of error

const para = document.querysSelector(.error)
console.log(para)

this here will show the first thing that shows the class error
the period before the error makes it so that it knows its a class
but now I want the div tag with the class of error

const para = document.querysSelector(div.error)
console.log(para)

the div before .error will tell it to look for a div and then tell it that it must have the class of error

Adding & Changing Page Content

now lets say I want to change the text or HTML inside elements
so first lets get out HTML

<div>
<p>Hello world</p>
<p>lorem ipsum</p>
<p class = "error">this is an error message</p>
</div>
<div class = "error">this is an error</div>
<div class = "content">
<p>This is content</p>
</div>

so now that we know what we are taking from see how we change it
im going to be changing the first p tag in my html

const para = document.querySelector('p')
para.innerText = "Hows your day been?"

the .innerText is showsing the inner text of the p so if we type out

const para = document.querySelector('p')
console.log(para.innerText)

it will just show the text within p

changing the HTML is almost the same

const para = document.querySelector('p')
para.innerHTML = <p> this is changed now</p>

Getting & Setting Attributes

before I explain how to get and set attributes im going to show some HTML

<h1>The DOM</h1>

<a href= "google.com">link to a website</a>

<p class = "error"> This is an error message</p>

so this is our html but lets say I want to change the link
so lets change it

const link = document.querySelector('a');

console.log(link.getAttribute('href'));
link.setAttribute('href', 'https://www.youtube.com');

next I'm going to show you how to show a specific attribute so we can change it from there

const mssg = document.querySelector('p');

console.log(getAttribute('class'))

now that we have the class its time to change it

msg.setAttribute("class", "success");

and like that it went from an error to a success

Changing CSS Styles

For changing CSS styles we need some new HTML

<h1 style = "color: orange">The Title</h1>

now we have some simple HTML and now we want to change the color of The Title to blue through our JavaScript
lets see how

const title = document.querySelector('h1');
title.setAttribute('style', 'color: blue')

note you can put any CSS in that section but it will replace anything written beforehand
but another important thing is that we can go even deeper into specifics

const title = document.querySelector('h1');
title.style.color = 'blue'

and so this will only change the color and nothing else
also it can work with any style attribute not just color

Event Basics (click events)

Now we are going to see how we can make JavaScript events go off from clicking
the HTML wont be shown for this section because of the length of it but I will explain the events happening

const bttn = document.querySelector('button');

button.addEventListener('click', () => {
console.log('you clicked me');
});

so the object button will be listening for an event. The event being click. whenever it "hears" a click it will put in the console you clicked me
any JavaScript can be written here
this doesn't only work with buttons. anything that can be held in a variable can have a event happen with them

Creating & Removing Elements

this will be a shorter section
to put it simply using the '.remove' on something will remove it so

const bttn = document.querySelector('button');

bttn.addEventListener('click', () => {
bttn.remove();
});

would make it so that when you push the button the button would disappear
and for adding we can use the '.innerHTML' command to make it so that another element is added