DOM Manipulation

Introduction

DOM Manipulation takes HTML and JavaScript to the next level, by adding another level of depth to the interaction between the two languages. DOM Manipulation stands for Document Object Model, and it lets JavaScript edit the HTML page real time, without the user having to change any of the source code. It can commonly be seen in places like online carts, monetary values like stock market stock values, and so much more!

DOM Selectors

To be able to grab and change different parts of the document, DOM has a series of we call "Selectors". The selectors can be seen and used as follows:

Selectors

• getElementsByTagName: This selects all elements giving they have the inputted tag such as h1 or p.
• getElementsByClassName: This selects all elements giving they have the inputted class which can be anything as long as its predefined by the developer.
• getElementById:This selects all elements giving they have the inputted ID which can be anything as long as its predefined by the developer.
• querySelector: This gets the first element found by using the criteria from any of the 3 selectors above.
• querySelectorAll: This gets all elements found by using the criteria from any of the 3 selectors above the previous term.
• getAttribute: This can be used to replace the first 3 selectors, and it used with the syntax name.getAtrribute("type");
• setAttribute: This is partnered with the getAttribute() selector and usually takes the element received by the getAttribute() and sets it to another value.

Style Changers

• style.{property}: This is partnered with a selector and it changed a specific style or styles of the received element.
• classList.add: This adds a class to the selected element.
• classList.remove: This removes a class to the selected element.
• classList.toggle: This toggles a class to the selected element.

Value Changers

• innerHTML: This edits the HTML text inside of an element or its inner tags such as p or span.

Relation Selectors

• parentElement: This gets the parent of a selected element.
• children: This gets the children of a selected element.

Event Listeners

Another cool thing that can be done with DOM Manipulation. Event Listeners perform action based on the movement of a mouse or other actions. Simple things like mouseEntry,mouseExit`, 'Click', and 'mouseHover' can initiate the beginning of many many actions. A good amount of actions can be see in this list.

Examples

The code above was used in a recent project I am working on fro my class. For those who might just be starting out to DOM Manipulation let's break it down.

The goal of this function was to update the subtotals for each item in a cart we were making. Using product, a class each item is under, we are going to take different elements and edit them per item.

In the variable "price" that we create, we use query selector to find the first element with a class of price on it, seen as the .price within the parenthesis. We are editing the text of a span that reveals our price, so within the parenthesis we are saying we want to edit the span of the first tag that has a class of price on it. Using .innerText is the method we use to edit this text.

In the variable "quanitity", you may see a few differences, but for the most part it is laid out the same as the price variable. instead of span we use input, and this is because we are using an input field rather than just text inside of a span. As well as the change in parenthesis, we are using .value on the end of our variable definition because we want the value of the input that the user has input, since there is no actual text we cannot use .innertext.

In the variable "taxable", you many differences compared to the previous two variables. This because it is an in-line boolean definition instead of a physical element we can see. this is why we use the .dataset before the .tax. We are checking the value of this in-line code rather than pre-defined, text.

the if statement under the variable definitions is much simpler to understand than our variable definitions. After the function has checked whether an item is taxable using our .dataset.tax, it adds thew appropriate amount of tax to each item that is taxable, which in my home state is 7%.

Below the if statement we see the true simpler use of the .innerText method. We can create direct definitions of the defined text. In this example we are taking the price and quantity of the specific product and updating the subtotal for specifically that product, rather than all of them. The reason that a Number() function is used. Price is defined, however it is initially defined as a string, or a series of characters forming text. By running a string through a Number() function we remove all text from a string and return a numerical value, which in our case would give us the numerical value of our price. Although the input value can be received as a number, i ran the Number() function as a precaution, so that our math is guaranteed to come out as a numerical value instead of a NaN, which is short for Not a Number.

Conclusion

In conclusion, we have learned that DOM Manipulation as an innovate and easy way to add more interaction to your web page between your HTML and JavaScript. Users can interact with the web page without even seeing or touching the source code, through a series of autonomously ran regular and relation selectors, style changers, and event listeners. We also went through an example of DOM Manipulation, and analyzed both why and how each bit of code works.

Sources

Events: https://developer.mozilla.org/en-US/docs/Web/Events
Information: Udemy "The Complete Web Developer 2021: Zero To Mastery" course by Andrei Neagoie
My Class Teacher: Matthew Larrubia