javascript - 修改每个可能的 DOM 元素的原型(prototype)

Question

更新标题以更好地反射(reflect)我正在尝试做的事情。

简而言之，不同的dom元素有不同的构造函数，而且它们似乎并不都共享一个共同的原型(prototype)。我正在寻找一种通过修改这些原型(prototype)为每个 DOM 元素添加函数属性的方法，但我不确定如何找到它们。

例如，我可以这样做:

function enhanceDom (tagNames, methods) {
  var i=-1, tagName;
  while (tagName=tagNames[++i]) {
    var tag=document.createElement(tagName);
    if (!(tag && tag.constructor)) continue;
    for (var methodName in methods) {
      tag.constructor.prototype[methodName]=methods[methodName];
    }
  }
}

var thingsToEnhance = ['a','abbr','acronym','address'/* on and on... */];

enhance(thingsToEnhance, {
  doStuff : function(){
    /* ... */
  },
  doOtherStuff : function(){
    /* ... */
  } 
  /* ... */
});

当然，我想在不列出每个 html 元素的情况下执行此操作。谁能想到更好的方法？

(原始问题如下)

目标 - 使 getElementsByClassName 在任何浏览器中的任何 DOM 节点上工作。

以前有人做过(有点)，但这是我的尝试。

我的问题是，是否有一种好的方法可以让动态创建的元素发挥作用？似乎 HTML DOM 元素不共享可以添加 getElementsByClassName 的通用可预测原型(prototype)......还是我遗漏了什么？

这是我目前所了解的(编辑 - 根据讨论更新)。

(function(){

  var fn = 'getElementsByClassName'; 
  // var fn = 'gEBCN'; // test

  if (typeof document[fn] != 'undefined') return;

  // This is the part I want to get rid of...
  // Can I add getByClass to a single prototype
  // somewhere below Object and be done with it?

  document[fn]=getByClass;
  withDescendants(document, function (node) {
    node[fn]=getByClass;
  });

  function withDescendants (node, callback, userdata) {
    var nodes = node.getElementsByTagName('*'), i=-1;
    while (node=nodes[++i]) {
      callback(node, userdata);
    }
    return userdata;
  }

  function getByClass (className) {
    return withDescendants(this, getMatches, {
      query:new RegExp('(^|\\s+)' + className + '($|\\s+)'), 
      found:[]
    }).found;
  }

  function getMatches (node, data) {
    if (node.className && node.className.match(data.query)) {
      data.found.push(node);
    }
  }

}());

它适用于在脚本加载之前加载的内容，但新动态创建的元素不会获得 getElementsByClassName 方法。有什么建议(除了 setInterval，请)？

Answer 1

我想你想要的可以通过制作 Element interface 的原型(prototype)来实现。 , 喜欢

Element.prototype.getElementsByClassName = function() {
    /* do some magic stuff */
};

但是不要这样做。它无法在所有主流浏览器中可靠地工作。

您在问题示例中所做的事情也是不可取的。您实际上是在扩展宿主对象。再次强调，请不要这样做。

您会落入那些陷阱 Prototype ran into .

我不想只是复制Kangax的文章，所以请阅读What’s wrong with extending the DOM .

你为什么想要这个？你的目标是什么？