We can add JS to our websites using DOM. This will turn an HTML document into objects that can be selected and manipulated.
Each element and data is turned into a tree with objects that we can select, and their relations(parents, siblings, and children) are mapped out.
To incorperate JS into our page, we have several options.
Inline JS is like inline css. We add an onload attribute to our html elements.
We are required to use '' single quotes when using onload.
Difficult to use since it is not modular, and may be difficult to debug.
We are able to use a script tag. This will carry out the JS written inside of the tags.
When using a script tag, use a src="jsfilepath", and separate the JS into it's own file.
When we implement our JS, we want to implement this at the bottom of our body element. This is so that all of our elements are predefined and exist before the js tries to modify them (data is read from top to bottom). This is also beneficial as it ensures that our content is loaded for the page's viewers(illusion of a faster runtime).
The DOM model uses the document keyword.
document. -> The whole HTML File
document.firstElementChild.firstElementChild -> Will select the HTML's document's first child element, and that element's first child element (HTML -> head).
Using the DOM model means that we can select different items using this structure, and manipulate them to do something. We are even able to set variables equal to this element, which we can later manipulate (variable.innerHTML = some new value)
document.querySelector("element").click() -> Does something to some element when it is clicked.
Getters -> get some property
Setters -> sets a property using a = sign.
Methods -> car.drive(); invokes a method on our object. Methods are things that an object can do, so they are associated with objects
This will get an element by a tag name, such as an li or a ul.
Returns an array of items that has all of the elements with the tag, so to retrieve an item, you must use an index.
getElementsByTagName("tag")[index]
MDNgetElementsByClassName("class")
This will get all of the elements with the name of the class.
getElementById("id")
This will get a single item. Since all ids are unique, it will retrieve a single item.
querySelector(".class, tag, #id")
Query Selectors may be used to return single items by using combinations of selectors(elements, classes, ids) such as (.class element), or (id) or (.class .class), or (li.item).
If selectors match more than one object, the first item that matches is returned.
querySelectorAll() | MDN
This returns a list of all the items that has the selector, but we will also need to specify an index.
queryselectorall has a list of all the items that have the selector, but you will have to specify their index.All of the following may be used on a caes by case basis.
HTML -> Used for a page's content
CSS -> Used for a page's appearance
JS -> Used for a page's behavior
We want to ensure that our files are separated out in this way.
We can use a classList to make changes to our website's appearance, to help separate css appearance from the behavior. For example, if we query a button and look at its classList, we can see its classes. In this way, we can add a class or change something about this element. This way, we can create separate styles on the stylesheet that we can later add to the element.
The classList is a property of every DOM object
All CSS properties can be changed using JS.
JS does use camelcase, so the different properties's names may look different from css.
All values that we want to set must be represented by using a string. This includes numbers and colors.
textContent -> Does not return any tags that you have inside some elements. innerHTML adds tags. textContent does not.
inner HTML -> Very useful property that I have previously used. can be used to replace an element's text. REad More here
Everything inside of an HTML tag is an attribute.
You can find out which attributes are on an element by using document.querySelector("").attributes
For example, we can return the value by using document.querySelector.getAttribute("href"); we can also set attribute using setAttribute("href", value).