Web Tools Weekly
What a Tool!

Issue #181  (New Design, NodeValue, JS Libs, Productivity, Media)01/05/17

There are many ways to read content from elements and nodes. Here's another one that allows you to read and write an individual node's value. It uses the nodeValue property of the Node interface. The nodeValue of an element will always return null, whereas text nodes, CDATA sections, comment nodes, and even attribute nodes will return the text value of the node. To demonstrate its use, I'll use the following HTML:

<body class="home">
  <p>Example. <span>Example paragraph one.</span></p>
  <p>Example paragraph two.</p>
  <p>Example paragraph three.</p>
  <p>Example paragraph four.</p>
  <!-- comment text -->

Now I'll run the following JavaScript to read/write a few of the nodes:
let b = document.body,
    p1 = document.querySelector('p');

// reading node values
console.log(b.nodeValue); // null for all elements
console.log(b.attributes[0].nodeValue); // "home"
console.log(b.childNodes[7].nodeValue); // " comment text "

// changing nodeValue of first node inside first paragraph p1.firstChild.nodeValue = 'inserted text<br>';

View on JS Bin

Notice the second console.log is displaying the text of an attribute node. This would be the equivalent of using getAttribute(), with the difference being that getAttribute() acts on elements, whereas nodeValue can be applied to any type of node.

Also notice that I’m using nodeValue to read the contents of an HTML comment. This is one of many ways you can do this. This would be the equivalent of reading the textContent property or data property of the comment node. As you can see from the final line in that code example, I’m able to define the nodeValue of one of the text nodes, so this isn’t read-only.

A few other things to note regarding defining the nodeValue property: Setting nodeValue will return the value that was set, and you cannot set the nodeValue when the nodeValue is null (unless of course you change it to null, which is the same as an empty string that’s changeable later).

MDN’s article on nodeValue has a chart that lists the different node types and what their nodeValue will return.

Now on to this week's tools!
Did you like this quick tip? There's more where that came from...
NEW E-BOOK! Volume 2 of JavaScript & DOM Tips

JavaScript Libraries and Frameworks

A middle tier framework for JavaScript. A middle tier framework is code that facilitates creating business logic in a reusable, extensible, maintainable, and testable manner.

Angular Universal
Server-side Rendering for Angular 2 apps.

Previously known as node-webkit. Lets you call all Node.js modules directly from DOM and enables a new way of writing applications with all Web technologies.

Lightweight native JavaScript and ES6 library and next generation front-end framework. Package of small stand-alone components without dependencies. Simple like jQuery, better then jQuery UI, powerful like React.

Build complex rules, serialize them as JSON, share them between front-end and back-end.

A JavaScript application framework running on the Java Virtual Machine.
Combine the power of Java and your existing investments with the simplicity of JavaScript.

Define the state of your application as a single model: a single state tree. This state tree manages all application state, whether from a server, like a list of users, or client side state, like the currently selected tab of a UI.

A pure Javascript port of the popular Tesseract OCR engine.

Productivity Tools

A package manager for Windows (like apt-get or yum but for Windows). It was designed to be a decentralized framework for quickly installing applications and tools that you need.

The collaboration tool that helps you plan, measure, and reach your long-term goals one step at a time.

An app to help you to use your computer healthily and productively, by reminding you to take a rest every once and a while, in a simple way.

Tired of Switching between Gmail Accounts? Shift into higher gear with the email client that makes navigating between Mail, Calendar and Drive accounts fast, easy, and beautiful.

Chrome extension. Space for your thoughts, ideas and ongoing tasks. It works where you work. In every new tab.

Works as a tab or Chrome extension. Timer countdown, alarm clock, or stopwatch. Use any YouTube clip as audio alarm.

An open-source, machine-learning personalized RSS feed reader.

Did you like this quick tip? There's more where that came from...
NEW E-BOOK! Volume 2 of JavaScript & DOM Tips

Multimedia Tools

Dummy image generator for prototyping. Variable width and height, mimic performance delays, RWD support, and more.

Professional video hosting with analytics and video marketing tools.

An awesome HTML image loader inspired by WhatsApp image loader.

Pure JavaScript image zoom plugin built with mobile in mind. Smooth animations with intuitive gestures. Zoom into a hi-res image if supplied.
Easy to integrate & customizable.

A D3.js framework for reusable charts.

The simplest way to create flowcharts. Turn your workflows, algorithms and manuals into easy to understand diagrams.

A small JavaScript library for including speech synthesis (artificial speech) in web pages.

A Tweet for Thought

Jesse Skinner with a few interesting thoughts on why there's a lack of innovation from developers.

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...

This could be all too real: Tabs versus Spaces.

Thanks to all for subscribing and reading!

Keep tooling,