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

Question

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

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>

​

Answer 2

你可以做这样的事。

​

let children = document.getElementById('pages').children;

for (let index = 0; index < children.length; index++){
  if (children[index].id !== 'page-2') {
    children[index].style.display = 'none';
  } else {
    children[index].style.display = 'block';
  }
}

<div id = "pages">
  <div id = "page-1">a</div>
  <div id = "page-2">b</div>
  <div id = "page-3">c</div>
  <div id = "page-4">d</div>
</div>

​

Answer 3

可以使用数组来存储不包含的in，这样就可以在长期内添加更多的in。然后循环遍历div并检查id是否在数组中。

​

const idsnotinclude = ["page-6"] 

 const divs = document.getElementById('pages').children;
 const divsArray = Array.from(divs);

 divsArray.forEach(function (div){
  if(idsnotinclude.includes(div.id)){
    div.style.display = "block";
    return;
  }
  
  div.style.display = "none";
 });

<div id = "pages">
  <div id = "page-1">1</div>
  <div id = "page-2">2</div>
  <div id = "page-3">3</div>
  <div id = "page-4">4</div>
  <div id = "page-5">5</div>
  <div id = "page-6">6</div>
  <div id = "page-7">7</div>
  <div id = "page-8">8</div>
  <div id = "page-9">9</div>
  <div id = "page-10">10</div>
</div>

​