如何使用纯 JavaScript 遍历每个 div 标签？

Question

当我按下回车键时，我有这段代码循环遍历 div。

<input type="text" id="keywords"></input>

document.getElementById("keywords").addEventListener("keyup", function(e) {
    if (e.key === 'Enter') {
        var element = document.getElementsByTagName("mark");
    
        for (var y=0; y<element.length; y++) {
            console.log(y);
        }
        }
        
    }, false);

但控制台会记录如下内容：0 1 2 3 4...
我希望它在每次按 Enter 时记录每个新索引。所以它会像：0（输入）1（输入）2（输入）3...
我该怎么做？

Answer 1

您可以创建一个处理函数来设置index 变量并缓存divs，然后返回一个新函数（称为closure），该函数在事件发生时被调用。

function handler() {

  // Create the index and divs variable.
  // These variables will be carried into the closure
  let index = 0;
  const divs = document.querySelectorAll('div');

  // Because the closure maintains references
  // to the variables in its "outer lexical environment"
  // you can update them when it's returned from the handler
  return function () {

    // Now just check to see if the index value is
    // less than the length of the collection of elements
    // If it is log the value, and increase the index
    if (index < divs.length) {
      console.log(index);
      index++;
    } else {
      console.log('Nothing to log');
    }
  }
}

const keywords = document.querySelector('#keywords')

// Call the handler function so that the the variables
// can be initiated, and the closure that the listener will be
// using can be returned
keywords.addEventListener('keyup', handler(), false);

<input type="text" id="keywords"></input>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

Answer 2

window.onload = () => {
  let keyword = document.getElementById('keywords');
  var enterCount = 0;
  var divs = document.getElementsByTagName('span');
  keyword.addEventListener('keyup', function(e) {
    if (e.key === 'Enter') {
      if (enterCount < divs.length) {
        console.log(enterCount);
        enterCount += 1;
      }
    }
  })

}

<input type="text" id="keywords"></input>
<span>123</span>
<span>345</span>
<span>567</span>

我认为您正在寻找类似的东西。您可以将 span 标签更改为您的 div。此 span 标签仅用于示例目的。