Как получить все элементы определенного тега HTML в JavaScript?

Question

Мне нужно скрыть все элементы типа "раздел" в моем документе, кроме одного с определенным идентификатором.

В jquery это было бы легко

$("section").hide();
$("section#myId").show();

Как бы я сделать это без JQuery?

(Мне нужно, чтобы это произошло, как только страница загрузится и не будет заметным). Мне также это нужно для работы кросс-браузер.

Благодарю.

Answer 1

Поместите следующее непосредственно перед в вашем HTML

<script>
(function () {
  for(var els = document.getElementsByTagName ('section'), i = els.length; i--;)
    els[i].id !== "myId" && (els[i].style.display = "none");
}) ();
</script>

или в "современных" (HTML5) браузерах:

<script>
  [].forEach.call (document.querySelectorAll ('section'),
    function (el) { el.id !== "myId" && (el.style.display = "none"); })
</script>

Answer 2

DOMElement.getElementsByTagName твой друг:

var sections = document.getElementsByTagName('section');
var mySection = null;
for(var i = 0; i < sections.length; ++i) {
   if(sections[i].id === "myId") {
      mySection = sections[i];
      mySection.style.display = "block";
      break;
   }
   sections[i].style.display = "none";
}