JavaScript NodeList

Question

は、document.getElementsByTagNameの2回の呼び出しで返された2つのNodeListsを結合する方法ですか？

言って、私は結果をループにしたい次のコード

var inputs = documentElement.getElementsByTagName('input'); 
var selects = document.getElementsByTagName('select'); 

を持っています。 1つのループで可能ですか？

ありがとうございます！

Answer 1

は思えます。 （See here）

var inputs = document.getElementsByTagName('input'); 
var selects = document.getElementsByTagName('select'); 

inputs = Array.prototype.slice.call(inputs); 
selects = Array.prototype.slice.call(selects); 

var res = inputs.concat(selects); 

alert(res.length); 

Answer 2

jQueryを試してみませんか？私の知る限りでは

jQuery Traverse API reference

Answer 3

、NodeListタイプは、独自のオブジェクトを生成する必要がありますを意味し、（例えばthis articleを参照）不変です。

単純な方法は、配列を作成し、その配列にすべての要素をコピーすることです。

var inputs = documentElement.getElementsByTagName('input'); 
var selects = document.getElementsByTagName('select'); 
var all = new Array(inputs.length + selects.length); 

var index = 0; 
for (i = 0; i < inputs.length; i++) 
    all[index++] = inputs[i]; 
for (i = 0; i < selects.length; i++) 
    all[index++] = selects[i]; 

all変数には、2つのノードセットの和集合が含まれます。私は、ノードのコレクションと連結からの配列を作ったように、

Array.prototype.concat.call(selects, inputs); 

しかし、それは動作しません：

Answer 4

まず、私がこのようなArray.prototypeをを使用して配列を、CONCATすることが可能であることを考えましたそれ。そのように見える：

(function() { 

    var inputs = document.getElementsByTagName('input'), 
     selects = document.getElementsByTagName('select'), 
     result, 
     i, 
     node; 

    function convert (collection) { 
     var a = []; 
     for (var i = 0, length = collection.length; i < length; i++) { 
      a.push(collection[i]); 
     } 
     return a; 
    } 

    // concatenation && convertation 
    result = Array.prototype.concat(convert(inputs), convert(selects)); 
    // traversing 
    i = result.length; 
    while(node = result[--i]) { 
     alert(node.getAttribute('name')); 
    } 

})(); 

Answer 5

あなたがそれらを結合することはできませんが、あなたはまだ順番で一つのループこのようにそれらをループすることができます：jQueryのを使用して代わりに

for (var i = 0; i < inputs.length + selects.length; i++) { 
    var element = (i < inputs.length) ? inputs[i] : selects[i-inputs.length]; 
} 

は、あなたがそれらすべてを選択することができます一回：あなたはargs配列のようなオブジェクトが配列になって作る同じArray.prototype.slice.callを使用することができるように

$('input, select') 

Answer 6

document.querySelectorAll("input, select"); 

Answer 7

私は一緒にこれを投げました。すべてのループでを実行すると少しのオーバーヘッドが発生する可能性がありますが、要素の数が極端に増えない限り、私はそのマイナーなものだと思いますが、と.lengthです。ブックマークレット用

inputs = div.getElementsByTagName('input'); 
selects = div.getElementsByTagName('select'); 
for (i=0; i<inputs.length+selects.length; i++) { 
    element = (i<inputs.length ? inputs[i] : selects[i-inputs.length]); 

    // do whatever with element 
} 

Answer 8

私のショートコード：

var e, t = d.getElementsByTagName('textarea'), u = d.getElementsByTagName('input'), i = t.length; 
    while(e = (i > 0) ? t[--i] : u[-i--]){ if(e.offsetHeight > 0)... } 

Answer 9

function mergeNodeLists(a, b) { 
    var slice = Array.prototype.slice; 
    return slice.call(a).concat(slice.call(b)); 
} 

console.log(mergeNodeLists(inputs, selects)); // => [input, select]

Answer 10

は今日では、私は間違いなく、次を使用します。

クロム、Firefox 3の。5+、IE8 +

var elements = document.querySelectorAll('a'); 

for (var i = 0, element; (element = elements[i]); i++) { 
    console.log(element); 
} 

let elements = document.querySelectorAll('a'); 

for (let i = 0, element; (element = elements[i]); i++) { 
    console.log(element); 
} 

"要素= [i]は要素" ので "elements.length" よりも好ましい（有効実験と）IE11 +、Firefoxの24+、クロム30+：

"ノードリストは、長さのようなプロパティを得ることはO（n）であり、長さをO（n^2）に再確認してリストを反復することを意味します。 "

私はO（1）を覚えている限り、配列アクセスとは異なります。

詳細：

• https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll
• http://kangax.github.io/es5-compat-table/es6/

Answer 11

Array.prototype.slice.call（）はIE 7で失敗し、これを使用する：

Object.prototype.getMyElements = function(tags){ 
    tags = tags.split(','); 
    var i, j, col=[], ci=0; 
    for(i=0; i<tags.length; i++) { 
     var objs = this.getElementsByTagName(tags[i]); 
     for(j=0; j<objs.length; j++) col[ci++] = objs[j]; 
    } 
    return col; 
} 
var objs = document.getMyElements('INPUT,TEXTAREA'); 
var objs = document.getElementById('myform').getMyElements('INPUT,TEXTAREA'); 

Answer 12

を試してみてください、私のway：

var allES = []; 
var inputs = document.getElementsByTagName("input"); 
     for (i = 0; i < inputs.length; i++) { 
       allES.push(inputs[i]); 
      } 
    // gather SELECT elements 
     var selects = document.getElementsByTagName("select"); 
      for (i=0; i < selects.length; i++){ 
       allES.push(selects[i]); 
       }