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

在我看来，OP正在尝试一些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 3

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

Answer 4

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 。如果您需要支持这些浏览器，那么您最好的希望是受jQuery toArray实现启发的try-catch方法。第一次尝试：

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

多个document.getElementsByTagName（'thetag'）选择的最短脚本？

5 个答案: