кратчайший скрипт для нескольких элементов document.getElementsByTagName ('thetag')?

Question

Можно ли выбрать несколько элементов с одним document.getElementsByTagName('thetag')?

Как:

document.getElementsByTagName('thetag')[1-3] 

вместо:

document.getElementsByTagName('thetag')[1] 
document.getElementsByTagName('thetag')[2] 
document.getElementsByTagName('thetag')[3] 

Answer 1

Сохранить результат getElementsByTagName вызова переменной:

var theTags = document.getElementsByTagName("thetag"); 
theTags[1] 
theTags[2] 
theTags[3] 

Answer 2

var tags = Array.prototype.slice.call(document.getElementsByTagName("thetag"),1, 4); 

Answer 3

Array.prototype.slice returns part of an array, а также может использоваться для convert host objects like NodeList to arrays. Самый короткий способ назвать это будет [].slice.call(arrayLikeObject, begin, end). Оба begin и end являются индексами на основе нуля, а элемент в end не включен.

Таким образом, чтобы получить все, что от второго элемента к четвертому элементу, вы могли бы назвать:

[].slice.call(document.getElementsByTagName('tag'), 1, 4) 

Если вы собираетесь делать это много, вы можете написать его как функцию:

document.getElementsByTagNameSlice = function(tag, begin, end) { 
    return [].slice.call(document.getElementsByTagName(tag), begin, end); 
} 

// Call: document.getElementsByTagNameSlice('p', 1, 4); 

(jsFiddle example.)

---

Примечание: этот подход не будет работать в IE 8 и ниже (или более старые браузеры BlackBerry), потому что они не позволят вам позвонить Array.prototype.slice по адресу NodeList. Если вам необходимо поддерживать эти браузеры, ваша лучшая надежда - это подход try-catch, вдохновленный реализацией jQuery toArray. Первая попытка:

try { 
    Array.prototype.slice.call(document.documentElement.childNodes, 0)[0].nodeType; 
} catch(e) { 
    document.getElementsByTagNameSlice = function(tag, begin, end) { 
     var tags = document.getElementsByTagName(tag), 
      arr = []; 

     for (var i = 0; tags[i]; i++) { 
      arr[i] = tags[i]; 
     } 

     arr.slice(begin, end); 
    } 
} 

Answer 4

Мне кажется, что ОП пытается что-то вдоль линий, что предлагает JQuery, в том, что вы можете выбрать несколько элементов, а затем применить изменения к этому выбору. Единственный способ добиться этого - закодировать свой собственный обработчик для этого или использовать библиотеку jQuery.

Ниже представлена ​​примерная структура, которая, очевидно, может быть улучшена и расширена разными способами, но по крайней мере показывает основы того, как достичь такой системы.

<script> 
    var selection = (function(){ 
    var list = [], constructor = function(){ 
     if (!(this instanceof constructor)){return new constructor;}; 
    }; 
    constructor.prototype.each = function(method){ 
     for(var i=0,l=list.length;i<l;i++){method.call(list[i], i, list[i]);} 
     return this; 
    }; 
    constructor.prototype.byTagName = function(tagName){ 
     var i, items = document.getElementsByTagName(tagName), l = items.length; 
     list.length = 0; for(i=0;i<l;i++){list[i] = items[i];}; 
     return this; 
    }; 
    constructor.prototype.html = function(html){ 
     this.each(function(){this.innerHTML = html;}); 
     return this; 
    }; 
    constructor.prototype.range = function(offset, length){ 
     list = list.slice(offset, offset + length); 
     return this; 
    }; 
    return constructor; 
    })(); 

    window.onload = function(){ 
    selection().byTagName('a').range(0,2).html('example'); 
    } 
</script> 
<a href="#">a</a> 
<a href="#">b</a> 
<a href="#">c</a> 

Получение выше работы с JQuery, однако, довольно просто, с гораздо большей силой и гибкостью:

jQuery('a').slice(0,2).html('example'); 

Answer 5

Эта функция строит массив подмножества узлов, которые вы хотите.

function getNodeListSubset(nodelist, start, end){ 
    var arr = []; 
    for(var i = 0; i < nodelist.length && i <= end; i++){ 
     if (i >= start){ 
      arr.push(nodelist[i]); 
     } 
    } 
    return arr; 
} 

Пример использования:

var subset = getNodeListSubset(document.getElementsByTagName('thetag'), 1, 3);