为何DOM标准中无Element.after()/animate()/append()？Chrome DevTools却显示存在

这是个很典型的疑惑——这些方法确实不在Element接口的直接定义里，但它们通过两种标准规范的方式被Element节点所拥有：混入接口（Mixin Interfaces）和独立API扩展。

1. after()、append()这类DOM操作方法：来自混入接口 #

WHATWG DOM标准采用混入接口来复用通用方法，避免在多个节点类型中重复编写逻辑。这些方法被定义在专门的混入中，然后被Element、Text、Comment等节点类型"混入"（即继承使用）：

• after()、before()属于ChildNode混入：这个混入为所有可作为父节点子元素的节点类型提供了兄弟节点操作方法，Element自然包含在内。
• append()属于ParentNode混入：这个混入为可包含子节点的节点类型（比如Element、Document、DocumentFragment）提供了添加子元素的便捷方法。

你可以在DOM标准中找到这些混入的定义，它们的方法会被Element自动继承，所以DevTools里能看到这些方法，但它们不会出现在Element接口的直接方法列表里。

2. animate()方法：来自Web Animations API #

animate()方法属于Web Animations API的范畴，它是专门为Element节点添加的动画操作方法，不属于DOM主标准的Element接口定义。不过目前主流浏览器（包括Chrome）都已经完整实现了这个API，所以DevTools里会显示这个方法。

总结 #

这些方法都是完全符合标准的，只是没有直接写在Element接口的定义里：要么是通过混入接口实现跨节点类型的方法共享，要么是来自其他独立的Web标准扩展。浏览器已经实现了这些规范，所以你能在DevTools里看到并使用这些方法。

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