Question

请注意，.attributes仅获取当前属性，而不是此问题的内容。

我想要一种方法来获取所有 DOM元素的属性。不仅是现在的那些，还有将来可能的那些。

具体用例是查找SVGElement中不在HTMLElement中的潜在属性 - 在MDN上有一个列表（SVG Attribute reference），但是，由于显而易见的原因，硬编码不是一个好主意。

我最初的想法是迭代每个实例的原型链并比较两个列表（使用事件处理程序的基本过滤），但这实际上并没有给出潜在的svg属性。

修改

重要提示 - 将答案代码粘贴到此页面的控制台中并使用document.body作为目标应显示超过50个属性的列表，包括contentEditable，contextMenu等内容， dir，style等
这也需要跨浏览器工作。

Answer 1

这样的事情能成为你想要的吗？

看起来DOM元素对象存储所有可能属性的空键。你可以循环这些键并将它们存储在一个数组中，然后从那里使用类似的东西来过滤掉继承的属性吗？

<强> HTML

<svg id="blah"></svg>

<强>的Javascript

const blah = document.getElementById('blah')
let possibleKeys = []
for (let key in blah) {
  possibleKeys.push(key)
}

这是JSBin example ...看起来它会生成所有可能属性的列表，但需要进行一些过滤。

另见此主题。 How to list all element attributes in JS?

Answer 2

其中任何一个都应该有效，因为它们会返回一个实时的HTMLCollection。

var svgElement = window.document.getElementsByClassName("someSvgClass")[0];
//assume someSvgClass is on svg element.
//var svgElement = window.document.getElementsByTagName("svg")[0];
//var svgElement = window.document.getElementsByName("mySvg")[0];
//assume svg has this name.

var svgAttributes = svgElement.attributes;

for(let i=0; i<svgAttributes.length; i++) {
  console.log(svgAttributes[i]);
}

请参阅getElementsByTagName()上的MDN

中的以下文档

Element.getElementsByTagName（）方法返回实时 HTMLCollection具有给定标记名称的元素。子树搜索指定元素下面的元素本身。 返回的列表是实时的，这意味着它会自动更新 DOM树自动生成。因此，没有必要打电话几次Element.getElementsByTagName（）具有相同的元素和参数。

getElementsByName和getElementsByClassName的文档说同样的话;返回一个活动节点列表。如果您想尝试一下，我创建了a fiddle here。

您将看到svgAttributes列表在单击＆＃34;添加属性＆＃34;时自动更新。没有重新执行任何这些功能。

Answer 3

没有API，我不认为可以采用解决方法，因为当您更改当前DOM节点上的属性时，浏览器负责以低级别方式重新呈现和更新网页没有暴露给JavaScript上下文。

另外，请记住，任何格式正确的属性在DOM树的上下文中实际上都是有效的，即使它可能不会在呈现级别或浏览器呈现页面的方式上触发任何更改。特别是data-*属性。

可能存在某些特定于供应商的API，但如果您希望跨浏览器兼容，那么这将无用。

遗憾的是，你需要对它进行硬编码。鉴于您特别需要SVGElement属性，也许您可以抓取W3's SVG standard document来自动创建列表？

编辑：我制作了一个片段，可以轻松地从标准中删除值：

const uniq = arr => Array.from(new Set(arr))

const nameElements = document.querySelectorAll('table[summary="Alphabetic list of attributes"] .attr-name')
const arrNameElements = Array.prototype.slice.call(nameElements)
const svgAttributes = uniq(arrNameElements.map(el => el.innerText.replace(/\‘|\’/g, '')))

只需在svg attributes page上执行它，打开页面上的开发控制台并粘贴此代码：）

编辑2：我忘记了演示文稿属性。我会让你想出那个;）

如何获取DOM元素上所有可能的有效属性

3 个答案: