Javascript 确定属性在标准HTML（或SVG）中是否有效

我希望在运行时（即基于用户输入）以编程方式动态地向DOM元素（例如HTML或SVG元素）添加属性。如果属性是标准属性，我将按原样使用名称，但如果不是，即如果它需要转换为自定义属性，则我希望向其添加“data-”前缀

那么，有没有办法确定字符串是否表示“标准/正常”DOM属性

例如，假设我有一个SVG矩形，如下所示：

<rect x="10" y="10" width="80" height="40" stroke="black"/>

// correct for HTML:
return (
  attributeName in document.createElement(elementNodeName)
);

// correct for SVG:
return (
  attributeName in document.createElementNS(svgNS, elementNodeName).style ||
  attributeName in document.createElementNS(svgNS, elementNodeName)
);

是否存在任何预先存在的

testAttributeNameValidity

类型功能

在寻找javascript解决方案时，我已经用

javascript

标记了它

**更新：来自其他的解决方案，所以答案可以在HTML中工作，但不能在SVG中工作**

基于，我尝试在document.createElement（elementNodeName）中使用

attributeName，对于有效的属性名，它应该返回
true
，对于无效的属性名，它应该返回
false
。当我为HTML元素（
）使用有效的属性名“id”时，这种方法是有效的

相比之下，我还没有在SVG中使用这种方法。我尝试将
createElement
转换为
createelements
，但似乎仍然无法解决问题。请参阅下面的测试代码。测试代码中的关键功能是
testHtmlAttributeNameValidity
和
testSvgAttributeNameValidity
。如果运行代码并在控制台中检查输出，则表明它对HTML正常工作，即它生成
id=“someId”data price=“price”
。但是，对于SVG，它只会产生不需要的输出：
data fill=“yellow”data price=“price”

如果有区别的话，我在ChromeV61上工作

测试代码：


const testHtmlatTributerNameValidity=（elementNodeName，attributeName）=>{
返回（document.createElement中的attributeName（elementNodeName））；
};
常量testHtmlAttributeName=（attributeName，attributeValue）=>{
const elementNodeName=“p”；
const nameIsValid=testHtmlAttributeNameValidity（elementNodeName，attributeName）；
如果（！nameIsValid）attributeName='data-'+attributeName；
常量元素=document.querySelector（elementNodeName）；
setAttribute（attributeName，attributeValue）；
};
testHtmlAttributeName（“id”、“someId”）；
TestHtmlatTributenName（“价格”、“昂贵”）；
log（document.querySelector（'div'）.innerHTML）；
常量svgNS=”http://www.w3.org/2000/svg";
const testSvgAttributeNameValidity=（elementNodeName，attributeName）=>{
返回（document.createElementNS（svgNS，elementNodeName）中的attributeName）；
};
const testSvgAttributeName=（attributeName，attributeValue）=>{
const elementNodeName=“rect”；
const nameIsValid=testSvgAttributeNameValidity（elementNodeName，attributeName）；
如果（！nameIsValid）attributeName='data-'+attributeName；
常量元素=document.querySelector（elementNodeName）；
setAttribute（attributeName，attributeValue）；
};
testSvgAttributeName（“填充”、“黄色”）；
testSvgAttributeName（“价格”、“昂贵”）；
log（document.querySelector（'svg'）.innerHTML）
#someId{
颜色：绿色；
}

你好，世界

来自@ccprog的评论帮助我解决了这个问题。总之，对于SVG DOM元素，我需要原始检查加上布尔OR'd检查，该检查相同，但添加了
.style
属性

如问题所示，HTML DOM元素属性名的有效性可以通过如下检查来确定：

<rect x="10" y="10" width="80" height="40" stroke="black"/>

// correct for HTML:
return (
  attributeName in document.createElement(elementNodeName)
);

// correct for SVG:
return (
  attributeName in document.createElementNS(svgNS, elementNodeName).style ||
  attributeName in document.createElementNS(svgNS, elementNodeName)
);

但是，这种方法不适用于SVG DOM元素。具体而言，以下内容将确定“id”等真实属性名的有效性，但不会确定“fill”等样式类属性名的有效性：

但是，只需复制该测试并将
.style
属性添加到两个检查之一，即可检查两类属性名称，如下所示：

<rect x="10" y="10" width="80" height="40" stroke="black"/>

// correct for HTML:
return (
  attributeName in document.createElement(elementNodeName)
);

// correct for SVG:
return (
  attributeName in document.createElementNS(svgNS, elementNodeName).style ||
  attributeName in document.createElementNS(svgNS, elementNodeName)
);

除上述变更外，以下代码与问题代码基本相同。确定两类属性名称的有效性的能力反映在可见矩形中黄色填充和粗笔划宽度的外观上，同时将自定义“数据价格”属性添加到元素中。请特别注意，HTML DOM元素和SVG DOM元素需要如何进行不同的检查


const testHtmlatTributerNameValidity=（elementNodeName，attributeName）=>{
返回（document.createElement中的attributeName（elementNodeName））；
返回(
document.createElement中的attributeName（elementNodeName）
);
};
常量testHtmlAttributeName=（attributeName，attributeValue）=>{
const elementNodeName=“p”；
const nameIsValid=testHtmlAttributeNameValidity（elementNodeName，attributeName）；
如果（！nameIsValid）attributeName='data-'+attributeName；
常量元素=document.querySelector（elementNodeName）；
setAttribute（attributeName，attributeValue）；
};
testHtmlAttributeName（“id”、“someHtmlId”）；
//这将导致“id”属性被更改，从而更改
//字体颜色为绿色。
TestHtmlatTributenName（“颜色”、“橙色”）；
//虽然“color”是CSS属性名，但它不是HTMLDOM元素
//属性名。因此，该测试应导致“颜色”不可用
//识别为有效的属性名称，导致
//自定义属性名称“数据颜色”，对
//元件的实际样式，即本测试不应
//将文本变成橙色。此测试包含在此处
//与SVG DOM应该发生的情况形成对比
//元素样式类似属性，如“fill”，如下所示
//在测试SVG DOM元素属性名称一节中。
TestHtmlatTributenName（“价格”、“昂贵”）；
//这应该