Как проверить, действителен ли элемент DOM и/или атрибут?

Question

У меня есть массив элементов:
var elements = ['div', 'a', 'p', 'foo']

У меня также есть массив атрибутов:
var attributes = ['src', 'href', 'quux', 'id']

Я хочу, чтобы понять, как я могу проверить, если комбинации вышеперечисленного бы действительным Объект DOM.
Или, другими словами:
Как проверить объект DOM на схему DOM? *

Например (на основе указанных выше элементов и атрибутов):

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

* = не уверен, если это называется DOM схемы.

PS:
В моем примере я использую JS, но, пожалуйста, рассмотрите этот вопрос на языке сценариев агностик.

Answer 1

Большинство атрибутов контента являются reflected атрибутом IDL (ака собственности) с тем же именем.

Эти атрибуты 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>