Question

由于.foreach和.map不能在节点列表上工作，是通过for循环处理节点列表中元素的唯一方法吗？

我想要完成的是向节点列表中的不同元素添加不同的事件侦听器。如果元素的类名称为“bold”，则应运行iBold（）函数，同样也应运行“italics”和“underline”。有多个for循环运行来处理每个单独感觉过多，所以这就是为什么我尝试使用一个循环来处理所有富文本。但是，如果有更好的方法可以解决这个问题，我真的很想知道，因为我似乎只是过度思考所有这些。

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

此指向单击的按钮。

处理节点列表的最佳方法？

2 个答案: