如何在列表中筛选出带有指定id的li元素？

我有一组关键词列表，需要基于<li id="newKeyword">进行筛选：

<ul id="keywordList">
  <li></li>
  <li id="newKeyword"></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

点击按钮时会触发函数showNewKeywords()：

function showNewKeywords() {
  // Declare variables
  var ul, li;

  ul = document.getElementById("keywordList");
  li = ul.getElementsByTagName('li');


  // Loop through all list items, and hide those who don't have the li ID
  for (i = 0; i < li.length; i++) {

    // Find id of each li within the list
    
  }
}

我在遍历li标签列表以找到带有指定id的元素时遇到了困难。我尝试过getElementById方法，但它会查找整个文档（我认为）。请问有什么方法可以基于li id来筛选li列表？

方法1：遍历列表时判断ID #

直接在循环中检查每个li的id属性，隐藏不符合条件的项：

function showNewKeywords() {
  var ul = document.getElementById("keywordList");
  var liItems = ul.getElementsByTagName('li');

  for (var i = 0; i < liItems.length; i++) {
    // 检查当前li的id是否为目标值
    if (liItems[i].id !== "newKeyword") {
      liItems[i].style.display = "none"; // 隐藏非目标项
    } else {
      liItems[i].style.display = "block"; // 确保目标项显示
    }
  }
}

方法2：使用querySelector直接定位目标项 #

如果只需要找到指定ID的li，可以用querySelector限定在目标ul范围内，避免遍历所有项：

function showNewKeywords() {
  var ul = document.getElementById("keywordList");
  // 仅在当前ul下查找id为newKeyword的元素
  var targetLi = ul.querySelector('#newKeyword');

  // 先隐藏所有li
  var liItems = ul.getElementsByTagName('li');
  for (var i = 0; i < liItems.length; i++) {
    liItems[i].style.display = "none";
  }

  // 再显示目标li
  if (targetLi) {
    targetLi.style.display = "block";
  }
}

补充：关于getElementById的说明 #

getElementById确实是在整个文档中查找，但由于HTML规范中id必须是唯一的，所以直接document.getElementById("newKeyword")也能准确拿到目标元素，无需限定在ul内。如果你的场景中id是唯一的，这种方法更简洁：

function showNewKeywords() {
  var targetLi = document.getElementById("newKeyword");
  var allLi = document.getElementById("keywordList").getElementsByTagName('li');

  // 隐藏所有li
  for (var i = 0; i < allLi.length; i++) {
    allLi[i].style.display = "none";
  }

  // 显示目标li
  if (targetLi) {
    targetLi.style.display = "block";
  }
}

内容的提问来源于stack exchange，提问作者Nick Groeneveld