gelilaa / dom-manipulation Goto Github PK

examples and exercises to practice creating and manipulating dom elements.

in each exercise or example, there is a target div and a replication div. the goal is to write a small JS script that makes the replication look like the target.

be very aware of the difference between source HTML code and the live DOM! In each example what you see in the inspector does not match what you saw in the source HTML. This is because the HTML describes the initial DOM, but that DOM will change after your script is executed! to revisit the source HTML you can type ctr-u and the source code will open in a new tab.

Examples: creating DOM elements

• h1
• a
• details, summary
• ul: manual
• ul: loop
• ul: forEach
• ul: map, reduce

Examples: modifying elements

• remove a child
• ul to ol
• update ul: manual
• update ul: loop
• update ul: forEach
• nested children 1
• nested children 2
• clone a node

Exercises:

1. change text
2. change link
3. update list
4. add a link
5. add a header
6. fix the list
7. start from nothing

Some helpful resources

• super highly recommended tutorial
• sort of like JS Tutor, for the DOM
• Inspecting the DOM
• more from HYF Amsterdam
• javascript.info (.1 & .2 are enough for now)
• DOM Crash-Course Tutorial