Select every child element in HTML except one

Question

I'm trying to edit the style of the HTML elements in my website using javascript but instead of having to write each child element except one, is there a method in javascript to select everything under the parent div <div id = "pages"> except one 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

this way:

#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>

If you hate 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>