We Keep Coding

Is it bad form to use html class attribute as a variable

I am wondering if the html class attribute should only be used for styling. Is there any drawback to using the class attribute as a variable. The W3 spec http://www.w3.org/TR/html5/dom.html#classes does not specify one way or another but, all examples and training point in the direction of styling only for multiple objects.
In my case I want to use the class attribute as variable that matches the key value in a object array. For example in my Javascript code I have an object that has a number of key/value pairs. On my web app I have a number of save buttons. When a save button is clicked I grab the parents class attribute value and use it as the key for the object to know which value to change. The class attribute on the parent has not other value than to let me know which key value pair to change in my object

While I'm sure it's possible to use classes that way, it's certainly not their intended purpose. html has data attributes that provide the functionality you want, for example
<button data-key="some value" name="" id="">click me</button>
You can then get that value (onClick if you like) and use it as a key for your object/data structure. Theres a good overview here

While it is not bad, it neither is best practice.
You can, instead of using the class attribute, define explicit data attributes. Using the class attribute would mean that you could not use several classes (because that would be a weird key to search for in an object, right?).
For instance:
<div class="any classes you like" data-mykey="searchforthiskey">
<button></button>
</div>
In jQuery:
$('button').click(function() {
var key = $(this).closest('div').attr('data-mykey');
});

From a functional perspective, there's no reason to NOT use the class attribute to store information about that element. You can access a class attribute as easily as you can a data attribute.
From a standards perspective, it is probably better to use a data attribute. Why? Well, if you are the only person working on your front-end, no big deal. If you are one of many on a team of front-end developers, who works specifically on the javascript side of things, you may run into a conflict with another front-end developer who works on the HTML/CSS side of things. They may remove a class from the element, not realizing that its also being used as your javascript hook into that element. In that case, you're better off creating your own data attribute, which then makes it clear that this attribute is probably data related and won't be molested by someone just trying to fix the styling of that element.

How to access light DOM info from Javascript in Polymer

Question:
In Web Components specification, when you want to read elements within a Light-DOM from the template the <content select></content> element can be used. But, how can this information be retrieved from the javascript code of the component?
Example:
<wc-timer>
<wc-timer-title>I want to read this from JS</wc-timer-title>
</wc-timer>
Thanks in advance, Javier.

Remember that this inside of your prototype methods refers to the element itself. IOW, just like you could do element.innerHTML or element.firstChild you can write this.innerHTML or this.firstChild.
Simple mode:
domReady: function() {
console.log(this.textContent);
}
http://jsbin.com/bociz/2/edit
This gets more complicated if you are using <content> to project nodes through multiple levels of Shadow DOM. In this case, you will need to use getDistributedNodes api of the <content> node itself.
Before getting into that, I suggest you start with the simple version, and ask a follow up question if you get into trouble.

Use this, for accessing lightDOM and
use this.shadowRoot to access shadowDOM

I have no idea what the template renders out as to the dom, but maybe you can try this:
//jQuery
$('wc-timer-title').text();
//Plain
document.getElementsByTagName("wc-timer-title")[0].innerHTML;

You should be able to use /deep/, it is being deprecated but there is no date as to when that will happen.

Does jQuery internally convert HTML5 data attribute keys to lowercase?

I am trying to conform my JavaScript coding style to my Zend coding style as much as possible, which is using camelCase. So, in my HTML5 data attributes, I am naming them as in this example:
<button class="action" data-actionClass="user" data-actionMethod="delete" data-actionRequest="/user/delete/user-id/1" data-actionComplete="{reload:users}">Delete User #1</button>
<div id="users" data-reloadRequest="/user/index"> ... </div>
Pretty unobtrusive way to harness Jquery for actions, but when I call $('.action').data(), the attribute names are converted to lowercase.
Any workarounds for this?
I never though JavaScript variables should have dashes in them, and I can't understand why jQuery is internally doing this for me? Or maybe it is HTML5?

If you use
data-action-method="delete"
then you can access the attribute with
$('.action').data('actionMethod')
This is part of the HTML5 DOM API:
The custom data attributes is transformed to a key for the
DOMStringMap entry with the following rules:
any dash (U+002D) is removed;
any letter following a dash (U+002D), before its removal, is set in its uppercase counterpart.

First off, see this part of the source code of JQuery, it assumes you have lower case attributes.
Secondly, by convention, all HTML5 attributes should be lowercase, see: http://www.htmlbasictutor.ca/html-tag-attributes.htm
Finally, be warned you may encounter futher problems if you insist on using upper cases, see Django: Unable to add UPPERCASE attribute name in HTML input element

Get an element that has an ID which starts with some characters using Dojo

I have a node defined by the following HTML markup:
<div id="_13:3AVAsa7qVvAprAar19ie8LRorrLEm2g" >asdf</div>
I need to get a reference to it without using it's full id like:
dojo.byId('_13:*');
Is it possible or is there any other ways that could be achieved?

You should use the attribute starts-with selector.
I've never used Dojo, but looking here:
http://dojotoolkit.org/reference-guide/dojo/query.html
It seems that you need this:
dojo.query('div[id^="_13:"]')
That same link also contains examples of other useful selectors at the end of the page.

browsing through nodes

this is what an html structure of the webpage looks like:
<body>
<form>
<input type='file'/>
</form>
<div id='list'>
<div>value here<input id='delete' type='button'/></div>
</div>
</body>
i have found javascript code that triggers on 'delete' button click and removes input 'file' element. it uses this piece of code where element is input 'file' mentioned above:
deleteButton.onclick=function(){this.parentNode.element.parentNode.removeChild(
this.parentNode.element );}
i am trying to understand logic(rules) behind 'this.parentNode.element' ? why not accessing element directly 'element.parentNode.remove...'
many thanks

i am trying to understand logic(rules) behind 'this.parentNode.element' ?
There's no element property on the Node, Element, HTMLElement, or HTMLDivElement interfaces. So my guess would be that elsewhere in that code, you'll find something that's explicitly adding that property to the element instance of the div containing the button. You can do that, add arbitrary properties to element instances. These are frequently called "expando" properties and should be done very, very, very carefully.

Not the answer to the question, just opinion. It's better avoid constructions like
this.parentNode.element.parentNode
Because in case when you change your DOM structure, you will need rewrite you JS. So I think it's better to give id attributes to tags, and use next construction to get DOM element:
document.getElementById('element_id')
or if you will use some js framework (like jQuery) you can use even easier construction to get DOM element
$("#ement_id")

Ok, "removeChild" is a strange method, and quite probably, ill-conceived. It should look like:
<div>value here<input id='deleteMe' type='button'/></div>
var node = document.getElementById('deleteMe');
node.remove(); // <--- does not exist, but sure would be nice!!!
No, instead we have to do these shenanigans:
var node = document.getElementById('deleteMe');
node.parentNode.removeChild(node); // verbose! Convoluted!
We have to get the node's parent, call the method, then refer to the node again. This doesn't look like any other DOM methods as far as I recall. The good news is you can make it happen all in one line, chained, like a jQuery method.
You are best served to start over or copy somebody else's code. The use of "this" means it was within an object (or class), referring to other methods or properties within that object. You should stick to non-object variables and functions for now.
Hope that helps.