|
|
|
|
Issue #64 (isEqualNode() and Learning Tools)10/09/14
You can compare two nodes in an HTML document using the isEqualNode() method, supported in IE9+. The method is called on an existing node, and it's passed another node as the only argument.
Let's run some tests using the following HTML:
<body>
<!-- test comment -->
<!-- test comment -->
<!-- test comment extra -->
<!-- test comment extra-->
<div class="one" id="two" data-extra="three">Testing</div>
<div class="one" id="two" data-other="three">Testing</div>
<div id="two" class="one" data-extra="three">Testing</div>
<div class="one" id="two" data-extra="three">Testing </div>
</body>
|
Inside the body tag are some HTML comments and I've included three div elements with some text and various attributes on each. Notice the differences between the comment nodes as well as the differences between the element nodes. Now let's run some tests using isEqualNode():
var divs = document.getElementsByTagName('div'),
myNodes = document.body.childNodes;
console.log(divs[0].isEqualNode(divs[1])); // false
console.log(divs[0].isEqualNode(divs[2])); // true
console.log(divs[1].isEqualNode(divs[2])); // false
console.log(divs[2].isEqualNode(divs[3])); // false
console.log(myNodes[1].isEqualNode(myNodes[3])); // true
console.log(myNodes[3].isEqualNode(myNodes[5])); // false
console.log(myNodes[5].isEqualNode(myNodes[7])); // false
|
(View on JS Bin) The first collection holds all the div elements, while the next collection holds all elements on the page, using the childNodes property. Let's look at the results of the tests on the div elements:
- div elements 0 and 1 are not equal because one of the data-* attributes is different, even though the values are the same.
- div elements 0 and 2 are equal, which is odd because they don't look equal. Note however, that for all practical purposes, they are equal. The only difference is the order of the attributes, which doesn't matter to isEqualNode().
- div elements 1 and 2 are not equal for the same reason as 0 vs. 1.
- div elements 2 and 3 are not equal, which is due to the single extra space in the text of the 3 element, before the closing tag.
Now what about the comment nodes?
- These are collected using childNodes, which collects all nodes, including text nodes (white space), elements, and comments, so we have to reference the comments by skipping numbers in the indexes.
- The first two comment nodes (1 and 3) are the same.
- The 3 and 5 nodes are clearly different, having different text.
- The last two nodes are also different but only because of the missing space at the tail end of the comment.
If you need an IE8 polyfill for this, you can try this DOM shim.
More info on MDN: Node.isEqualNode() and Node.childNodes.
Now on to this week's learning tools!
Interactive Learning Tools
Flexy Boxes
A Flexbox playground and code generator with legacy flexbox support.
The Bézier Game
"A game to help you master the pen tool."
CodeFights
Code challenges that test how fast you can debug JavaScript.
flexbox in 5 minutes
"An interactive tour of all the major features of the new CSS property: flexbox."
Learn Angular
"Learn AngularJS with free interactive lessons."
Codementor
"Your instant 1:1 expert mentor helping you in real time."
Whatpx
"A skill game to improve your pixel eye-balling ability. Guess the pixel width of the black column by entering a raw number."
jsdares
"Make your own games by learning JavaScript programming."
| Support Web Tools Weekly: 384 pages of CSS for $7 |
Courses, Screencast Series, etc.
JavaScript Best Practices
From Code School: "Become a more informed, conscientious user of JavaScript as you explore time-tested, useful techniques that will improve legibility, performance quality, and safety in your scripts."
DevFreeCasts
"A huge collection of free screencasts for devs."
UX How-To with Luke Wroblewski
A YouTube playlist of how-to tutorials on user experience.
Learn to Code Advanced HTML & CSS
The follow-up to Shay Howe's beginner's tutorial series on HTML and CSS.
Code Avengers
"Learn to build websites, apps and games. Bring your ideas to life with HTML, CSS & JavaScript. Choose from 100 hours of lessons on how to code."
Sysadmin Casts
"Simple bite sized sysadmin screencasts (released weekly)."
js-must-watch
A GitHub repo with a collection of JavaScript videos, categorized by year.
Must-Watch CSS
Another repo, this time focused on CSS videos, again by year.
An Introduction to APIs
An 8-part series on the concepts of APIs, with stuff here from beginner to advanced.
Website Performance Optimization
From Udacity, by Ilya Grigorik: "Learn how to optimize any website for speed by diving into the details of how mobile and desktop browsers render pages."
Web Performance Crash Course
A YouTube playlist of Fluent 2013 videos by Ilya Grigorik on website performance.
A to Z CSS
A really well produced screencast series covering various topics on CSS.
Podcasts and Newsletters
Mobile Web Weekly
"A weekly round-up of the releases, articles, and links that affect Web developers working on the mobile-facing Web."
A Drip of JavaScript
"One quick JavaScript tip, delivered to your inbox biweekly."
5 Minutes of JavaScript
A podcast covering "the latest news in the JavaScript community."
A Responsive Web Design Podcast
Karen McGrane and Ethan Marcotte "interview the people who make responsive redesigns happen."
On The Grid
A design podcast "about a broad range of topics through the lens of design."
Books
Eloquent JavaScript
The 2nd edition of Marijn Haverbeke's popular book, available for free online or in a print version from Amazon.
Responsive Design Workflow
By Stephen Hay. "Shows you how to adapt to the new paradigm and create sites for today's web."
Sass in the Real World
By Dale Sande, the first of four. This one "concentrates on the basics of Sass development however with a deeper context and history behind all that is Sass."
Your First Meteor Application
By David Turnbull. A complete beginner's guide to Meteor.js, an open source app development platform.
Pocket Guide to Writing SVG
By Joni Trythall. "Provides designers and developers with the base knowledge needed to get started with writing SVG and better understand its overall syntax and behavior through clear examples."
Apps for All: Coding Accessible Web Applications
By Heydon Pickering. "Making interactions possible and meaningful for those who suffer from cognitive and motor impairments, as well as users who experience a range of vision impairments."
| Support Web Tools Weekly: 384 pages of CSS for $7 |
A Tweet for Thought
Alex Sexton encapsulates everything on CSS typos in this genius tweet.
Suggestions / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions, corrections, or improvements, feel free to reply to this email.
Before I Go...
Speaking of "learning tools", if you're considering signing up for an online programming school, here's a comparison of price, length, and workload for some of the popular ones.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
