Как изменить атрибуты только первого дочернего элемента div внутри элемента div

Question

У меня есть эта функция, которая сбрасывает атрибуты отображения всех div внутри div на none, а затем устанавливает выбранный блок на блокировку.

function Test(id) 
        {
        var allFiles = document.getElementById("FileContainer").getElementsByTagName("div");
        for(i=0; i< allFiles.length; i++)
            allFiles[i].style.display="none";

        var selected = document.getElementById(id);
            selected.style.display="block";
        }

Проблема заключается в том, что при этом также устанавливается отображение noneдля ребенка divs ребенка div тоже.Как сделать так, чтобы это относилось только к первому дочернему уровню?

<div id="FileContainer">
    <div id="test-1">          //Set display to none
        <div id="test1.1">    //Do not set display to none
    </div> 
    <div id="test-2">        //Set display to none
        <div id="test1.1">  //Do not set display to none
    </div>
</div>

Answer 1

Проверьте это

<div id="FileContainer">
    <div id="test-1">          //Set display to none
        <div id="test1-1">
        </div>    //Do not set display to none
    </div> 
    <div id="test-2">        //Set display to none
        <div id="test1-1">  //Do not set display to none
        </div>
    </div>
</div>

<button onclick="Test('test-2')">Click</button>
<script>
        function Test(id){              
          var el = document.querySelectorAll("div#FileContainer > div");

          for (var i = 0; i < el.length; i++){
              //if id != requested id then hide it
              if(el[i].id != id){
                el[i].style.display = "none";
              }

          }

        }
</script>

Answer 2

Расширяя приведенное здесь решение , вы можете назначить переменную allFiles всем прямым дочерним элементам, используя селектор CSS Child Combinator">" как это:

/* JavaScript */
var allFiles = document.querySelectorAll("#FileContainer > div");
var btn = document.querySelector("button");
var val = document.getElementById("val");

function func() {
  allFiles.forEach(div => {
  	if (div.id == val.value) {
        div.style.display = "none";
    }
  });
}
  
  btn.addEventListener("click", func);

/* CSS */
#FileContainer {color: white;}
#test-1 {background-color: green;}
#test-2 {background-color: green;}
#test3 {background-color: red;}
#test4 {background-color: red;}

<!--HTML-->
<div id="FileContainer">
    <div id="test-1">Direct Child 1<div id="test3">Not Direct Child 1</div></div> 
    <div id="test-2">Direct Child 2<div id="test4">Not Direct Child 2</div></div>
</div>
<hr>
<input type="text" id="val" />

<button>Check ID</button>
<hr>

jsFiddle с использованием CSS дочерний комбинатор селектор ">" :http://jsfiddle.net/AndrewL64/5nuedztx/20/

---

Или, если вы уверены, что под вашим #FileContainer div нет других элементов, на которые вы хотите нацелиться, вы можете использовать .children свойство типа этого:

/* JavaScript */
var allFiles = document.querySelector("#FileContainer").children;
var btn = document.querySelector("button");
var val = document.getElementById("val");

function func(){
  [].forEach.call(allFiles, (div => {
      if (div.id == val.value) {
      div.style.display = "none";
    }
  }))
}

btn.addEventListener("click", func);

/* CSS */
#FileContainer {color: white;}
#test-1 {background-color: green;}
#test-2 {background-color: green;}
#test3 {background-color: red;}
#test4 {background-color: red;}

<!-- HTML -->
<div id="FileContainer">
    <div id="test-1">Direct Child 1<div id="test3">Not Direct Child 1</div></div> 
    <div id="test-2">Direct Child 2<div id="test4">Not Direct Child 2</div></div>
</div>
<hr>
<input type="text" id="val" />

<button>Check ID</button>
<hr>

jsFiddle с использованием .children: http://jsfiddle.net/AndrewL64/zkgjxhfc/30/