Super helpful! this was such a mystery to me. Though I see why direct DOM manipulation isn't exactly encouraged for beginners, this kind of operation could really use a framework to make it more maintainable and scalable!
Tip to use Array methods on dom elements from document.querySelectorAll() 1) Array.from(document.querySelectorAll(“element”)) 2) […document.querySelectorAll(“.selector”)]
Very informative. First time I noticed the difference between these DOM methods when I worked with , and nodes in a project. You have to notice that Node also is handling attributes and other DOM types. Therefore, the nodeType of a Node has these values: 1 (element), 2 (attribute), 3 (text) and more... Nine or ten in total currently.
Yup, can’t say how many times I’ve redefined the same query selector inside functions for dynamic content. Now I know I can keep just one definition in the global scope to get the updates.
you can use instanceof to see if a node is an HTML element. It makes working with nodes easier. ie. if (node instanceof HTMLElement) { node.innerText = 'this is an html element' }
Only you can demystify the most cryptic of JavaScript's intricacies in such an easily understandable manner within 9 minutes, Kyle! This was really helpful! :)
Great to reason for selecting because HTMLCollection its update automatically, When we selected sometime we don't want to update selecting further that we required.
Before I watch… my guess is that nodes refer to anything while element refers to just tag based ones. Element would exclude text nodes and such Edit: despite my poor wording, I appear to be correct. Sweeeeeeet
That was my question too, but I guess that in bigger projects you never know what sideeffects are triggered by calling some function. And let's say you are iteration through the "live updated list" with a for-loop and you are creating a const before that loop and store the list's length in there, then the iteration is faulty if some new element is added inbetween, because the for-loop won't reach the end of the array since it changed length. I guess it's not "bad practice" to use either, you just have to be knowing what you want to do, what things are happening inside your app and then decide for the best method :)
I have a request for a video. I do HTML, CSS and JS coding. For one of my projects, I require a custom scrollbar. I know how to make one, but the conventional ::-webkit scrollbars aren't as customizable as I'd like. What I'm looking for is to replace the scrollbar with a div, so that you have to drag the div to scroll, not the scrollbar thumb. Please help me, I haven't found a solution online yet.
One way would be to make the div draggable then use the ondrag event to calculate a position and scroll to it using window.scrollTo but it can be dragged both horizontally and vertically so you would have to lock it to only one.
