ฉันกำลังทำงานกับสคริปต์สั้น ๆ เพื่อเปลี่ยน<abbr>ข้อความภายในขององค์ประกอบ แต่พบว่าnodelistไม่มีforEachวิธีการ ฉันรู้ว่านั่นnodelistไม่ได้สืบทอดมาArrayแต่ดูเหมือนforEachจะเป็นวิธีที่มีประโยชน์หรือไม่ มีปัญหาการใช้งานโดยเฉพาะอย่างยิ่งผมไม่ได้ตระหนักถึงการป้องกันที่เพิ่มforEachไปnodelist?
หมายเหตุ: ฉันทราบว่า Dojo และ jQuery ทั้งคู่มีforEachรูปแบบบางอย่างสำหรับ nodelists ของพวกเขา ฉันไม่สามารถใช้ได้เนื่องจากข้อ จำกัด
คำตอบ:
ดูnodeList forEach () บน MDN
ไม่มีคำตอบใดที่อธิบายว่าเหตุใด NodeList จึงไม่สืบทอดจาก Array จึงทำให้มีforEachและส่วนที่เหลือทั้งหมด
พบคำตอบในกระทู้สนทนานี้ ในระยะสั้นมันทำลายเว็บ:
ปัญหาคือโค้ดที่สันนิษฐานว่าอินสแตนซ์ไม่ถูกต้องซึ่งหมายความว่าอินสแตนซ์นั้นเป็น Array ร่วมกับ Array.prototype.concat
มีข้อบกพร่องในไลบรารีการปิดของ Google ซึ่งทำให้แอปเกือบทั้งหมดของ Google ล้มเหลวเนื่องจากเหตุนี้ ไลบรารีได้รับการอัปเดตทันทีที่พบสิ่งนี้ แต่อาจยังมีโค้ดอยู่ที่นั่นซึ่งทำให้สมมติฐานที่ไม่ถูกต้องเหมือนกันเมื่อใช้ร่วมกับ concat
นั่นคือโค้ดบางตัวทำบางอย่างเช่น
if (x instanceof Array) {
otherArray.concat(x);
} else {
doSomethingElseWith(x);
}
อย่างไรก็ตามconcatจะถือว่าอาร์เรย์ "จริง" (ไม่ใช่อินสแตนซ์ของอาร์เรย์) แตกต่างจากวัตถุอื่น ๆ :
[1, 2, 3].concat([4, 5, 6]) // [1, 2, 3, 4, 5, 6]
[1, 2, 3].concat(4) // [1, 2, 3, 4]
นั่นหมายความว่าโค้ดด้านบนพังเมื่อxเป็น NodeList เพราะก่อนที่มันจะไปตามdoSomethingElseWith(x)เส้นทางในขณะที่หลังจากนั้นมันก็ไปตามotherArray.concat(x)เส้นทางซึ่งทำอะไรแปลก ๆ เนื่องจากxไม่ใช่อาร์เรย์จริง
บางครั้งมีข้อเสนอสำหรับElementsคลาสที่เป็นคลาสย่อยจริงของ Array และจะใช้เป็น "NodeList ใหม่" อย่างไรก็ตามสิ่งนี้ได้ถูกลบออกจาก DOM Standardแล้วอย่างน้อยก็ในตอนนี้เนื่องจากยังไม่สามารถใช้งานได้ด้วยเหตุผลทางเทคนิคและข้อกำหนดที่เกี่ยวข้องหลายประการ
NodeList now has forEach() in all major browsersดูเหมือนจะบอกเป็นนัยว่า IE ไม่ใช่เบราว์เซอร์หลัก หวังว่าจะเป็นจริงสำหรับบางคน แต่มันไม่จริงสำหรับฉัน (ยัง)
คุณทำได้
Array.prototype.forEach.call (nodeList, function (node) {
// Your code here.
} );
Array.prototype.forEach.callสามารถย่อมาที่[].forEach.call
Array.prototype.forEach.callเท่านั้น แต่ยังสร้างอาร์เรย์ว่างเปล่าและใช้forEachวิธีการ
คุณสามารถพิจารณาสร้างอาร์เรย์ของโหนดใหม่
var nodeList = document.getElementsByTagName('div'),
nodes = Array.prototype.slice.call(nodeList,0);
// nodes is an array now.
nodes.forEach(function(node){
// do your stuff here.
});
หมายเหตุ: นี่เป็นเพียงรายการ / อาร์เรย์ของการอ้างอิงโหนดที่เรากำลังสร้างขึ้นที่นี่ไม่มีโหนดที่ซ้ำกัน
nodes[0] === nodeList[0] // will be true
Array.prototype.forEach.call(nodeList, fun)หรือเพียงแค่ทำ
var forEach = Array.prototype.forEach.call(nodeList, callback);ดังกล่าวว่า: ตอนนี้คุณสามารถโทรforEach(nodeList, callback);
อย่าพูดเลยมันเป็นปี 2016 และNodeListวัตถุได้ใช้forEachวิธีการใน chrome ล่าสุด (v52.0.2743.116)
ยังเร็วเกินไปที่จะใช้ในการผลิตเนื่องจากเบราว์เซอร์อื่นยังไม่รองรับสิ่งนี้ (ทดสอบ FF 49) แต่ฉันเดาว่าสิ่งนี้จะเป็นมาตรฐานในไม่ช้า
Array.prototype.slice.call(nodelist).forEach(…)คือทำแบบมาตรฐานและใช้ได้กับเบราว์เซอร์รุ่นเก่า
กล่าวโดยย่อคือความขัดแย้งในการออกแบบที่จะใช้วิธีการนั้น
จาก MDN:
เหตุใดฉันจึงใช้ forEach หรือ map บน NodeList ไม่ได้
NodeList ถูกนำมาใช้อย่างมากเช่นอาร์เรย์และจะเป็นการดึงดูดที่จะใช้เมธอด Array.prototype กับพวกเขา อย่างไรก็ตามนี่เป็นไปไม่ได้
JavaScript มีกลไกการสืบทอดตามต้นแบบ อินสแตนซ์อาร์เรย์สืบทอดเมธอดอาร์เรย์ (เช่น forEach หรือ map) เนื่องจากห่วงโซ่ต้นแบบมีลักษณะดังต่อไปนี้:
myArray --> Array.prototype --> Object.prototype --> null(สามารถรับห่วงโซ่ต้นแบบของวัตถุได้โดยการเรียก Object.getPrototypeOf หลาย ๆ ครั้ง)forEach แผนที่และสิ่งที่ชอบเป็นคุณสมบัติของวัตถุ Array.prototype
แตกต่างจากอาร์เรย์ห่วงโซ่ต้นแบบ NodeList มีลักษณะดังนี้:
myNodeList --> NodeList.prototype --> Object.prototype --> nullNodeList.prototype มีเมธอดไอเท็ม แต่ไม่มีเมธอด Array.prototype ดังนั้นจึงไม่สามารถใช้กับ NodeLists ได้
ที่มา: https://developer.mozilla.org/en-US/docs/DOM/NodeList (เลื่อนลงไปที่Why can't I use forEach or map on a NodeList? )
myNodeList --> NodeList.prototype --> Array.prototype --> Object.prototype --> null?
หากคุณต้องการใช้ forEach บน NodeList เพียงแค่คัดลอกฟังก์ชันนั้นจาก Array:
NodeList.prototype.forEach = Array.prototype.forEach;
นั่นคือทั้งหมดนี้คุณสามารถใช้งานได้ในลักษณะเดียวกับที่คุณใช้กับ Array:
document.querySelectorAll('td').forEach(function(o){
o.innerHTML = 'text';
});
ใน ES2015 ตอนนี้คุณสามารถใช้forEachmethod ไปยัง nodeList ได้แล้ว
document.querySelectorAll('abbr').forEach( el => console.log(el));
อย่างไรก็ตามหากคุณต้องการใช้ HTML Collections หรือวัตถุอื่น ๆ ที่มีลักษณะคล้ายอาร์เรย์ใน es2015 คุณสามารถใช้Array.from()method วิธีนี้ใช้วัตถุที่เหมือนอาร์เรย์หรือทำซ้ำได้ (รวมถึง nodeList, HTML Collections, strings เป็นต้น) และส่งคืนอินสแตนซ์ Array ใหม่ คุณสามารถใช้งานได้ดังนี้:
const elements = document.getElementsByTagName('abbr');
Array.from(elements).forEach( el => console.log(el));
เนื่องจากArray.from()วิธีการเป็น shimmable คุณสามารถใช้ในรหัส es5 เช่นนี้
var elements = document.getElementsByTagName('abbr');
Array.from(elements).forEach( function(el) {
console.log(el);
});
สำหรับรายละเอียดโปรดดูหน้าMDN
ในการตรวจสอบการสนับสนุนเบราว์เซอร์ในปัจจุบัน
หรือ
อีกวิธีหนึ่งของ es2015 คือการใช้ตัวดำเนินการกระจาย
[...document.querySelectorAll('abbr')].forEach( el => console.log(el));
วิธีแก้ปัญหาของฉัน:
//foreach for nodeList
NodeList.prototype.forEach = Array.prototype.forEach;
//foreach for HTML collection(getElementsByClassName etc.)
HTMLCollection.prototype.forEach = Array.prototype.forEach;
NodeList เป็นส่วนหนึ่งของ DOM API ดูการผูก ECMAScript ซึ่งใช้กับ JavaScript ด้วย http://www.w3.org/TR/DOM-Level-2-Core/ecma-script-binding.html nodeList และคุณสมบัติความยาวแบบอ่านอย่างเดียวและฟังก์ชัน item (index) เพื่อส่งคืนโหนด
คำตอบคือคุณต้องทำซ้ำ ไม่มีทางเลือกอื่น Foreach จะไม่ทำงาน ฉันทำงานกับการเชื่อมโยง Java DOM API และมีปัญหาเดียวกัน
ตรวจสอบ MDN สำหรับNodeListสำหรับแต่ละข้อกำหนด
NodeList.forEach(function(item, index, nodeList) {
// code block here
});
ใน IE ใช้คำตอบของ akuhn :
[].forEach.call(NodeList, function(item, index, array) {
// code block here
});