Let's learn to manipulate HTML document object model (DOM) in JavaScript by building To Do List App
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.
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>
To create a text, we can use the method, createTextNode(text)
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
heading.appendChild(heading_text) // <h1>Hello world!</h1>
Recall the structure of 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
document.body.appendChild(heading)
/*<body>
<h1>Hello world!</h1>
</body>
*/
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>
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)
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)
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.
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.
Element.append() can append several nodes and strings, whereas Node.appendChild() can only append one node.
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>
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)
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
Top comments (0)