Question

显然，这已经被问过，但我需要一些有关该主题的新信息。我发现了一些关于DOM元素扩展的文章和博客文章，最突出的论点是浏览器不兼容性。随着IE11做得出奇的好......是不是仍然存在问题？是否有任何其他大问题阻止我直接扩展DOM元素，而不是通过包装器？

编辑：为了澄清，我正在谈论通过现有的JavaScript原型（很可能是元素）向DOM元素添加方法。

Answer 1

最突出的论点是浏览器不兼容性

这可能是一个论点，但不是最引人注目的，请参阅What's wrong with extending the DOM。总结（或多或少按重要性顺序）：

缺乏规范
主机对象没有规则
碰撞的可能性
性能开销
IE DOM是一团糟
浏览器错误

那篇文章超过4年（2010年4月），但没有太多变化。请注意，HTML5正在以稳定的速度向DOM对象添加属性和方法，因此它是一个移动目标。最好加入改进规范的工作，而不是自己动手。

Answer 2

功能上没有问题，因为HTML5预计会增长。 HTML6中可能存在当前不存在的元素。问题是对一个人有意义的元素对另一个人没有意义，对搜索引擎没有意义等等。

不鼓励创建自己的标准是“故意违反”标准。或者换句话说，一个坏主意，除非你有一个非常好的主意和理由。

http://www.w3.org/TR/html5/introduction.html

1.5.2符合其他规范

本节不具备规范性。

此规范与各种各样的规范相互作用并依赖于各种规范   其他规格。在某些情况下，不幸的是，   矛盾的需求导致这个规范违反了   这些其他规格的要求。无论何时都有   发生了，这些违法行为都被称为“故意的”   违反“，并注意到违规的原因。

让我为盲人添加一些支持取决于对元素有语义理解的软件。

Answer 3

是和否。

使用新的data-属性，现在有一种相当标准化的方式来扩展DOM元素，使其既无冲突又无法创建内存泄漏。

var el = document.getElementById("my-gizmo");
el.setAttribute("data-notes", "Extra notes.");
var attr = el.getAttribute("data-notes");
el.removeAttribute("data-notes");

HTML5提供了一种新的dataset方法来访问这些属性，但它的实现有限，并且还没有为黄金时段使用做好准备。

应该注意的是，对于jQuery用户，第一次时间访问jQuery对象的data方法，它将读取data-*属性，但是它不会接受任何未来的变化。

如上所述，请通过expando属性访问elemenet，例如

el.extraProperty = "Blazzah!";

仍然存在与之相关的问题。

参考： https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/

通过JavaScript扩展DOM元素仍然是个坏主意吗？

3 个答案: