चाइल्डनॉड्स के माध्यम से लूप

Question 1

मैं इस तरह चाइल्डकोड्स के माध्यम से लूप करने की कोशिश कर रहा हूं:

var children = element.childNodes;
children.forEach(function(item){
    console.log(item);
});

हालाँकि, यह फ़ंक्शन के Uncaught TypeError: undefined is not a functionकारण आउटपुट forEachकरता है। मैं childrenइसके बजाय उपयोग करने की कोशिश करता हूं childNodesलेकिन कुछ भी नहीं बदला।

क्या किसी को पता है कि क्या चल रहा है?

Question 2

चर childrenएक NodeListउदाहरण है और NodeListएस सच नहीं हैं Arrayऔर इसलिए वे forEachविधि को विरासत में नहीं लेते हैं ।

इसके अलावा कुछ ब्राउज़र वास्तव में इसका समर्थन करते हैं nodeList.forEach

ES5

आप उपयोग कर सकते हैं sliceसे Arrayकन्वर्ट करने के लिए NodeListएक उचित में Array।

var array = Array.prototype.slice.call(children);

आप इसे केवल संदर्भ के रूप में callलागू करने forEachऔर पास करने के लिए भी उपयोग कर सकते हैं NodeList।

[].forEach.call(children, function(child) {});

ES6

आप fromअपने NodeListको एक में बदलने के लिए विधि का उपयोग कर सकते हैं Array।

var array = Array.from(children);

या आप इस तरह फैल सिंटैक्स का... उपयोग भी कर सकते हैं

let array = [ ...children ];

एक हैक जिसका उपयोग किया जा सकता है NodeList.prototype.forEach = Array.prototype.forEachऔर आप हर बार उन्हें बदलने के लिए बिना forEachकिसी के साथ उपयोग कर सकते हैं NodeList।

NodeList.prototype.forEach = Array.prototype.forEach
var children = element.childNodes;
children.forEach(function(item){
    console.log(item);
});

NodeLists, Arrays में एक व्यापक गोता देखें , NodeLists परिवर्तित करना और एक अच्छी व्याख्या और इसे करने के अन्य तरीकों के लिए DOM को समझना ।

Question 3

मुझे पार्टी में बहुत देर हो चुकी है, लेकिन चूंकि element.lastChild.nextSibling === null, निम्नलिखित मुझे सबसे सीधा विकल्प लगता है:

for(var child=element.firstChild; child!==null; child=child.nextSibling) {
    console.log(child);
}

Question 4

यहाँ आप इसे for-inलूप के साथ कैसे कर सकते हैं ।

var children = element.childNodes;

for(child in children){
    console.log(children[child]);
}

Question 5

का उपयोग कर एक और विधि जोड़ने के लिए विरोध नहीं कर सका childElementCount। यह दिए गए माता-पिता से बाल तत्व नोड्स की संख्या लौटाता है, इसलिए आप इस पर लूप कर सकते हैं।

for(var i=0, len = parent.childElementCount ; i < len; ++i){
    ... do something with parent.children[i]
    }

Question 6

forपाश के साथ प्रयास करें । यह त्रुटि देता है forEachक्योंकि यह नोड्स का संग्रह है nodelist।

या यह नोड-सूची को सरणी में परिवर्तित करना चाहिए

function toArray(obj) {
  var array = [];
  for (var i = 0; i < obj.length; i++) { 
    array[i] = obj[i];
  }
return array;
}

या आप इसका उपयोग कर सकते हैं

var array = Array.prototype.slice.call(obj);

Question 7

const results = Array.from(myNodeList.values()).map(parser_item);

NodeList Array नहीं है लेकिन NodeList.values () एक Array Iterator लौटाता है, इसलिए इसे Array में परिवर्तित कर सकता है।

Question 8

यह कोशिश करें [रिवर्स ऑर्डर ट्रैवर्सल]:

var childs = document.getElementById('parent').childNodes;
var len = childs.length;
if(len --) do {
    console.log('node: ', childs[len]);
} while(len --);

या [क्रम में]

var childs = document.getElementById('parent').childNodes;
var len = childs.length, i = -1;
if(++i < len) do {
    console.log('node: ', childs[i]);
} while(++i < len);

Question 9

यहाँ एक से अधिक पुनरावृत्ति का एक कार्यात्मक ES6 तरीका है NodeList। इस विधि का उपयोग करता Arrayहै forEachतो जैसे:

Array.prototype.forEach.call(element.childNodes, f)

जहां fइट्रेटर फ़ंक्शन है जो एक चाइल्ड नोड प्राप्त करता है क्योंकि यह पहला पैरामीटर है और दूसरा के रूप में इंडेक्स।

यदि आपको एक से अधिक बार एक छोटी कार्यात्मक उपयोगिता विधि बनाने के लिए NodeLists पर पुनरावृति करने की आवश्यकता है:

const forEach = f => x => Array.prototype.forEach.call(x, f);

// For example, to log all child nodes
forEach((item) => { console.log(item); })(element.childNodes)

// The functional forEach is handy as you can easily created curried functions
const logChildren = forEach((childNode) => { console.log(childNode); })
logChildren(elementA.childNodes)
logChildren(elementB.childNodes)

(आप map()अन्य ऐरे कार्यों के लिए एक ही चाल कर सकते हैं ।)

Question 10

यदि आप इस प्रकार की बहुत सारी चीजें करते हैं तो यह आपके लिए फ़ंक्शन को परिभाषित करने के लायक हो सकता है।

if (typeof NodeList.prototype.forEach == "undefined"){
    NodeList.prototype.forEach = function (cb){
        for (var i=0; i < this.length; i++) {
            var node = this[i];
            cb( node, i );
        }
    };
}