javascript - tablas - title css

Modificar prototipos de cada elemento DOM posible

Question

Título actualizado para reflejar mejor lo que estoy tratando de hacer.

En resumen, existen diferentes constructores para diferentes elementos dom, y no parece que todos compartan un prototipo común. Estoy buscando una manera de agregar una propiedad de función a cada elemento DOM modificando estos prototipos, pero no estoy seguro de cómo encontrarlos.

Por ejemplo, podría hacer algo como esto:

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(){
    /* ... */
  } 
  /* ... */
});

Por supuesto, me gustaría hacer esto sin incluir todos los elementos html. ¿Alguien puede pensar en una mejor manera?

(La pregunta original sigue)

Objetivo: hacer que getElementsByClassName funcione en cualquier nodo DOM en cualquier navegador.

Se ha hecho antes (más o menos), pero esta es mi oportunidad.

La pregunta que tengo es, ¿hay una buena manera de hacer que esto funcione con elementos creados dinámicamente? Parece que los elementos HTML DOM no comparten un prototipo predecible común donde se podría agregar getElementsByClassName ... ¿O me falta algo?

Esto es lo que tengo hasta ahora ( editar - actualizado por discusión ).

(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);
    }
  }

}());

Funciona bien en el contenido cargado antes de que se cargue el script, pero los nuevos elementos creados dinámicamente no obtendrán un método getElementsByClassName . Cualquier sugerencia (además de setInterval, por favor)?

Answer 1

Creo que lo que quieres se puede lograr creando un prototipo de la interfaz Element , como

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

pero no hagas esto No funciona de manera confiable en todos los principales navegadores.

Lo que estás haciendo en el ejemplo de tu pregunta tampoco es aconsejable. En realidad estás extendiendo objetos host. Nuevamente, por favor no hagas esto .

Caerás exactamente en esas trampas con las que se encontró Prototype .

No quiero simplemente copiar el artículo de Kangax, así que por favor, lee ¿Qué hay de malo en extender el DOM ?

¿Por qué quieres esto en primer lugar? ¿Cual es tu meta?

Answer 2

Esto parece funcionar, pero es feo. Me pregunto si funciona en IE?

(function(){

  enhanceDom(''a abbr acronym address applet area b base basefont bdo big blockquote body br button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset font form frame frameset h1 h2 h3 h4 h5 h6 head hr html i iframe img input ins isindex kbd label legend li link map menu meta noframes noscript object ol optgroup option p param pre q s samp script select small span strike strong style sub sup table tbody td textarea tfoot th thead title tr tt u ul var''
  ,{
    getElementsByClassName : getByClass
    /* , ... */
  });

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

  function setIfMissing (obj, prop, val) {
    if (typeof obj[prop] == ''undefined'') {
      obj[prop]=val;
    }
  }

  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);
    }
  }

}());