如何检查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，但请考虑这个问题与脚本语言无关。

- Bob van Luijt

Answer 1

大多数内容属性都是通过具有相同名称的IDL属性（又称为属性）反射的。

这些IDL属性在元素继承的接口中实现为访问器属性（即getter和setter）。

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

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

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

- Oriol

---

这正是我所需要的。感谢您提供的W3链接，非常有帮助！ - Bob van Luijt

还有一个问题，你知道是否可以将document.createElement()显示为对象吗？这样我就可以看到它的所有内容了。 - Bob van Luijt

@bvl 你的意思是想查看它的所有属性吗？您可以使用“for...in”循环来迭代可枚举的属性（包括自己和继承的属性）：for(var prop in document.createElement('div')){ console.log(prop) } - Oriol

这在HTML中可以工作，例如检查元素“img”的属性“src”。然而，在SVG中似乎不起作用，例如检查元素“rect”的属性“fill”。无论是使用createElement还是createElementNS（即命名空间版本），都是如此。循环遍历“rect”元素的所有属性显示document.createElement(NS)确实返回属性名称列表，但仅像“id”等那些，而不是特定于SVG的属性，例如“fill”。有人有什么建议吗？我在这里提出了一个相关问题（https://stackoverflow.com/q/46410518/5218951）。 - Andrew Willems