JavaScript NodeList

Question

Czy istnieje sposób na połączenie 2 węzłów zwróconych przez 2 wywołania document.getElementsByTagName?

Powiedz, mam następujący kod

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

chcę pętli wyników. Czy to możliwe w jednej pętli?

Z góry dziękuję!

Answer 1

Wydaje się, można używać tego samego Array.prototype.slice.call który sprawia, że ​​tablica args podobny przedmiot staje się tablicą. (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

Dlaczego nie spróbujesz jQuery.

jQuery Traverse API reference

Answer 3

O ile mi wiadomo, typ NodeList jest niezmienna (patrz this article na przykład), co oznacza, że ​​będziesz musiał wygenerować własny obiekt.

Prostą metodą byłoby stworzenie tablicy i skopiowanie wszystkich elementów do tej tablicy.

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

Zmienna all zawiera następnie połączenie dwóch zestawów węzłów.

Answer 4

Najpierw myślałem, że jest to możliwe przy użyciu Array.prototype Concat tablic, jak poniżej:

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

Ale to nie działa tak, że zrobiłem e tablice z kolekcji węzeł i concat to. Wygląda na to, że:

(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

Nie można do nich dołączyć, ale nadal można pętla przez nich kolejno w jednej pętli tak:

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

Alternatywnie, przy użyciu jQuery, można wybrać je wszystkie w jednym zamachem:

$('input, select') 

Answer 6

document.querySelectorAll("input, select"); 

Answer 7

Rzuciłem tym razem. Może być trochę narzut na wykonanie każdej z pętli, ale myślę, że jest ona niewielka, chyba że liczba elementów stanie się ekstremalna.

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

Mój krótki kod skryptozakładki:

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

Teraz na pewno będę korzystać z następujących powodów:

Chrome, Firefox 3.5+ IE8 +

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

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

IE11, Firefox 24+, 30+ chrom (z eksperymentów włączone)

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

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

"element = elementów [j]" jest korzystniejszy "elements.length", ponieważ:

"Listy węzłów są często implementowane jako iteratory węzłów z filtrem, co oznacza, że ​​otrzymanie właściwości takiej jak długość jest O (n), a iterowanie po liście przez ponowne sprawdzenie długości będzie O (n^2) . "

W przeciwieństwie do dostępu do tablicy, o ile pamiętam O (1).

Więcej szczegółów:

• 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() nie działa w IE 7, użyj tego:

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

spróbować swoich sposób:

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