जावास्क्रिप्ट नोडलिस्ट

Question

दस्तावेज की 2 कॉलों द्वारा लौटाए गए 2 नोडलिस्ट में शामिल होने का कोई तरीका है .getElementsByTagName?

कहो, मैं निम्नलिखित कोड परिणामों के माध्यम से

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

मैं पाश करना चाहते हैं। क्या यह एक लूप में संभव है?

अग्रिम धन्यवाद!

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 चर तो नोड्स के दो सेट के मिलन होता है।

Answer 4

सबसे पहले, मैंने सोचा था कि इस Array.prototype का उपयोग कर सरणियों concat करने के लिए, इस तरह संभव है:

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

लेकिन यह काम नहीं करता है, ताकि मैं नोड संग्रह और 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

आप उन्हें शामिल नहीं हो सकते, लेकिन आप अभी भी इस तरह क्रमिक रूप से में एक पाश के माध्यम से उन्हें पाश कर सकते हैं:

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

वैकल्पिक रूप से, jQuery का उपयोग कर, आप उन सभी में चुन सकते हैं एक ही बार: की तरह आप एक ही Array.prototype.slice.call आर्ग सरणी जैसी वस्तु एक सरणी बन करता है कि उपयोग कर सकते हैं

$('input, select') 

Answer 6

document.querySelectorAll("input, select"); 

Answer 7

मैं इस एक साथ फेंक दिया। प्रत्येक लूप के लिए और । लम्बाई से कुछ ओवरहेड हो सकता है, लेकिन मुझे लगता है कि तत्वों की संख्या चरम होने तक यह मामूली लगता है। बुकमार्कलेट के लिए

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

आजकल मैं निश्चित रूप से निम्नलिखित का प्रयोग करेंगे:

Chrome, Firefox 3।5 +, IE8 +

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

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

IE11 +, फ़ायरफ़ॉक्स 24 +, क्रोम 30+

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

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

"तत्व = तत्वों [i]" "elements.length" पर के बाद से पसंद किया जाता है (प्रयोगों सक्षम) के साथ:

"नोड सूचियों को अक्सर फ़िल्टर के साथ नोड इटरेटर्स के रूप में लागू किया जाता है। इसका मतलब है कि लम्बाई जैसी संपत्ति प्राप्त करना ओ (एन) है, और लंबाई को फिर से जांचकर सूची में पुनरावृत्ति ओ (एन^2) होगी । "

सरणी पहुंच के विपरीत, जहां तक ​​मुझे ओ (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

कोशिश मेरी रास्ता:

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