JavaScript DOM

 DOM is a document object model, which is simply a structure of any website. The Google website has an input var and some elements at the end. 

When the browser reads the html it creates the tree which is a document which has all the html nodes, with head, the body and everything else underneath it. There's going to be a title underneath a tag with "my title".  DOM allows javascript to modify the view, and that's why it's so important. All these elements have attributes and Javascript can access those attributes, access links/text and get stuff for it. Let's look for the guess number game, and inspeacting element has a nice HTML tree but viewing page source looks like the HTML of webpage. But you can see from inspect element that the browser is actually creating a DOM structure. Think of it as a tree that creates the structure for this website. Now, we want to look at the properties and events of the element. Let's look at a button. 

However, it also has events. We can modify this and really react to things on the view. Let's look at an example. 

Doing console.dir(document.getElementById('number-submit') and it shows up all the properties and events available to a certain element. 

We have a lot of functions representing a specific element. We can use these events to modify and do anything we want with these specific elements looking up class, id, inc. These events allow us to do a lot of things with the view. 

Now, we want to talk about: "How do we access the DOM?". We have something called children and children will contain a list of children elements. There are elements and at the end of the DOM (text text text text text) is a node. 

We can use all of the attributes and all of the access functions available. 

Doing inspect element there are children of body which are divs and nav. We can also do document.body and do that. Or we can console.log(document.body.children). We can do console.log(document.body.children[1]) and it gets the first level of the children. 

For example, the buttons here are h1, div, div, button. 

Those are children, and that's how you can walk the DOM from the top level down. There are also child nodes, and you can do console.log(document.body.childNode) will just not have the 2 elements but text. Let's get the child notes and print out the inner text of the child node.

We can accessthe object through innerHTML.

function domEvents() {

    for(let i = 0; i < document.body.children.length; i++) {

        alert(document.body.children[i].innerHTML);

    }

}

We also get inner text or all of the text within a few elements.

We can get first child, or second child or something. The first child returns [object test] and first child is related to child nodes, since this will get to empty text or empty string. We can alert the firstelement.innerhtml which will be the following: 

alert(document.body.firstElementChild.innerHTML);

If you want to do the last child we get everything in the main tag. 

We can get element by id to by putting

document.getElementById("insert-id-string-here");

We can also get css from a specific class. How do we get the class? 

Then we do document.querySelectorAll('.form-group') and now we have a nodelist and we can get all the CSS that way with everything.

Now if we use get element by tag name, the tage name with div h1 and stuff, with the name of a specific element like button we can do document.getElementsbyTagName('button').

We can also do document.getElementsbyClassName('button') etc. 

.append() add nodes to the end of a node. .prepend() is adding nodes to the beginning of a node. .innerHTML changes the HTML of a node and .innerText changes the text of a node. .className sets clasname of the node and .classList sets classes as a list of the node ).add() .remove() .toggle() .contains().

Here's an append, and you get 0th index since this is a collection.

document.getElementsByClassName('list-group')[0].append('<li class="list-group-item">You guessed 8</li>');

We can also do a document element as well and try that. 

liElem.innerText = "You Guessed 8";

in comparison you can set the class name for item

liElem.className = "list-group-item" and now we hive li element now.

So here's the text:

let liElem = document.createElement('LI')

liElem.innerText = "You Guessed 8";

liElem.className = 'list-group-item';

liElem etc. 

So then you do

 document.getElementsByClassName.append(liElem);

Prepend is adding beforehand.

 document.getElementsByClassName.prepend(liElem);

document.getElementsByClassName('list-group')[0].children

We can also set the inner html and set inner html as follows: 

document.getElementsByClassName('list-group')[0].children.innerHTML = '<b>12</b>';

We can do document.getElementsByClassName('alert')[0].className; which gets the class name. To modify this we just do document.getElementsByClassName('alert')[0].className = alert;.

Let's look into the class list which adds some more functionality to the class name, since now we got some list of classes with alert and alert warning and stuff. Let's say we want to add another class, and .add('fancy-class') or something like that so we will add fancyclass inside the alert with the subclass. We can also perform a remove() a fancy class.  

Now we can also do a documentand toggle the class list with an alert warning, and then we get see wheter we have the alert warning class. If it's there it removes it, if it's now we add it. These constitute the majority of the functions that we are going to be using.  

The last thing to touch on is the BOM or the browser object model which allows us to access and manipulate the browser window, and it is a parent, helping hold everything together. BOM is related to the browser, and you have certain functionalities that the browser gives you that you can use for your own good. 

