获取 HTML 元素的所有 IDL 属性

Question

我知道可以像这样在标准 HTMLElement 上获取所有 内容属性 :

<input type="text" value="John" />

const input = document.querySelector("input");
const attrs = Array.from(input.attributes);
console.log(attrs.map(a => a.name + ': ' a.value)); // [ "type: text", "value: John" ]

我在 IDL attributes（即您可以访问的那些通过点符号）并不总是在运行时作为内容属性公开。例如，对于以下模板：

<lightning-input label="First Name" value="John" data-id="fname">
</lightning-input>

我得到以下行为：

const input = element.shadowRoot.querySelector("lightning-input");
// I can get all these IDL attributes via dot notation
console.log(input.label); // First Name
console.log(input.value); // John
console.log(input.dataset.id); // fname

const attrs = Array.from(input.attributes);
// But they don't all show up here
console.log(attrs.map(a => a.name + ': ' a.value)); // [ "data-id: fname" ]

如您所见，我可以通过点符号访问 label 和 value 等属性，但不能通过 Element.attributes.

我正在寻找一种方法来检查元素上的所有 IDL 属性，以进行测试。

Answer 1

它们存在于原型上，因此您可以检查原型的 JS 属性：

const getKeys = obj => obj
  ? Object.keys(obj).concat(getKeys(Object.getPrototypeOf(obj)))
  : [];
console.log(
  getKeys(document.querySelector('input'))
);

<input>

获取 HTML 元素的所有 IDL 属性

Get all IDL attributes for an HTML Element

javascript

attributes

idl

jsdom