html - Hide element by class in pure Javascript -

this question has answer here:

• what queryselectorall, getelementsbyclassname , other getelementsby* methods return? 8 answers

i have tried following code, doesn't work. idea have gone wrong?

document.getelementsbyclassname('appbanner').style.visibility='hidden';

<div class="appbanner">appbanner</div>

using jquery or changing html not possible using [self->webview stringbyevaluatingjavascriptfromstring:@""]; in objective-c.

document.getelementsbyclassname returns htmlcollection(an array-like object) of elements matching class name. style property defined element not htmlcollection. should access first element using bracket(subscript) notation.

document.getelementsbyclassname('appbanner')[0].style.visibility = 'hidden'; 

updated jsfiddle

to change style rules of elements matching class, using selectors api:

[].foreach.call(document.queryselectorall('.appbanner'), function (el) {   el.style.visibility = 'hidden'; }); 

if for...of available:

for (let el of document.queryselectorall('.appbanner')) el.style.visibility = 'hidden';