Stack Overflow
Stack Overflow

Questions tagged [getelementsbyclassname]

getElementsByClassName is a Javascript function which takes a string argument and returns elements from the current page with a class name matching the string. It is generally used to gather DOM elements for further manipulation.

getElementsByClassName() is a function which

[r]eturns a set of elements which have all the given class names. When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName on any element; it will return only elements which are descendants of the specified root element with the given class names. – (Mozilla Developer Network documentation)

664 questions
408
votes
14 answers

Iterating over result of getElementsByClassName using Array.forEach

I want to iterate over some DOM elements, I'm doing this: document.getElementsByClassName( "myclass" ).forEach( function(element, index, array) { //do stuff }); but I get an error: document.getElementsByClassName("myclass").forEach is not a…
Steve Claridge
  • 10,650
  • 8
  • 33
  • 35
204
votes
8 answers

Get element inside element by class and ID - JavaScript

Alright, I've dabbled in JavaScript before, but the most useful thing I've written is a CSS style-switcher. So I'm somewhat new to this. Let's say I have HTML code like this:
Hello world! …
Tanner Babcock
  • 3,232
  • 6
  • 21
  • 23
204
votes
12 answers

What do querySelectorAll and getElementsBy* methods return?

Do getElementsByClassName (and similar functions like getElementsByTagName and querySelectorAll) work the same as getElementById or do they return an array of elements? The reason I ask is because I am trying to change the style of all elements…
dmo
  • 5,102
  • 3
  • 25
  • 28
108
votes
9 answers

How to remove a class from elements in pure JavaScript?

I would like to know how to select all elements with class names "widget" and "hover" and then remove class "hover" from these elements. I have the following JavaScript code that selects all elements with class "widget" and "hover": var elements =…
Andrew
  • 2,691
  • 6
  • 31
  • 47
103
votes
8 answers

How to getElementByClass instead of GetElementById with JavaScript?

I'm trying to toggle the visibility of certain DIV elements on a website depending on the class of each DIV. I'm using a basic JavaScript snippet to toggle them. The problem is that the script only uses getElementById, as getElementByClass is not…
Alan
  • 1,033
  • 2
  • 8
  • 4
29
votes
2 answers

Use vanilla javascript to add / remove class to a different element after clicking on another one

I have looked through a number of similar questions but can not find a specific example of one that answers in vanilla JS how to add and remove a class to a different element from the one clicked on. I know it has something to do with setting up a…
sdawes
  • 631
  • 1
  • 7
  • 15
25
votes
4 answers

Get all items that start with class name

I'm trying to only show certain divs. The way I have decided to do this is to first hide all elements that start with "page" and then only show the correct divs. Here's my (simplified) code:
Dairy Window
  • 1,307
  • 1
  • 13
  • 9
16
votes
2 answers

Object 'unavailable' in Firefox console

I have a few divs with class='class_name', and also have declared var A = document.getElementsByClassName('class_name'); console.log(A[0]); The Chrome console shows:
div 1
The Firefox console shows: …
br00x
  • 161
  • 1
  • 5
16
votes
1 answer

getElementsByClassName to change the style of elements when event occurs

I'm trying to use onmouseover="document.getElementsByClassName().style.background='color'" to change the color of all divs with a given classname to another color when hovering over another page element. Here is a jsfiddle -if anyone could give a…
user2752988
14
votes
3 answers

Strange behavior when iterating over HTMLCollection from getElementsByClassName

I wrote a function to change the class of elements to change their properties. For some reason, only some of the elements have changed. It took me a few hours to find a solution, but it seems odd to me. Perhaps you can explain this to me. This isn’t…
MeNa
  • 1,467
  • 9
  • 23
13
votes
3 answers

How to use getElementsByClassName in javascript-function?

I can't figure out how to use multiple IDs in JavaScript. No problem with single ID and getElementById, but as soon as I change IDs to class and try using getElementsByClassName the function stops working. I've read about a 100 post about the topic;…
jan199674
  • 733
  • 2
  • 10
  • 20
12
votes
2 answers

Shadow Root getElementsByClassName

I am using LitElement to create custom Web Components. I am fairly new at it and decided to try making image slideshow. I used W3Schools slideshow as reference while modifying it to work as LitElement. The problem is, that when I am trying to use…
Filip Skukan
  • 531
  • 1
  • 7
  • 18
12
votes
3 answers

How to get current element in getElementsByClassName

Consider a simple JS event of document.getElementsByClassName('test')[0].onclick=function(){ document.getElementsByClassName('test')[0].innerHTML = 'New Text'; } How can I extend this code to generally work for all elements with class="test". I…
Googlebot
  • 15,159
  • 44
  • 133
  • 229
11
votes
2 answers

Get elements by class A or B in JavaScript

Is it possible to get elements that have one of the specified classes? This is not the same as getting elements that have all of the specified classes. For example, I want to capture all elements whose class list contains either one, two, or…
CookieEater
  • 2,237
  • 3
  • 29
  • 54
10
votes
2 answers

Filter objects by className from nodeList

I've got a nodelist of objects returned by a call to document.getElementsByClassName('a'). Some of these objects have an extra class b. How can I create an array of elements that contain both classes? I don't was use a global search for b. I prefer…
ClassicError
  • 175
  • 1
  • 1
  • 9
1
2 3
…
44 45