The main window object has the document, history, and so many other things to not get confused by. BOM contains the DOM. window.location contains the current location that your wbsite is open in including the location the website it is open in and href, the pathname, and everything. What you can do with that is to reload, replace, and so forth. Doing window.location.reload() will reload the whole page. window.location.href = "https://www.google.com" will change the site to Google. We can also do window.localStorage and don't worry so much about what it does, you know so much when you log in and a lot of user information will be stored in window.localStorage. 

Then we can do window.scrollY and if we scroll down we can see how much we have scrolled a website. 

Now let's appply things to a project called a text editor and we want to type in the text and copy the text and add it and remove it as well as format it, which you can make it bold, italic, etc. It's a lot of functionality packed into the project. 

Now we will go to VsCode and copy the path and enter the path, and the exercise link doesn't really have any functionality. We have html and buttons galore as well as a text area with a unique id and the text output which is a gray box, which is the most important part to focus on. The style is going to use classes to style the formatted text and the script.js is the engine. 

Here's the html:

<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width-device-width"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src = "https://kit.fontawesome.com/c939d0e917.js" crossorigin="anonymous"></script> <title>repl.it</title> <link href = "script.css" rel = "stylesheet" type = "text/css" /> </head> <body class = "text-center container"> <main> <h1 class = "banner p-3 text-primary">TextEditor</h1> <div class = "row"> <div class = "col"> <button id="bold" type="button"  class="btn btn-light">Bold</button> <button id="italic" type="button"  class="btn btn-light">Italic</button> <button id="underline" type="button"  class="btn btn-light">Underline</button> <button id="left-align" type="button"  class="align btn btn-light"><i class="fas fa-align-left"></i></button> <button id="center-align" type="button"  class="align btn btn-light"><i class="fas fa-align-center"></i></button> <button id="right-align" type="button"  class="align btn btn-light"><i class="fas fa-align-right"></i></button> </div> </div> <hr/> <div class = "row editor"> <div class = "col"> <div class = "form-group"> <label for = "text-input">Your Document Text</label> <textarea class="form-control" id="text-input" rows="3"></textarea> </div> </div> <div class = "col"> <label for="text-input">Formatted Text</label> <div id="text-output" class="bg-light"> </div> </div> </div> </main> <script src="script.js"></script> </body> </html>

The css:

#text-output {

min-height: 200px;

border-radius: 3px;

padding: 10px;

word-wrap: break-word;

text-align: left;

}

#text-input {

min-height: 200px;

}

.editor .col {

max-width: 50%;

flex-basis: 50%;

}

.bold {

font-weight: bold;

}

.italic {

font-style: italic;

}

.underline {

text-decoration: underline;

}

The Javascript: 

function updateText(){

// CODE GOES HERE

}

function makeBold(elem){

//CODE GOES HERE

}

function makeItalic(elem){

}

function makeUnderline(elem){

//CODE GOES HERE

}

function alignText(elem, alignType){

// CODE GOES HERE

}

Ok, let's get started. 

let text = document.getElementById('text-input').value; 

document.getElementById('text-output').innerText = text;

This line is to set the output text to the input text. You have to untoggle the active state because only one of these can be active at a time. But we gotta toggle active first. We can use the style property to change the style of a specific text. 

Now we can set the element Id text output to the align type: 

document.getElementById('text-output').style.textAlign = alignType; 

All it's doing is that it's adding a style to a text. 

However, there's a problem. We want to make the rest of them inactive within a split second. 

We do this by changing the buttons. Every single button has the same press 'align align align' and we want to be able to get all of them in one take, and this allows us to get all of the elements by looping through them. 

Now sometimes it can be hard figuring out what functions to use, so let's try to come up with a solution that gives which of the 3 functions would be most useful to utilize, etc. Let's look into the problem that we currently have. The reason why text goes behing nwow is that we have a javascript event called updateText() which updaate text on the formatted.

Why does it not work? When we press a keyboard, there's 3 events.

OnKeyDown, OnKeyPressed,OnKeyUp.  Onkeypress() is pretty much the same as OnKeyDown(). 

OnKeyUp() is when we release the key. After onKeyUp() gets fired a function can get fired, but the value hasn't been saved. So we should create another fork of the text editor.  and we should have key down, key press, and key up. 

So once we press g, key down gets fired first, but with no text value because it hasn't been saved, then key press gets fired and doesn't get saved then key up gets fired, and now the text value is g, and that's when the value was saved. The value was saved on key up so this is where we can update the text. 

That's not the best solution because paste does not happen. The best way to do it is to use something called OnInput() tracks for any changes that happens in the input or text area.