If you subscribe to my newsletter then you’re probably aware that in the past couple of years I’ve done a lot of research and writing on DOM-related stuff. I don’t consider myself a JavaScript expert; pretty far from it, actually. But I like the DOM. I think it’s easy to use, and it’s in greater shape today than it was five or so years ago when jQuery was pretty much the only choice for cross-browser DOM manipulation.
As a result of all this recent work (some of which I collected together in a JavaScript/DOM e-book), I was able to put together a presentation that I had the privilege of delivering at two different conferences: CSS Dev Conf 2015 in Long Beach, California in October, and FITC Toronto 2016 on April 18.
The presentation at CSS Dev Conf wasn’t recorded, but the FITC version was (without the Octopus, though!). So below you’ll find the video of my talk, the slides, and links to all the resources and features that I discuss in the presentation. I’ve also included JS Bin demo links for most of the features. Enjoy!
Introductory Section
MDN Links for DOM Features
- insertAdjacentHTML()
- insertAdjacentElement()
- insertAdjacentText()
- getBoundingClientRect()
- getClientRects()
- The dataset property
- event.currentTarget
- hasAttribute()
- hasAttributes()
- childElementCount
- firstElementChild
- lastElementChild
- compareDocumentPosition() (See also Comparing Document Position by John Resig)
- Node.contains()
- isEqualNode()
- getComputedStyle() with Pseudo-elements
- textContent
- Non-standard innerText
- The poor, misunderstood innerText
- normalize()
- splitText()
- createComment()
- The <table> API
- activeElement
- HTMLInputElement API (selectionStart/selectionEnd)
- setSelectionRange()
- getSelection()
- elementFromPoint()
- scrollBy()
- scrollIntoView()
References for Further Research
- JavaScript: The Definitive Guide
- Professional JavaScript for Web Developers, 3rd Edition
- DOM Enlightenment (print and e-book)
- DOM Enlightenment (early draft website)
- Mozilla Developer Network
- DOM Living Standard (WHATWG spec)
- W3C DOM4 Spec
About Me
- SitePoint
- Web Tools Weekly
- Jump Start CSS
- HTML5 & CSS3 for the Real World: 2nd Edition
- @ImpressiveWebs on Twitter
The Octopus
Doing the presentation at CSS Dev Conf under a giant Octopus was as once-in-a-lifetime as it gets, so here are a couple of photos.
whoa where did the octopus come from?
“I think @GregorAdams accidentally created it.” – @jake_albaugh #cssdevconf pic.twitter.com/A6UzGlf6cu— Chris Coyier (@chriscoyier) October 27, 2015
A blog post in quite a while but quite a worthy talk. A lot of new features that really need fiddled with. Some of them are sense less as we see lesser and lesser comments in HTML markup but in CSS and JavaScript. Even the minified css file doesn’t contain comments because all of those comment goes in CSS source if it’s a SASS file. Than what’s the point of adding them via JavaScript.
Anyway I hope to see this blog with frequent updates.
this is a lot of information to take in im glad you included the video it helps understand things so much more than the mozilla developer pages that often describe these elements which can be difficult to interpret even for developers.
im not so strong in Javascript so im going to scrub up on some of these dom elements :)
Thanks for the great article. It was really very informative and useful. We have come to know something new and helpful about the DOM features. I am surely going to share this article with every web developer.