|
|
|
|
Issue #174 (getElementsByName(), Frameworks, JS Utils, Media)11/17/16
Probably unbeknownst to many of you, there's actually a DOM method called getElementsByName() that has good overall browser support (more on that in a minute). It does exactly what its name suggests; it lets you collect elements using the name attribute present in the HTML.
Assuming, for example, that we have a form with a couple of different radio button collections, we could do the following to gather these sets into live nodeList collections:
|
let setOne = document.getElementsByName('setOne'),
setTwo = document.getElementsByName('setTwo');
console.log(setOne.length, setTwo.length);
|
In this case I'm logging out the length of each collection, but I could do whatever I want with the elements, the same as I would be able to do with similar DOM methods.
There are probably lots of reasons that getElementsByName() has been relatively unknown until now and some of this is detailed on the Dottoro reference's article on the topic. As that page explains, in older versions of Opera and IE, this method returned elements that had the specified name in the id attribute. Also, IE was case sensitive for the value of the name attribute whereas the other browsers were not. From my testing, this method now seems to work the same in all browsers.
Since the name attribute in HTML has become obsolete on certain elements (e.g. links and images), probably the best use of it is to collect form inputs or maybe meta elements, which can use valid name attributes. I suppose it could also be used in a legacy document to collect old elements that use the name attribute.
Of course, even if a document is invalid because of a name attribute, you can still reference the element in the same way. Your page won't validate, but you'll have access to the element and any other elements that use the name attribute.
In this JS Bin demo I'm using getElementsByName() on two radio collections and I've also included a few other elements with name and id attributes so you can see how the browser handles these.
Now on to this week's tools!
Buy my JavaScript/DOM e-book:
70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF) |
Front-end Frameworks
Vue.js
The new craze in front-end frameworks is now at version 2.x.
Clarity Design System
"UX guidelines, HTML/CSS framework, and Angular 2 components working together to craft exceptional experiences."
SkateJS
"A functional, featherweight and cross-framework compatible web component library built on W3C specs."
useful.ly
A CSS framework, in beta, based on flexbox.
styled-components
"Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress."
Shoutem UI toolkit
"Open-source UI toolkit for React Native. Exhaustive UI component set with beautiful themes and animations."
React Native Elements
"Cross platform React Native UI toolkit."
Este
"Starter kit for universal full-fledged React apps. One stack for browser, mobile, server."
Barebones CSS
A minimal and responsive CSS boilerplate with a flat and clean design, built with Less.
NX
"Combines the best ideas from the past with state of the art technology. Write your code using familiar patterns and without complex syntax and frustrating edge cases."
JavaScript Utilities
Shave
"A zero dependency JavaScript plugin that truncates multi-line text to fit within an html element based on a set max-height."
viewScroller
"Small and easy to use solution that allows you to create fullpage scrolling websites."
react-apig-lambda
"Render React.js on-demand with CDN caching."
Navigo
"A simple minimalistic JavaScript router with a fallback for older browsers."
Scale
"Angular plugin for creating charts."
string.js
"A lightweight (< 5 kb minified and gzipped) JavaScript library for the browser or for Node.js that provides extra String methods." Now at version 3.x.
react-ie8
"Make your React app work in IE8." Probably useless today but certainly an interesting experiment.
Hyperform
"A complete implementation of the HTML 5 form validation API in JavaScript. It replaces or polyfills the browser’s native methods and eases your validation task with custom events and hooks."
react-fine-uploader
"Easily integrate Fine Uploader or Fine Uploader S3 into a React app. Drop-in high-level components for a turn-key UI. Use small focused components to build a more custom UI."
Multimedia Tools
deck.gl
"WebGL-powered framework for visual exploratory data analysis of large datasets."
Recordy
"This module abstracts away the logic needed to record audio in your browser."
flv.js
"An HTML5 Flash Video (FLV) Player written in pure JavaScript without Flash."
Leaflet
"An open-source JavaScript library for mobile-friendly interactive maps." Now at version 1.x.
font-awesome-assets
"Convert any of @FontAwesome's Font-Awesome icons to an asset, such as an `svg` tag or a Base64-encoded PNG/SVG `img` tag. It supports Retina devices and custom tag attributes too."
SVG Crowbar
"A Chrome-specific bookmarklet that extracts SVG nodes and accompanying styles from an HTML document and downloads them as an SVG file—A file which you could open and edit in Adobe Illustrator, for instance."
react-vidz-player
A simple video player built in React, leveraging the vidz HTML5 video player for the player creation.
Triangulart
"This is a silly graphic editor build in JavaScript to create isometric illustrations. Triangulart is like pixel art but for triangles." You can save the artwork in JSON format or export as SVG.
A Tweet for Thought
An interesting thread started by Kyle Simpson on the topic of resources in the vein of "You Might Not Need X".
Suggestions / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
Chris Coyier asked on Twitter about transferring data to a new Macbook Pro. If you're planning to do this in the future, the thread might be worth a bookmark.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
