Как с помощью JS найти div и изменить его свойства?

Question

[Spark108]

Есть DIV блок с ID "dq" и в нем какое-то кол-во DIV блоков с ID "dp_id", вместо id любое число или буква.
Например:

<div id="dq">
    <div id="dq_1"></div>
    <div id="dq_2"></div>
    <div id="dq_3"></div>
    <div id="dq_4"></div>
</div>

Как мне с помощью функции JS изменить свойство "display: block" на "display: none" всех DIV блоков с приставкой в ID dq_ в блоке с ID dq?

P.S нужно изменить свойство именно тех дивов которые лежат внутри дива dq, но не задеть их дочерние.

Надеюсь понятно все сказал.

Comments

[Spark108]

Поправка не свойсво, а стиль. В частности с display: block;, на display: none;

Answer 1

[Антон]

Вот:

var dq = document.getElementById("dq");
var dqChildren = dq.querySelectorAll("div");

for(var i=0; i<dqChildren.length; i++){
	//Изменить свойства каждого блока внутри #dq
}

Или если внутри #dq будут какие-то блоки, кроме тех, в которых есть "dq":

var dq = document.getElementById("dq");
var dqChildren = dq.querySelectorAll("div");

for(var i=0; i<dqChildren.length; i++){
   if((dqChildren[i].id).indexOf("dq") == 0){
   	dqChildren[i].style.display="none";
   }
}

Comments

[Spark108]

То есть вместо вашего коментария поставить document.getElementById("dq_" + i).style.Display = "none"; Чтобы изменить все DIV с приставкой dq_ или как?

[Антон]

Виктор Первушин: Если внутри блока #dq будут не только нужные дивы, а еще и какие-то другие, то сделать проверку при помощи метода indexOf()

[Дмитрий Беляев]

querySelector для получения элемента по id? Вы серьезно? в топку производительность!

[Spark108]

Дмитрий Беляев: А что тогда использовать?

[Spark108]

Дмитрий Беляев: Да в принципе страница у меня будет одна небольшая и смысла нет писать куча забубенных функций чтобы сделать одно действие. Поэтому не думаю что производительность должна так сильно упасть.

[Антон]

Виктор Первушин: querySelector более ресурсоемкий, чем getElementById. Вот и все. Дмитрий верно поправил.

[Spark108]

Антон: У меня при выполнение консоль пишет "Cannot read property 'querySelectorAll' of null".

[Spark108]

Антон: И getElementById тоже самое дает.

[Антон]

Виктор Первушин: https://jsfiddle.net/nv7ouz2e/

[Spark108]

Антон: И что там должно произойти. Просто белый экран. А если в DIV добавить текст, то блоки все ровно на месте. Дак как мне их заставить исчезнуть вы мне это скажиет как им всем передать display: none; ?

[Spark108]

И у меня везде уже во втором браузере код прекращает работать на той же строке.

[Антон]

Виктор Первушин: https://jsfiddle.net/nv7ouz2e/2/

[Spark108]

Антон: теперь тут все работает, а при переносе на сайт выдает ошибку "dq is null".

[Spark108]

Что у меня за сайт такой что ошибки катает =(

[Spark108]

И ошибка именно на строке "var dqChildren = dq.querySelectorAll("div");"

[Spark108]

Незнаю что у меня было, но пока не запихал все это дело в функцию, то не заработало.

[Антон]

Виктор Первушин: Внимательнее скопируйте весь код еще раз прямо отсюда.

[Spark108]

Антон: Да у меня странность в том что любой JS код работает только из функций. Может это мой комп или браузер так глючить. А так я уже все сделал и работает на 5+. Спс.