为何MDN未将DOM对象属性标注在原型上，而是显示在对象自身？

Great question! This is a super common point of confusion when you’re comparing DOM APIs to other built-in JS objects like Array or Object. Let’s break down why MDN takes this approach:

• Developer-First Convenience
  When you’re working with a DOM element (like your myEle div), you don’t care whether classList lives on Element.prototype or directly on the instance—you just type myEle.classList and use it. MDN prioritizes this practical usage: instead of making you jump between multiple prototype pages (like HTMLDivElement.prototype, HTMLElement.prototype, Element.prototype) to find all available properties, it aggregates every inherited method and property onto the main object’s documentation page. This way, you get a single, comprehensive list of everything you can do with that element.

• Hiding Prototype Complexity
  For new developers, prototype chain inheritance can be tricky to wrap your head around. MDN’s choice simplifies the learning curve: you don’t need to understand how prototype inheritance works to find the addEventListener method or style property for a div. It presents the API as you’ll actually use it, not as it’s structured under the hood.

• Historical & Spec vs. Implementation Nuances
  The DOM has a long history that predates some modern JS prototype conventions. Early DOM implementations didn’t map perfectly to JS’s prototype model, and while today’s implementations do use the prototype chain, MDN’s documentation evolved to match how developers interact with the API rather than the low-level implementation details. Plus, the DOM specification defines interfaces in a hierarchical way (e.g., HTMLDivElement inherits from HTMLElement), but MDN translates that hierarchy into a user-friendly, flat list of features for each element type.

• Consistency with Real-World Usage
  Think about it: when you log a DOM element to the console, modern dev tools show inherited properties alongside instance-specific ones (often under a [[Prototype]] dropdown, but still accessible directly). MDN mirrors this experience—showing you exactly what you’ll see when you work with the element, without forcing you to dig into prototype layers.

At the end of the day, MDN’s goal is to make web development easier. Its documentation structure is designed around how you use APIs, not how they’re implemented under the hood.

内容的提问来源于stack exchange，提问作者Magnus