7 minutes on recent DOM APIs
Loading...
Uploaded by GoogleDevelopers on Sep 28, 2011
Paul Irish gives you a heads up on recent DOM APIs with good browser support that were designed to make things easier for you. HTML5 classList, dataset, matchMedia(), textContent, and matchesSelector() are explained and demonstrated.
- 167 likes, 1 dislikes
-
Link to this comment:
Top Comments
All Comments (14)
-
@RyanVanEtten `delete $0.dataset.event` works for removing.
-
Does the dataset API have a way to delete the attribute, meaning actually remove it like $0.removeAttribute('data-event
') would? -
lapel mic please...thank you
-
Just happened to find this video and followed most of it since I program in jQuery. Not sure how this compares to that. Is this something new that will be in future browsers' javascript interpreters?
-
both matchesSelector and matchMedia i see no usage scenarios for really.
can you provide some, the one you specified didn't really make good sense.
classList i'm already using and i love it
dataset useful maybe but why was it really added for ?
textContent is just confusing when you read about innetText, etc that all nearlt do the same thing :S
-
I see you started to type jQuery there ;)
Really cool stuff seeing this implemented into standard JS, thanks for the video.
-
apple sucks.
-
@STHayden classList, dataset and matchesSelector can be found on caniuse.com. For textContent and matchMedia there are browser compatibility tables on MDN.
- 7:30
Become a Javascript Console Power-Userby GoogleDevelopers40,676 views
- 1:11
Google Developer Storiesby GoogleDevelopers157,533 views
- 4:37
Google Chrome Developer Tools: 12 Tricks to Develop Quickerby GoogleDevelopers80,444 views
- 1:37
The Google Prediction APIby GoogleDevelopers25,937 views
- 7:42
Paul Irish Jun Fan JKD Grappling Asc. full Instructorby crosshook1,257 views
- 3:29
HTML5 API: Web Workersby ThytOS1,999 views
- 8:30
Using Document Object Model - DOM Parser Module 63by TheSynergetics4,800 views
- 7:20
FireBug Tutorialby easiwriter51,035 views
- 28:40
HTML5, CSS3, and DOM Performanceby GoogleDevelopers39,127 views
- 1:43
what is ftpby learnasyouwatch9,991 views
- 41:55
Introduction to HTML 5by GoogleDevelopers470,627 views
- 0:59
200 Days of Hair Growth in 45 Secondsby haden1,002,755 views
- 0:24
ariane 5 explosionby derlordonesin373,649 views
- 2:41
Firefox 8 20% Faster Than Firefox 5! Google Chrome 14 2D Javascript Rendering Speeds! GJ Mozilla!by adrianisen6,663 views
- 2:11
Yogg Saron Audioby 27Metaldragon155,089 views
- 4:39
Annie from Pakistan performing Mahiya Liveby nickthebadass915,777 views
- 0:37
WebKit (Chrome/Safari)'s Web Inspector is a Web Page that you can Web Inspect!by JeremyBanks89919 views
- 50:44
Learn About HTML5 and the Future of the Webby GoogleDevelopers156,144 views
- 51:12
Google I/O 2011: Writing Web Apps in Goby GoogleDevelopers70,203 views
- 2:32
Trailer 'Família Vende Tudo' filme nacional de 2011by jeffmaggot135,577 views
Btw for those of you who'd like to know where that stuff is specified:
classList and dataset --> HTMLElement interface --> HTML Living Standard chapter 3.2.2
textContent --> Node interface --> DOM4 chapter 5.2
matchesSelector --> Element interface (extension) --> Selectors API 2 chapter 6.2
window.matchMedia --> Window interface (extension) --> CSSOM View chapter 4
ecmazing 5 months ago 7
@labobo matchesSelector is ideal for event delegation. Also has some unit test uses. matchMedia you can have an event listener bound to when orientation or screensize changes, and you know that event matches when your CSS mq's are switching over. If your styles are using MQs (media queries) then the JS api lets you write behavior that will match.
paulirish 5 months ago