How to check if a DOM element and / or attribute is valid?

Question

I have an array of elements:
var elements = ['div', 'a', 'p', 'foo']

I also have an array of attributes:
var attributes = ['src', 'href', 'quux', 'id']

I want to understand how I can check if combinations of the above will make a valid DOM object.
Or, in other words:
How can I test a DOM object for a DOM schema? *

For example (based on the above elements and attributes):

DOM_result = '<div src />';  // = false
DOM_result = '<div href />'; // = false
DOM_result = '<div quux />'; // = false
DOM_result = '<div id />';   // = true
DOM_result = '<a src />';    // = false
DOM_result = '<a href />';   // = true
DOM_result = '<a quux />';   // = false
DOM_result = '<a id />';     // = true
etc...

* = not sure if this is called a DOM schema.

PS:
In my example, I use JS, but please consider this question, the scripting language is agnostic.

Answer 1

IDL ( a.k.a) .

IDL ( ) , .

, , :

'src' in document.createElement('div'); // false
'src' in document.createElement('img'); // true

. IDL- , , , . className class.

Answer 2

, , , JSON

JS Fiddle

var DOMarray = {
  'div': ['id', 'class'],
  'a': ['href', 'id', 'class'],
  'img': ['src', 'id']
};


document.getElementById('test').innerHTML = '<strong>for the img tag, allowed attributes: </strong>' + DOMarray['img'];

<div id="test"></div>

Hide result