html element (data) attribute value tests.

by Laurens Maneschijn

HTML

<h1>Duplicate/double attributes, data-attributes, and attribute values</h1>
<p>
	Several experiments with setting duplicate attributes on html elements,<br>
	and getting their values in javascript in different ways.
</p>

<hr>
<h2>Tip: See console for output.</h2>

<hr>
<h2>Duplicate/double attributes</h2>
<p>
	Double attributes get lost, and only the first value is used.<br>
	Tested with: obj.attributes, obj.getAttribute(), obj.dataset and $(obj).data().<br>
	E.G.: <code>&lt;x bbb="1" bbb="2"&gt; &rArr;</code> will only use value "1".<br>
</p>

<hr>
<h2>Accessing attribute values, using different kind of access methods and keys, and getting different kinds of values:</h2>
<code>&lt;x data-abc-def="1"&gt;</code><br>
<ul>
	<li>
		<code>element.attributes['data-abc-def'].value &rArr; stringvalue</code>:<br>
		Use keys exactly as they appear in html source.<br>
		Values are always returned as strings.<br>
	<li>
		<code>element.getAttribute('data-abc-def') &rArr; stringvalue</code>:<br>
		Use keys exactly as they appear in html source.<br>
		Values are always returned as strings.<br>
	<li>
		<code>element.dataset['abc-def'] &rArr; stringvalue</code>:<br>
		<code>'data-'</code> stripped from html source attributename.<br>
		Dashed keys are converted to camelCase.<br>
		Values are always returned as strings.<br>
	<li>
		<code>$(element).data()['abcDef'] &rArr; convertedvalue</code>:<br>
		<code>'data-'</code> stripped from html source attributename.<br>
		Dashed keys are converted to camelCase.<br>
		Values are converted to their respective type and value:<br>
		null, false, true, numbers, floats, JSONstrings to object.<br>
</ul>

<hr>
<h2>Elements as used in JS examples:</h2>
<div>
	<code>
		&lt;x aaa bbb="2" bbb="3"
				data-xxx="1" data-xxx="2" 
				data-abc-def_ghi="jkl"&gt;
	</code> : 
	<br>
	<x aaa bbb="2" bbb="3"
		data-xxx="1" data-xxx="2" 
		data-abc-def_ghi="jkl">x</x>
	<br>

	<code>
		&lt;input type="text" value="x" value="y"&gt;
	</code>
	<br>
	<input...

CSS

h1,h2,h3,h4,h5,h6,p,ul,li{
	margin: 0;
	font-size: 1em;
}
code { color: #00f; }

JavaScript

console.clear();

/*
Note: double attributes get lost. 
Apparently only the first value is used and known in obj.attributes.
*/
var x = $('<x aaa bbb="1" bbb="2" data-xxx="1" data-xxx="2" data-abc-def_ghi="1" data-abc-def_ghi="2">')[0];
console.log('--- double attributes, and camelcase test ---');
console.log('--- using: x.attributes x.getAttribute() x.dataset $(x).data() ---');
console.log( x );
console.log( 'x:', [x]); // tip: [obj] trick to explore element properties in console
console.log( 'x.attributes:', x.attributes);
console.log( 'x.dataset:'   , x.dataset);
console.log( '$(x).data():' , $(x).data() );
// NB: commented result values from:
// Chrome Version 60.0.3112.90 (Official Build) (64-bit)
console.log( [
	x.attributes.bbb.value,             // --> "1"
	x.getAttribute('bbb'),              // --> "1"
	x.attributes['data-xxx'].value,     // --> "1"
	x.getAttribute('data-xxx'),         // --> "1"
	x.dataset.xxx,                      // --> "1"
	$(x).data('xxx'),                   // --> 1
	'---',
	x.attributes['data-abc-def_ghi'].value, // --> "1"
	x.getAttribute('data-abc-def_ghi'),     // --> "1"
	x.dataset['abc-def_ghi'],               // --> undefined
	$(x).data('abc-def_ghi'),               // --> 1
	'---',
	x.attributes['data-abcDef_ghi'],        // --> undefined
	x.getAttribute('data-abcDef_ghi'),      // --> null
	x.dataset['abcDef_ghi'],                // --> "1"
	$(x).data('abcDef_ghi'),                // --> 1
] );



var input = $('<input type="text" value="x" value="y">')[0];
console.log('--- double input value test ---');
console.log(input.value); // --> "x"


/*
// test data-attribute values with 
// different kinds of values using different access methods:
*/

console.log('--- test value conversion ---');
	var o ={a:[1,2]};
	json=JSON.stringify(o);	// object to JSON string (nb: uses double quotes, so put stringvalue within single quotes/apostrophes '')
	json=$('<span>').text(json).html(); // htmlencode
	var y = $('<y data-a-b-c="abc"...