javascript - 多个 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

在我看来，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

Array.prototype.slice返回数组的一部分，也可用于将宿主对象转换NodeList为数组。调用它的最短方法是[].slice.call(arrayLikeObject, begin, end). begin和都是end从零开始的索引，end不包括 at 元素。

因此，要获取从第二个元素到第四个元素的所有内容，您可以调用：

[].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 示例。）

---

注意：此方法不适用于 IE 8 及更低版本（也不适用于较旧的 BlackBerry 浏览器） ，因为它们不允许您调用Array.prototype.slice. NodeList如果您需要支持这些浏览器，您最好的希望是受 jQuerytoArray实现启发的 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 4

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

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