javascript - 选择 HTML 中的每个子元素，除了一个

Question

我正在尝试使用 javascript 编辑我网站中 HTML 元素的样式，但不必编写除一个之外的每个子元素，javascript 中是否有一种方法可以选择父 div 下的所有内容 <div id = "pages">除了一个 child ？

HTML

<div id = "pages">
  <div id = "page-1"></div>
  <div id = "page-2"></div>
  <div id = "page-3"></div>
  <div id = "page-4"></div>
</div>

Javascript

//is there a way to select every pages in div id = "pages" except for one page without typing 
//everything manually?
document.getElementbyId("page-1").style.display = "none";
document.getElementbyId("page-2").style.display = "block";
document.getElementbyId("page-3").style.display = "none";
document.getElementbyId("page-4").style.display = "none";

Answer 1

这样:

#pages > div:not([id="page-2"]) {
  display : none;
}

<div id = "pages">
  <div id="page-1">page-1</div>
  <div id="page-2">page-2</div>
  <div id="page-3">page-3</div>
  <div id="page-4">page-4</div>
</div>

如果你讨厌 CSS:

function ShowPage(pageID)
  {
  document.querySelectorAll('#pages > div').forEach(el =>
    {
    el.style.display = (el.id === pageID) ? 'block' : 'none'
    })
  }

ShowPage('page-2')

<div id="pages">
  <div id="page-1">page-1</div>
  <div id="page-2">page-2</div>
  <div id="page-3">page-3</div>
  <div id="page-4">page-4</div>
</div>