Javascript-форум - Применить действие ко всем элементам elementX

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Применить действие ко всем элементам elementX (https://javascript.ru/forum/misc/41580-primenit-dejjstvie-ko-vsem-ehlementam-elementx.html)

Применить действие ко всем элементам elementX

На странице по клику открываются некоторые блоки, нужно сделать так, чтобы по нажатию в пустом месте страницы все эти блоки закрывались (style="dispaly:none"), без использования jQuery или других библиотек.

Все элементы имеют название elementX, где X - произвольное число. Методом перебора, типа for() конечно прокатит, но поскольку число X может быть и 1 и 999999999 перебирать придётся долго да и при каждом клике это излишне.
Нужно ресурсоёмкое решение без использования библиотек.

Подскажите, как бы вы сделали?

Цитата:

Сообщение от keysi_

Все элементы имеют название

Что есть "название элемента"? :blink:

Цитата:

Сообщение от keysi_

число X может быть и 1 и 999999999

Что это за элементы такие?

Цитата:

Сообщение от keysi_

Подскажите ресурсоёмкое решение без использования библиотек.

Где тестовый пример?

Ссори, пусть будет не название а конкретно ID.
Это элементы с которыми можно работать из БД у каждого свой ID, вот потому и разные.

Сейчас напишу пример.

Пример:

<body>
<div id="msg776">
  Сообщение №776
  <div onclick="info776.style='display:block;'">Показать информацию</div>
  <div style="display:none;" id="info776">info</div>
</div>

<div id="msg325">
   Сообщение №325
  <div onclick="info325.style='display:block;'">Показать информацию</div>
  <div style="display:none;" id="info325">info</div>
</div>


<div id="msg767">
   Сообщение №767
  <div onclick="info767.style='display:block;'">Показать информацию</div>
  <div style="display:none;" id="info767">info</div>
</div>

</body>

Цитата:

Сообщение от keysi_

все эти блоки закрывались (style="dispaly:none"), без использования jQuery или других библиотек

Цитата:

Сообщение от keysi_

Пример

Как вариант...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
window.onload=function () {
	var o=document.getElementsByTagName('body')[0].childNodes;
	for (var i=0; i<o.length; i++) {
		if (o[i].tagName=='DIV') {
			o[i].style.display='none';
		};
	};
};
</script>
</head>
<body>
<div id="msg776">
  Сообщение №776
  <div onclick="info776.style='display:block;'">Показать информацию</div>
  <div style="display:none;" id="info776">info</div>
</div>
<div id="msg325">
   Сообщение №325
  <div onclick="info325.style='display:block;'">Показать информацию</div>
  <div style="display:none;" id="info325">info</div>
</div>
<div id="msg767">
   Сообщение №767
  <div onclick="info767.style='display:block;'">Показать информацию</div>
  <div style="display:none;" id="info767">info</div>
</div>
</body>
</html>

С "модификацией" контента...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
window.onload=function () {
	document.getElementById('container').style.display='none';;
};
</script>
</head>
<body>
<body>
<div id="container">
	<div id="msg776">
		Сообщение №776
		<div onclick="info776.style='display:block;'">Показать информацию</div>
		<div style="display:none;" id="info776">info</div>
	</div>
	<div id="msg325">
		Сообщение №325
		<div onclick="info325.style='display:block;'">Показать информацию</div>
		<div style="display:none;" id="info325">info</div>
	</div>
	<div id="msg767">
		Сообщение №767
		<div onclick="info767.style='display:block;'">Показать информацию</div>
		<div style="display:none;" id="info767">info</div>
	</div>
</div>
</body>
</body>
</html>