如何在 JavaScript 中不知道完整 ID 的情况下隐藏除选定行之外的所有行？

在网页设计和开发中，我们经常需要根据一些操作来隐藏或显示特定的 HTML 元素。当我们知道这些元素的 ID，则可以使用 getElementById() 方法来操作它们。但是，在某些情况下，我们可能不知道元素的完整ID，这时候该怎么办呢？

本文将介绍如何在 JavaScript 中不知道完整 ID 的情况下隐藏除选定行之外的所有行。具体实现方式如下：

const selectedRow = document.getElementById("ID_of_selected_row");
const tableBody = selectedRow.parentNode;
const rows = tableBody.getElementsByTagName("tr");
for (let i = 0; i < rows.length; i++) {
  if (rows[i] !== selectedRow) {
    rows[i].style.display = "none";
  }
}

其中，getElementById() 方法用于选中需要保留的行，parentNode 属性用于获取该行的父元素，即表格主体（tbody），getElementsByTagName() 方法用于获取表格主体中所有的行元素。接下来，我们使用 for 循环遍历所有行元素，如果某行不是选中的行，则将其样式属性 display 设置为“none”，从而实现隐藏。

需要注意的是，由于我们只对行元素使用了样式属性设置，因此要确保该元素的默认样式为 display:table-row，否则该行将不会被隐藏。

这种方法不依赖于元素 ID，而是通过遍历 DOM 树找到需要操作的元素并进行样式修改。虽然相比直接使用元素 ID 对元素进行操作可能会更慢一些，但它可以解决我们不知道元素 ID 的情况下的需求。

总结一下，我们学习了如何在 JavaScript 中不知道完整 ID 的情况下隐藏除选定行之外的所有行。这可以通过遍历 DOM 树的方式来实现，即获取表格主体元素并遍历其中的行元素，找到需要操作的元素进行样式修改。通过这种方法，我们可以更好地应对一些特定场景下的需求。