DEV Community

Cover image for Learn to manipulate HTML DOM in JavaScript by building To Do List App
Fabala Dibbasey
Fabala Dibbasey

Posted on • Updated on

Learn to manipulate HTML DOM in JavaScript by building To Do List App

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

toDoListApp.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

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

const heading = document.createElement('h1') // <h1></h1>
Enter fullscreen mode Exit fullscreen mode

To create a text, we can use the method, createTextNode(text)

const heading_text = document.createTextNode("Hello world!");
Enter fullscreen mode Exit fullscreen mode

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

heading.appendChild(heading_text) // <h1>Hello world!</h1>
Enter fullscreen mode Exit fullscreen mode

Recall the structure of HTML

<html lang="en">
<head>
 <title>Title</title>
</head>
<body>
 <!-- Any visible contents -->
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

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

document.body.appendChild(heading)

/*<body>
  <h1>Hello world!</h1>
  </body>
*/
Enter fullscreen mode Exit fullscreen mode

h1Element.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

 <div>
  <p>Now I can create HTML element right inside JavaScript</p>
 </div>
Enter fullscreen mode Exit fullscreen mode

solution

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)
Enter fullscreen mode Exit fullscreen mode

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

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)
Enter fullscreen mode Exit fullscreen mode

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

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

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

multipleNodes.png

exercise

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

<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>
Enter fullscreen mode Exit fullscreen mode

Solution

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)

Enter fullscreen mode Exit fullscreen mode

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 and LinkedIn

Top comments (0)