Лучший способ обработки нодлиста?

Question

С .foreach и .map не будет работать над нодлистом, это единственный способ работать с элементами в нодлисте через цикл for?

То, что я пытаюсь выполнить, заключается в добавлении различных прослушивателей событий к различным элементам в нодлисте. Если элемент имеет имя класса «полужирный», тогда должна выполняться функция iBold(), а также для «курсива» и «подчеркивания». Наличие нескольких циклов для работы с каждым из них индивидуально кажется чрезмерным, поэтому я пытаюсь работать с одним циклом для обработки всего богатого текста. Однако, если есть лучший способ сделать это, мне бы очень хотелось узнать, так как кажется, что я просто передумал все это.

var QSA = document.querySelectorAll('div > form > div > a.richText'); 
for (var rtIndex = 0; rtIndex < QSA.length;rtIndex++) { //Rich text event listeners 
var rtid = QSA[rtIndex].id; 
var targetiFrame = document.getElementById(rtid).getAttribute('data-pstid'); 
if (document.getElementById(rtid).className == "richText bold") { //Bold text event listener 
    QSA[rtIndex].addEventListener('click', function() { 
     if (targetiFrame != 0) {iBold(targetiFrame);} 
     else { 
      document.getElementById('richTextField').contentDocument.execCommand('bold', false, null); 
      document.getElementById('richTextField').contentWindow.focus(); 
     } 
    }, false); 
} else if (document.getElementsByClassName('richText')[rtIndex].className == 'richText underline') { //Underline text event listener 
    document.getElementsByClassName('richText')[rtIndex].addEventListener('click', function() { 
     if (targetiFrame == 0) { 
      document.getElementById('richTextField').contentDocument.execCommand('underline', false, null); 
      document.getElementById('richTextField').contentWindow.focus(); 
     } else {iUnderline(targetiFrame);} 
    }, false); 
} else if (document.getElementsByClassName('richText')[rtIndex].className == 'richText italic') { //Italic text event listener 
    document.getElementsByClassName('richText')[rtIndex].addEventListener('click', function() { 
     if (targetiFrame == 0) { 
      document.getElementById('richTextField').contentDocument.execCommand('italic', false, null); 
      document.getElementById('richTextField').contentWindow.focus(); 
     } else {iItalic(targetiFrame);} 
    }, false); 
} 

}

for (var sbmtIndex = 0;sbmtIndex < document.getElementsByClassName('sbmtPost').length;sbmtIndex++) { //Event listener for submitting posts or comments 
    var iSubmt = document.querySelectorAll('form > div')[sbmtIndex]; 
    document.querySelectorAll('form > div > .sbmtPost')[sbmtIndex].addEventListener('click', function() { 
     var pstData = iSubmt.querySelector('form > div > .sbmtPost').getAttribute('data-cmtid'); 
     var cPrntID = iSubmt.querySelector('form > div > .sbmtPost').getAttribute('data-pstid'); 
     sendData(pstData, cPrntID); //Post Data (data being the id) and Comment Parent Id. Comments are posts. Variables only used for comments 
    }, false); 
} 

Answer 1

Если вы не против преобразования вашего NodeList к Array, вы можете использовать:

var nodeArray = Array.prototype.slice.call(nodeList); 

Затем вы можете использовать все функциональные методы на результирующее Array.

Примечание: это не совместимо с перекрестным браузером, но ни один из них не является .forEach, поэтому я не думаю, что это проблема.

Answer 2

<div class="btn" data='btn1'>btn1</div> 
<div class="btn" data='btn2'>btn2</div> 
<div class="btn" data='btn3'>btn3</div> 

const btns = document.getElementsByClassName('btn'); 

function getBtns(el, callback) { 
    Array.prototype.forEach.call(el, function(node) { 
    // Wrap below in if() condition here. 
    node.addEventListener('click', callback); 
    }); 
} 

getBtns(btns, function() { 
    console.log(this.getAttribute('data')); 
}); 

это указывает на кнопку, которая нажата.