Question

我想获得HTML元素的所有属性，样式，事件和方法的列表。浏览器中是否有反射API？

我正在寻找类似的东西：

var button = new HTMLButtonElement();
var className = document.getQualifiedClassName(button); // "HTMLButtonElement"
var definition = document.getDefinition(className); // HTMLButtonElement reference
var instance = document.getInstance(definition); // instance of HTMLButtonElement
var properties = document.getProperties(button); // properties of HTMLButtonElement
var methods = document.getMethods(button); // methods of HTMLButtonElement
var styles = document.getStyles(button); // styles applicable to HTMLButtonElement
var events = document.getEvents(button); // events on HTMLButtonElement
var inheritance = document.getInheritance(button); // HTMLButtonElement > HTMLElement

修改
这是ActionScript3中的调用，它可以满足我的需求：

var objectInformation = document.describeType(button) // metadata

这可能会让我更清楚我在JavaScript中尝试做些什么。

背景
让我们说我试图将代码完整添加到HTML代码编辑器中。当用户将光标放在div元素旁边并启动代码完成时，我想向他们展示代码中弹出的所有事件和属性以及样式。当他们输入JavaScript时，我想自动完成所有可用的方法。当他们开始输入样式对象时，我想提供一个样式列表。

如果我给出了对象或标签名称，我需要能够显示代码完成的所有元数据。在许多语言中都有API可以做到这一点。

Answer 1

你必须定义每件事的含义。

var className = document.getQualifiedClassName（button）;

这是什么意思？您可以使用classList。

var definition = document.getDefinition（className）;

这是什么意思？你的意思是CSS规则吗？你必须走CSS对象模型才能找到它。

var instance = document.getInstance（definition）;

这是什么意思？您可以使用querySelectorAll。

var properties = document.getProperties（button）;

如果你真的是指属性，你可以简单地将按钮的属性遍历为对象。

var methods = document.getMethods（button）;

大多数有趣的方法都会出现在原型上，例如HTMLElement，你必须在那里寻找它们。许多或大多数将是不可枚举的，并且可能难以追踪。

var styles = document.getStyles（button）;

你是什么意思？ button.style？

var events = document.getEvents（button）;

没有办法获得这些。

var inheritance = document.getInheritance（button）;

这是什么意思？

您还可以获取与属性不同的属性：

var attributes = button.attributes;

Answer 2

JS中没有像AS3's describeType这样的东西。你一次要求很多东西，其中一些你可以在JS中获得，其中一些你不能（而且其中一些在JS中甚至没有意义，因为它是如此动态。）

您可以使用Object.getOwnPropertyDescriptors()和Object.getPrototypeOf()获取对象及其层次结构的属性和方法。

function describeType(object) {
    const prototype = Object.getPrototypeOf(object);
    console.log("Hello, I am a", prototype.constructor.name);
    console.log("My properties are", Object.getOwnPropertyDescriptors(object));
    console.log("My prototype proterties are", Object.getOwnPropertyDescriptors(prototype));
    const superPrototype = Object.getPrototypeOf(prototype);
    if (superPrototype) {
        console.log("My super class is", superPrototype.constructor.name);
        // etc
    }
}

Example on jsfiddle

Answer 3

var button = document.createElement('button')

for(key in button){
 //do anything here
}

我认为你可以做到这一点。

Answer 4

在JavaScript中完成此操作的方法是使用Object's constructor和Reflect的静态方法。

一个例子是使用False返回对象属性名称的数组。

浏览器中的JavaScript是否有反射机制？

4 个答案: