javascript - 如何检查 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 架构。

附言:
在我的示例中，我使用的是 JS，但请考虑这个问题，脚本语言不可知。

Answer 1

大多数内容属性是reflected通过具有相同名称的 IDL 属性(又名属性)。

这些 IDL 属性在元素继承自的接口(interface)中作为访问器属性(即 getter 和 setter)实现。

因此，您可以创建所需类型的元素并检查它是否具有所需的属性:

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

注意 IDL 属性不区分大小写，有些属性的名称与内容属性不同，例如你应该检查 className 而不是 class。