Why are front-end JS dev's so afraid of the DOM? It's not like she's got a whip!
Jokes aside, I'm not sure "afraid" is entirely right; though it does reek of that same paranoid fear of objects we see with long-time PHP developers who still refuse to use PDO or choose the pointless mysqli_ function wrappers. Perhaps just outright ignorance is more appropriate? I'm really asking because with a certain client I just dealt with a major XSS hole that was screwing them entirely because they were using jQuery's html() to slop markup -- including user defined values -- into the page.
As such whilst this is a legitimate question on my part, there's a good deal of venting thrown in.
Either way, I see very few developers out there who ACTUALLY use the DOM. When people talk about things like jQuery providing DOM manipulation tools I genuinely have ZERO HUFFING CLUE what they're talking about! Using a bloated wrapper for Element.queryAll to grab nodes or nodelists and then screwing around using (the outdated outmoded possibly insecure) innerHTML methodology to slop stuff into the page is NOT working with the DOM, and it sure as shine-ola isn't good practice. Same goes for the idiocy that is React when used client-side you see the same half-witted methodology only further pissing on the page by using string processed templates and exchanging full markup from server-side for AJAX style operations -- either passing more data over the connection than needed or making the client-side scripting five times larger and ten times slower than necessary.
... and it's not like jQuery doesn't provide append(), prepend(), before(), after() -- even text() -- but it seems like nobody ever uses them and instead insists on writing markup as strings and shoving them in with html() regardless of the middle finger to performance, battery life, or security!
What is it about document.createElement, Document.createTextNode , and walking the DOM that people find so intimidating? Is it "wah wah, eyes dun wants two haz two typez alls tat oot" laziness? Just plain ignorance?
Going directly to the DOM avoids so many headaches, is faster and uses less memory since it bypasses the parser, and is inherently more secure since if you are plugging in user data with createTextNode it is impossible to create a XSS exploit... so why don't people do that and instead insist on screwing around making massive nodelists for EVERYTHING, slop content in with innerHTML (or innerHTML-style 'markup in the scripting').
It's even more confusing when that approach just means shoving as much if not more data around than a bloody page-load would have if their markup wasn't bloated crap. I mean I know a lot of people have bought into the "pageloads are evil" LIE brought about by using 60-100k of markup to do 8-16k's job, 256-512k of CSS to do 12-32k of CSS' job, and the mind-numbingly idiotic megabytes of scripting where 90% of it likely doesn't even belong on a website in the first damned place and the rest has no business breaking 64k before minification... but really folks what the blazes is going on?!? Blind copypasta from bad books or worse online tutorials? "Wah wah, I dunz wanna learns?" Is there some mental block involved in how/what the DOM is much less how to use it PROPERLY?
I mean I know most people dive for jQuery or React (or vue or any of these other halfwitted frameworks) before they know enough about HTML/CSS or even JavaScript to have any clue what utter shit those systems are, but whiskey tango foxtrot people?!? Walking the DOM instead of nodelists isn't rocket science and is just so much faster in most usage scenarios than trying to treat a nodelist like an array.
... and remember, in Soviet Russia, the DOM walks you.