Learn to manipulate HTML DOM in JavaScript by building To Do List App
Tags: javascript, webdev, codenewbie, beginners
Published: 2021-07-28 07:03:21

## Let's learn to manipulate HTML document object model (DOM) in JavaScript by building To Do List App

![toDoListApp.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627080009579/gFD_4bgci.png)

### Goal
At the end of this project you'll have proficient capability of working with HTML element right inside JavaScript, you'll be able to add, remove, style HTML elements dynamically and be able store elements in your browser using web storage API

### Topics covered

- 
Create HTML elements inside JavaScript
- 
Selecting && Manipulating the DOM elements

- 
Template literals (plus createRange() and createContextualFragment() )

- 
DOM traversal

- 
Events (raising and handling events)

- 
ES6 syntax

- 
Array methods

- 
Web storage API (local storage, session storage and cookies)

### Prerequisite
I expect you to know basic HTML, CSS  and JavaScript
 
### DOM
What's DOM?
The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. It defines HTML elements as objects, Properties for all HTML elements, Methods for all HTML elements, and Events for all HTML elements.

![DOM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627212470527/vDW_lY1J4.png)
#### Note 
The browser model the structure after receiving HTTP response from the server!
It represents the page so that programs ( eg. JavaScript) can change the document structure, style, and content. 

We'll discuss more about the tree structure of the DOM which shows the parent child relationship of nodes **in DOM traversal section**. For now we'll need the first node of the tree (root node) called **document** to access any object in an HTML page.

### Changing document structure, style and content
We said that DOM defines Methods for all HTML elements and we can use one of it's method, createElement(specify the element) to create any specified HTML element

```javascript
const heading = document.createElement('h1') // <h1></h1>
``` 
To create a text, we can use the method, createTextNode(text)

```javascript
const heading_text = document.createTextNode("Hello world!");
``` 
Why createTextNode instead of createText as in createElement?
#### Node
Every object located within a document is a node of some kind. In an HTML document, an object can be an element node but also a text node or attribute node.

lets now append the textNode, heading_text we've created into our heading element, h1 using appendChild() method

```javascript
heading.appendChild(heading_text) // <h1>Hello world!</h1>
``` 
Recall the structure of HTML

```html
<html lang="en">
<head>
 <title>Title</title>
</head>
<body>
 <!-- Any visible contents -->
</body>
</html>
``` 
The `<body>` element defines the document's body, and is a container for all the visible contents, such as headings,
To make our heading element visible we need to append it to 
 `<body>` element 

```javascript
document.body.appendChild(heading)

/*<body>
  <h1>Hello world!</h1>
  </body>
*/
``` 

![h1Element.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627229169108/U79ax7aUA.png)

### exercise
Using createElement(), createTextNode(), and appendChild()
Make the following HTML snippet codes below and append it to body element. try it yourself before viewing my solution

```html
 <div>
  <p>Now I can create HTML element right inside JavaScript</p>
 </div>
``` 

### solution
```javascript
const div = document.createElement('div')
const paragraph = document.createElement('p')
const paragraphText = document.createTextNode(
  'Now I can create HTML element right inside javaScript'
)
paragraph.appendChild(paragraph)
document.body.appendChild(paragraph)
``` 

`Element.append()` is similar to `Node.appendChild()` but with extra power. Let me show you!
let's remake our previous solution with `Element.append()`

```javascript
const div = document.createElement('div')
const paragraph = document.createElement('p')
paragraph.append('Now I can create HTML element right inside JavaScript')
document.body.append(paragraph)
``` 
This time with fewer codes! `Element.append()` saves us from creating text node and appending it to the paragraph as in the first solution.

Ohh! thank you `Element.append()`, now I will never use `Node.appendChild()`

Smart learner, you jumped to conclusion so soon! 

`Element.append()`  has no return value, whereas `Node.appendChild()` returns the appended Node object.

![append&&appendChild.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627255835371/hIxk7a11ly.png)

Maybe this time `Node.appendChild()` won in a case where you want your appended Node object.

Another battles, `Element.append()` vs `Node.appendChild()`

`Element.append()` allows you to also append DOMString objects, whereas `Node.appendChild()` only accepts Node objects.

![node&&domString.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627257207688/jl9unMr4s.png)

`Element.append()` can append several nodes and strings, whereas `Node.appendChild()` can only append one node.

![multipleNodes.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627259156277/bfjqY9l3I.png)

### exercise
create the following elements structure inside JavaScript from what you've learned so far

```html
<body>
 <h1>I am learning DOM</h1>
 <div>
  This is so cool
  <p>with my new power i can now create html structure inside javascript, ohh how cool is that</p>
 </div>
 <div>
  <h3>this is heading three inside second div</h3>
  <p>intresting, this is second paragraph in second div</p>
 </div>
</body>
``` 

### Solution

```javascript
const heading1 = document.createElement('h1') //<h1></h1>
heading1.append('I am learning DOM') //<h1> I am learning DOM </h1>

const div1 = document.createElement('div') //<div></div>
const p1 = document.createElement('p')
p1.append(
  'with my new power i can now create html structure inside javascript, ohh how cool is that'
)
div1.append('This is so cool', p1)

const div2 = document.createElement('div')

const heading3 = document.createElement('h3') //<h3></h3>

heading3.append('this is heading three inside second div')
//<h3>this is heading three inside second div</h3>

const p2 = document.createElement('p')
p2.append('intresting, this is second paragraph in second div')

div2.append(heading3, p2)

document.body.append(heading1, div1, div2)

``` 
Ohh right, so far all what we did is to create HTML elements from JavaScript and insert it to our `<body></body>` element for visibility. What if we want to get access to a specific element from HTML, index.html file and manipulate it in JavaScript?

### Selecting && Manipulating the DOM elements
Well, We can use selectors as it's done in style sheet.

That's it for this part, I can't wait to see you in the next part, **Selecting && Manipulating the DOM elements**

I'll love us to connect on  [Twitter](https://twitter.com/DibbaseyFabala) and  [LinkedIn](https://www.linkedin.com/in/fabala-dibbasey-b69a27207/)