How to check if 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 validate if the combinations of the above would make a valid DOM object.
Or, in other words:
How can I validate a DOM object against the 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 DOM schema.

PS:
In my example I'm using JS, but please consider this question scripting language agnostic.

Answer 1

Most content attributes are reflected by an IDL attribute (a.k.a property) with the same name.

Those IDL attributes are implemented as accessor properties (i.e. getters and setters) in an interface from which the elements inherit from.

Therefore, you can create an element of the desired type and check if it has the desired property:

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

Note IDL attributes are not case-insensitive, and some have different names than content attributes, e.g. you should check className instead of class.