DOM Injection and Traversal
Learn how to move through the DOM and add content with the ease.
This guide is short, focused, and made for beginners. Get hands-on learning and grow your portfolio with a real project using DOM injection and traversal techniques.
What you’ll learn
- How to get, set, and replace HTML.
- How to get, set and replace text.
- How to add, copy, and remove elements from the DOM.
- How to reduce your risk of cross-site scripting (XSS) attacks.
- How to traverse up, down, and sideways in the DOM.
- How to detect when elements are in and out of the viewport.
- How to put it all together and write a working project with DOM injection and traversal.
🧠 Multiple formats for different learning styles. Available in streaming HD videos with captions, and written lessons in ebook format. Watch or read on any device.
Reinforce your learning and build your portfolio by using DOM injection and traversal techniques on a real project. Together, we’ll build an lazy loader script that loads videos into the DOM just before the enter the viewport.
BONUS: Don't go it alone! Upgrade to a bundle and get exclusive Slack access.
This is not available for sale at any price, and my students regularly tell me it's one of the most valuable things that comes with the guides.
The cheat sheet and the ability to ask questions on Slack were worth the price of the book alone.- David Buchholz
- Learn modern best practices and code patterns.
- Spend less time Googling and more time working on cool stuff.
- Follow a learning path or jump around based on your needs.
- Work on real projects and build your portfolio.
A Sample Lesson
Try it for free
Want to get a sense for what my pocket guides are like? Get a free copy of the DOM Manipulation guide in PDF format.
This isn't a sample chapter. It's the full guide. The paid version comes in more formats and includes the source code for the lessons and project.
Your 100% Money-Back Guarantee 💰
Hi, I'm Chris Ferdinandi. 👋
Ready to buy?
- The Pocket Guide (in ebook format, streaming HD video, or both)
- The Source Code & Demos
- FREE Updates for Life
Best Value: Ebook + Videos - $99
Want to save over 40% and get exclusive Slack access? Get this pocket guide as part of the Complete Set or Fundamentals Bundle.
Putting everything he's taught me into practice, I managed to rewrite the project over a weekend! He was even kind enough to personally help me on Slack with an aspect I was particularly struggling with... I SERIOUSLY recommend checking him out! 😄- Kieran Barker
Chris Ferdinandi has got your back and his learning platform is a *tremendously good value*.- Jonathan Schofield
Frequently Asked Questions
Do the pocket guides include new ES6 methods?
Yes. Where applicable, I cover new ES6 functions and browser APIs. I also include polyfills when available to push browser support as far back as possible.
What happens if I buy a pocket guide and you release an update? Do I get free updates?
Yes, you get free updates for life. You'll get an email letting you know whenever new content is available.
Do you offer any discounts?
Absolutely! There are three discount programs available:
- Student Discount. This applies to anyone in any type of schooling, including evening classes and coding bootcamps. Learn more about student discounts.
- Under-Represented Groups in Tech. I've had a lot of helping getting where I am, and I want to pay it forward. If you're a member of an under-represented group in tech, you can get special pricing. Learn more about discounts for under-represented groups in tech.
- Location-Based Pricing. I totally get that in some countries salaries and cost of living are such that the Vanilla JS Pocket Guides are unaffordable. These should show up automatically at checkout, but if they don't, send me an email at firstname.lastname@example.org, and I'll send you a discount to make it fair for where you live.
If I buy just one guide and love it, can I upgrade to a bundle? What if I buy the ebooks and decide I want the videos, too?
Absolutely. Just send me an email at email@example.com
I'll upgrade you to the bundle or format you want. You'll only have to pay the difference in price between what you purchased and the bundle or format you want.
How do I access my pocket guides and videos?
Visit and create an account with the email address you used to make your purchase.
You can download your guides at any time, and stream your video courses from any device. You can also download the videos for offline viewing.
Do I need any special tools or equipment?
All you need to work with the source code and projects is a modern web browser and a text editor (I recommend VS Code). The pocket guides come in PDF, EPUB, MOBI, and HTML formats, so you can read it on any device you own. The videos can be streamed on any device.
Are there any rules or requirements around the Slack team?
Yes. You must be at least 18 years old, and read and agree to follow the Code of Conduct.
Do you have a return policy?
Absolutely! If you’re not 100% satisfied with the pocket guide, email me at firstname.lastname@example.org and I’ll give you a full refund.
I have another question.
No problem! Send me an email at email@example.com.
Ever wanted to ditch jQuery but not sure how? This book by Chris Ferdinandi will set you on the right path.- Jeremy Green
Not ready yet? Get daily developer tips.
Hate the complexity of modern front‑end web development? I send out a short email each weekday on how to build a simpler, more resilient web. Join over 14k others.