Learn DOM Manipulation In 18 Minutes


JavaScript Simplified Course: https://javascriptsimplified.com

DOM manipulation is tough. There are lots of methods and techniques you need to master and it is not obvious which methods are best for each scenario. In this video I cover the 14 most important DOM manipulation methods that you need to know.

📚 Materials/References:

DOM Traversal Methods Video: https://youtu.be/v7rSSy8CaYE
innerHTML Cross Site Scripting Video: https://youtu.be/ns1LX6mEvyM
Data Attributes Blog Article: https://blog.webdevsimplified.com/2020-10/javascript-data-attributes
classList Blog Article: https://blog.webdevsimplified.com/2020-11/class-list

🧠 Concepts Covered:

– Creating elements
– Adding elements
– Modifying data attributes
– Removing elements

🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified

⏱️ Timestamps:

00:00 – Introduction
01:01 – Adding Elements
02:58 – Creating Elements
04:04 – Modifying Element Text
07:30 – Modifying Element HTML
10:22 – Removing Elements
11:54 – Modifying Element Attributes
14:11 – Modifying Data Attributes
16:13 – Modifying Element Classes
17:40 – Modifying Element Style

#DOMManipulation #WDS #JavaScript

22 thoughts on “Learn DOM Manipulation In 18 Minutes”
  1. These are excellent videos. Thank you. I've hopped over to Patreon and expressed my appreciation in a practical way. I don't see a link to the source files. I can't even get started with the most primitive examples and those source files would be helpful.

  2. I love your videos so much, I want to be a JavaScript developer too but I don’t have the funds to pay for the “simplified JavaScript” as I’m currently unemployed for over 3 years plus. Please help me. I’d be glad even if I don’t get certified at the end of the program. Let me just learn and build projects that will make me employable.

  3. What about insertAdjacentHTML, much more useful when adding a bunch of HTML to the page and way easier to use opposed to creating every single element, adding all the attributes to them and then appending them wherever they need to go, also, the first argument allows you to specify if you want to add the HTML before the element itself, as the first/last child or after.

Leave a Reply

Your email address will not be published. Required fields are marked *