{"id":41009,"date":"2023-11-06T21:20:09","date_gmt":"2023-11-07T02:20:09","guid":{"rendered":"https:\/\/mjtsai.com\/blog\/?p=41009"},"modified":"2023-11-22T12:13:30","modified_gmt":"2023-11-22T17:13:30","slug":"mastering-dom-manipulation-with-vanilla-javascript","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2023\/11\/06\/mastering-dom-manipulation-with-vanilla-javascript\/","title":{"rendered":"Mastering DOM Manipulation With Vanilla JavaScript"},"content":{"rendered":"<p><a href=\"https:\/\/phuoc.ng\/collection\/html-dom\/\">Phuoc Nguyen<\/a> (via <a href=\"https:\/\/news.ycombinator.com\/item?id=38162435\">Hacker News<\/a>):<\/p>\n<blockquote cite=\"https:\/\/phuoc.ng\/collection\/html-dom\/\"><p>Web development moves at lightning speed. I still remember when I first started using libraries like <a href=\"https:\/\/jquery.com\">jQuery<\/a>, <a href=\"http:\/\/prototypejs.org\">Prototype<\/a>, <a href=\"https:\/\/script.aculo.us\">script.aculo.us<\/a>,\n<a href=\"https:\/\/zeptojs.com\">Zepto<\/a>, and many more. Even with modern tools like <a href=\"https:\/\/angular.io\">Angular<\/a>, <a href=\"https:\/\/vuejs.org\">VueJS<\/a>, <a href=\"https:\/\/react.dev\">React<\/a>, <a href=\"https:\/\/www.solidjs.com\">Solid<\/a> and <a href=\"https:\/\/svelte.dev\">Svelte<\/a>,\nwe still have to deal with the Document Object Model (DOM). While these frameworks encapsulate and hide direct DOM management, they still give us access to work with the DOM via <em>refs<\/em> and <em>event handlers<\/em>.<\/p><p>Whether you&rsquo;re developing or using a web component in any framework, you need to work with the DOM at a certain level. [&#8230;]<\/p><p>That&rsquo;s why I&rsquo;ve put together this collection of resources:<\/p><ul><li>No external libraries, just native browser APIs<\/li><li>Small, easy-to-understand examples<\/li><li>Live demos<\/li><li>Tips and best practices included<\/li><li>Real-life use cases<\/li><li>Works with modern browsers and <del>even supports Internet Explorer<\/del><\/li><\/ul><\/blockquote>\n\n<p id=\"mastering-dom-manipulation-with-vanilla-javascript-update-2023-11-22\">Update (2023-11-22): See also: <a href=\"https:\/\/tobiasahlin.com\/blog\/move-from-jquery-to-vanilla-javascript\/\">Cheat sheet for moving from jQuery to vanilla JavaScript<\/a> (via <a href=\"https:\/\/twitter.com\/DanielDriving\/status\/1721803305683169554\">Daniel<\/a>).<\/p>","protected":false},"excerpt":{"rendered":"<p>Phuoc Nguyen (via Hacker News): Web development moves at lightning speed. I still remember when I first started using libraries like jQuery, Prototype, script.aculo.us, Zepto, and many more. Even with modern tools like Angular, VueJS, React, Solid and Svelte, we still have to deal with the Document Object Model (DOM). While these frameworks encapsulate and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"apple_news_api_created_at":"2023-11-07T02:20:11Z","apple_news_api_id":"d083c800-e85c-431e-ab55-ccce3549ee7a","apple_news_api_modified_at":"2023-11-22T17:13:32Z","apple_news_api_revision":"AAAAAAAAAAAAAAAAAAAAAQ==","apple_news_api_share_url":"https:\/\/apple.news\/A0IPIAOhcQx6rVczONUnueg","apple_news_coverimage":0,"apple_news_coverimage_caption":"","apple_news_is_hidden":false,"apple_news_is_paid":false,"apple_news_is_preview":false,"apple_news_is_sponsored":false,"apple_news_maturity_rating":"","apple_news_metadata":"\"\"","apple_news_pullquote":"","apple_news_pullquote_position":"","apple_news_slug":"","apple_news_sections":"\"\"","apple_news_suppress_video_url":false,"apple_news_use_image_component":false,"footnotes":""},"categories":[4],"tags":[339,346,71,96],"class_list":["post-41009","post","type-post","status-publish","format-standard","hentry","category-programming-category","tag-html","tag-javascript","tag-programming","tag-web"],"apple_news_notices":[],"_links":{"self":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/41009","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/comments?post=41009"}],"version-history":[{"count":3,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/41009\/revisions"}],"predecessor-version":[{"id":41172,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/41009\/revisions\/41172"}],"wp:attachment":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/media?parent=41009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/categories?post=41009"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/tags?post=41009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}