getting attribute values and types

Examples showing type and value of certain element attributes by name in different ways.

by Laurens Maneschijn

HTML

<div
	id="element"
	data-abc-def="camelcaseexample"
	data-empty
	data-emptystring=""
	data-null="null"
	data-true="true"
	data-false="true"
	data-1="1"
	data-json='{"x":1,"str":"foo"}'
	double="1"
	double="2"
	data-double="1"
	data-double="2"
>
	target element
</div>

<div id="target"></div>

<hr>

<div>
	note on jQuery .data():<br>
	<a target="_blank" href="https://api.jquery.com/data/#data-html5">jQuery .data() and value conversion info</a><br>
	quote:
	<div>
		Every attempt is made to convert the attribute's string value to a JavaScript value (this includes booleans, numbers, objects, arrays, and null). A string is only converted to a number if doing so doesn't change its representation (for example, the string "100" is converted to the number 100, but "1E02" and "100.000" are left as strings because their numeric value of 100 serializes to "100"). When a string starts with '{' or '[', then jQuery.parseJSON is used to parse it; it must follow valid JSON syntax including quoted property names. A string not parseable as a JavaScript value is not converted.
		To retrieve a data-* attribute value as an unconverted string, use the attr() method.
	</div>
</div>

CSS

* {
	font-size: 12px;
}
div#element {
	white-space: pre;
	font-family: monospace;
	tab-size: 2;
}
table {
	border-collapse: collapse;
}
table tr td, table tr th {
	padding: 1px 1px;
	border: 1px solid #888;
}
table tbody tr:hover {
	outline: 1px solid #00f;
}
table tbody tr:hover > * {
	background: rgba(0,0,255, 0.1);
}
table thead tr:last-child th {
	border-bottom-width: 2px;
}
table tr *:first-child {
	border-right-width: 2px;
}
table tbody tr th {
	text-align: left;
}

JavaScript

// USAGE:
// In the html panel:
//   Edit the target element to set new attributes.
// In the javascript panel:
//   Edit attr_keys to define which keys to test for.
//   Edit methods to define which methods to test,
//   each method has a display name (text), and a function(element, attr_key).

function init(){
	var element = document.getElementById('element');
	draw_example_element(element);
	draw_example_table(element, methods, attr_keys);
}

var attr_keys = [
	'missing',
	'id',
	'data-abc-def',
	'data-abcDef',
	'data-empty',
	'data-emptystring',
	'data-null',
	'data-true',
	'data-false',
	'data-1',
	'data-json',
	'double',
	'data-double',
];
var methods = [
	{
		'name': 'element.attributes[attr_key]',
		'function': function(element, attr_key){
			return element.attributes[attr_key];
		},
	},
	{
		'name': 'element.attributes[attr_key].value',
		'function': function(element, attr_key) {
			var attr = element.attributes[attr_key];
			if (attr) {
				return attr.value;
			} else {
				return '(invalid key)';
			}
		},
	},
	{
		'name': 'typeof element.attributes[attr_key].value',
		'function': function(element, attr_key) {
			var attr = element.attributes[attr_key];
			if (attr) {
				return typeof attr.value;
			} else {
				return '(invalid key)';
			}
		},
	},
	{
		'name': 'element.getAttribute(attr_key)',
		'function': function(element, attr_key) {
			return element.getAttribute(attr_key);
		},
	},
	{
		'name': 'typeof element.getAttribute(attr_key)',
		'function': function(element, attr_key) {
			return typeof element.getAttribute(attr_key);
		},
	},
	{
		'name': 'element.getAttributeNode(attr_key).value',
		'function': function(element, attr_key) {
			var node = element.getAttributeNode(attr_key);
			if (node) {
				return node.value;
			} else {
				return '(invalid key)';
			}
		},
	},
	{
		'name': 'typeof element.getAttributeNode(attr_key).value',
		'function': function(element, attr_key) {
			var node = element.getAttributeNode(attr_key);
			if (node)...