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 binations 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.

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 binations 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.

• javascript
• html
• dom

Share Improve this question Follow edited Nov 7, 2015 at 16:51 Danny Fardy Jhonston Bermúdez 5,58155 gold badges2626 silver badges3838 bronze badges asked Nov 7, 2015 at 15:59 Bob van LuijtBob van Luijt 7,5981515 gold badges6262 silver badges107107 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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 case-sensitive, and some have different names than content attributes, e.g. you should check className instead of class.