Прикрепление прикованных методов к наборам элементов в JavaScript

Question

Это - по крайней мере в настоящий момент - чисто экспериментирование, но мне любопытно: есть ли способ приложить методы (через прототипирование) к наборам элементов? Я тестировал следующие коды:

<div>a</div> 
<div>b</div> 
<div>c</div> 
<script> 
NodeList.prototype._ = function(s) 
{ 
    for (x = 0; x < this.length; x++) 
    { 
     eval('this[x]' + '.' + s); 
    } 
    return this; 
} 
document.getElementsByTagName('div')._("style.backgroundColor = 'red'")._('innerHTML += x'); 
</script> 

В настоящий момент он отлично работает в Opera; как и следовало ожидать, метод _ вызывается на всех элементах div, а затем eval(), передавая ему строку на каждый элемент по очереди. Обратите внимание, что метод _ позволяет связывать цепочку, и это было продемонстрировано также, вызывая _ для добавления предсказанной переменной итератора 10 к внутреннемуHTML каждого элемента.

Теперь два вопроса ...

Во-первых, есть лучший способ идти об этом? Я долгое время желал, чтобы я мог просто сделать document.getElementsByTagName('div').style.backgroundColor = "red";, но, увы, этого еще не было. Вот почему я делаю это в первую очередь, и почему я назвал метод так лаконично; Я пытаюсь подражать ему как можно ближе.

Во-вторых, если предположить, что это разумное использование, как я могу заставить его работать в Firefox? Этот эквивалент браузера NodeList - HTMLCollection, но попытка прототипа последнего просто не удалась. Предложения?

Answer 1

Я приготовил то, что, я полагаю, мог бы оставаться жизнеспособным решением; есть ли что-то принципиально плохое в использовании этого метода для цепочки-модификации коллекции элементов?

<script> 
_ = function() 
{ 
    for (x = 0; x < arguments[0].length; x++) 
    { 
     for (y = 0; y < arguments[1].length; y++) 
     { 
      eval('arguments[0][x]' + '.' + arguments[1][y]); 
     } 
    } 
} 
</script> 

Использование:

divs = document.getElementsByTagName('div'); 
_(divs, ["style.color = 'red'", "innerHTML += x"]); 

Answer 2

Вот «симпатичным» версия (не Eval, не Глобалы, формальные аргументы, не Fugly код внутри строки), что вам нужно, не устанавливая его на прототипе, потому что это не работает для IE.

/** 
* Sets a property on each of the elements in the list 
* @param {NodeList} list 
* @param {string} prop The name of property to be set, 
*  e.g., 'style.backgroundColor', 'value'. 
* @param {mixed} value what to set the value to 
*/ 
function setListProp(list, prop, value) {  
    for (var i = 0; i < list.length; i++) { 
     setProp(list[i], prop, value); 
    } 
} 

/** 
* Avoids the use of eval to set properties that may contain dots 
* Why avoid eval? eval is slow and could be dangerous if input comes from 
* an unsanitized source 
* @param {object} el object that will have its property set 
* @param {string} propName ('value', 'style.backgroundColor') 
* Example: setProp(node, 'style.backgroundColor', "#ddd"); 
*/ 
function setProp(el, propName, value) { 
    var propList = propName.split('.'); 
    // Note we're not setting it to the last value in the property chain 
    for (var i=0; i < propList.length - 1 ; i++) { 
     el = el[propList[i]]; 
    } 
    var lastProperty = propList[propList.length -1]; 
    el[lastProperty] = value; 
} 

Test Case Перейти к google.com с помощью Firefox, введите вышеуказанный код в консоль, а затем введите следующую команду:

// Set tooltip on links 
setListProp(document.getElementsByTagName('a'), 'title', 'YEAH it worked'); 


// Set bg to red on all links 
setListProp(document.getElementsByTagName('a'), 'style.backgroundColor', '#f00'); 

UPDATE Мое решение выиграл» t, если вы хотите иметь возможность делать + =, как вы упомянули. Самое элегантное решение, я думаю, это использовать цикл обратного вызова, как показано ниже.

/** 
* This exists in many libs and in newer versions of JS on Array's prototype 
* @param {Object[]} arr The array that we want to act on each element. 
*     Does not work for sparse arrays 
* @param {Function} callback The function to be called for each element, it will be passed 
*  the element as its first argument, the index as the secibd 
*/ 
function iterate(arr, callback) { 
    for (var i=0,item; item=arr[i]; i++) { 
    callback(item, i); 
    } 
} 

Тогда вы можете назвать это как этот

var as = document.getElementsByTagName('a'); 
iterate(as, function(el, index) { 
    el.style.backgroundColor = 'red'; 
    el.innerHTML += "Whatever"; 
});