Question

I am trying to hide some elements after document loaded. I manage to do this with getElementById but can’t manage to do this while using getElementsByClassName or getElementsByTagName.

I have read lots questions and answers but coundn’t find the solution. Here is sample fiddle.

javascript:

function myFunction() {
  document.getElementById("b").style.display="none";
  document.getElementsByTagName('p').style.display="none";
  document.getElementsByClassName("a").style.display="none";
}
onload = myFunction;

html:

<p>Tag Ele Test</p>
<p class="a">Class Test</p>
<p id="b">ID Test</p>

Answer 1

getElements (byTagName, byClassName) does return a NodeList, which you need to iterate over. It has no single style declaration property.

var element = document.getElementById("b");
if (element != null)
    element.style.display = "none";
var elements = document.getElementsByTagName('p');
for (var i=0; i<elements.length; i++)
    elements[i].style.display = "none";
elements = document.getElementsByClassName("a");
for (var i=0; i<elements.length; i++)
    elements[i].style.display = "none";