There are no beautiful surfaces without a terrible depth.
-Friedrich Nietzsche
Introduction
The HTML Document Object Model(DOM) is t...
For further actions, you may consider blocking this person and/or reporting abuse
Always good to demonstrate some of the basics. Another good one is HTMLElement.dataset, which allows you to access/set
data-*
attributes. Looking forward to your next post Deji!Thanks Nick, I appreciate your response. The foundation is very important. I wasn't aware about HTMLElement.dataset, i'll take a good look at it.
Deji, I just wanted to give a shout out to you and thank you for writing this post.
I came across it by chance, after reading through @fossheim's article on how she recreated a Polaroid camera with CSS (also amazing) and saw the link to your post in the footer. Your post had exactly the answer I was looking for, for my project, which was #4, so thank you!
Just a quick hint. Every DOM ID is available as a global variable out of the box.
Don't use that in actual code obviously. Just for show-casing/fiddling.
Yes, but only as long as no script overwrites the global reference.
That comment is so ridiculous, you can even post it as a general reply to any JS code-including article.
What's the point?
The point here is that you probably shouldn't rely on global variables and better use the DOM methods. It is also much more probable that your IDs are overwritten by another script accidentially than DOM methods.
That's absolutely true! Never use that for actual productive code.
Just a quick tip for fiddling purposes.
Edit: Added this to my initial comment
I have recently discovered the Element.getBoundingClientRect() , the method give the left, top, right, bottom, x, y, width, and height of DOM element :
`
pretty neat ! isn't it ?
Yes it is and good find too.
Great article! Just curious, do you have any thoughts on using plain old javascript for DOM manipulation over something like jQuery?
I've always preferred jQuery as it offers browser compatibility, simplified operations, and lots of cool features. But I have met developers who prefer to do it the "old fashion way".
Thanks a lot Kobe. When it comes to DOM manipulation, I prefer using old javascript. However, it all depends on the size of the application.
If it's an application that has the potential to scale over time, then I would want to use a framework like Angular 6 or jQuery just like you've said, so as to avoid some complications over time.
The "old fashion way" could lead to a world complexity in terms of code-maintenance in the long run.
Ahaha - that Nietzsche quote - the DOM as a Dionysian abyss. That gave me a laugh.
Just a quick one on language - in the title it should be 'Aid' not 'Aids'.
Glad you enjoyed it. And yes, I've changed the title. Thanks for pointing that out.
the slug is still the old title with
s
Nice summary. I'm only missing
.insertBefore(newChild, referenceElement)
and the child-/sibling-/parentNode reference properties in this list.Maybe I'll add that in part 2.
Thanks Deji. A couple of things became clearer to me after reading this. Saved to be read again and again :)
Glad to know It was of help to you.
How come there's no place for insertAdjacentHTML() in this article?
Because it is a security problem, very much like
.innerHTML
, when you use it to add arbitrary HTML.This is awesome, thanks for sharing 😊
Great post Deji, a lot of great tips in here! Keep up the awesome work.
Thanks very much Kyle. I really appreciate your feedback.