5

I tried using let modal = document.getElementsByClassName('modal') to select an element with the class modal. It only worked after using node selection to select the first result: let modal = document.getElementsByClassName('modal')[0]. I know the method Document.getElementsByClassName() returns child elements which have all of the given class names, but there's only one element in my HTML with that class. I confirmed this in my browser's dev tools by using var x = document.getElementsByClassName('modal').length and logging the value of x to the console (it returned 1 as expected). Could someone explain why node selection is needed in this case?

Edit: My question is different than the one marked as a duplicate. In that question, they are asking the difference between methods than return a single element and those that return an array-like collection of elements. I'm already aware getElementsByClassName returns an array-like collection of elements, whereas the other methods return one element. My question is why do you need to specify the index in a case where all elements of a class are returned but there's only one element with a class (so one item, the correct item, is returned).

nCardot
  • 5,992
  • 6
  • 47
  • 83
  • 3
    Use `querySelector` instead when only selecting one element. – CertainPerformance Jun 03 '18 at 22:54
  • Possible duplicate of [What do querySelectorAll, getElementsByClassName and other getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) – Luca Kiebel Jun 03 '18 at 23:21
  • 2
    The reason is because it's an array-like object. Same as an array with a single value in it; you can't just call to it and get the single value, you must specify an index. – Cory Kleiser Jun 03 '18 at 23:41

3 Answers3

7

document.getElementsByClassName will return a list of elements with the given class name. Even if there is only one element with that class name it will be in a Node List which is why you have to use the [0]

TheJim01
  • 8,411
  • 1
  • 30
  • 54
Cory Kleiser
  • 1,969
  • 2
  • 13
  • 26
3

It is needed because getElementsByClassName Returns an HTMLCollection and not a single element.

To get the item without using [0], use a query selector instead, this will give you the item instead of a collection of items.

let modal = document.querySelector('.modal')
console.log(modal)
Get Off My Lawn
  • 34,175
  • 38
  • 176
  • 338
  • Note--querySelector elements are not live. My JS manipulates the dom (adding a class that causes the modal to be shown), so in my case I can't use querySelector and have it work correctly. – nCardot Jun 03 '18 at 23:07
  • I don't know what you mean. A query selector can be ran after the class has been dynamically added.... – Get Off My Lawn Jun 03 '18 at 23:09
  • In my code, when the user wins the game, modal.classList.add('show'); is added, causing the modal to appear (set to visible in CSS). If I use let modal = document.querySelector('.modal'), the class is not added to the element with class modal. – nCardot Jun 03 '18 at 23:12
0
document.getElementsByClassName

will return array of element who has this class

Pouya Demokri
  • 59
  • 6
  • I think the OP is clearly not understanding how arrays of length 1 work. They continue to say "I know it returns an array", but "why do I have to use index 0 if there's only element". It might help to address that specifically. – Cooper Buckingham Jun 04 '18 at 01:20
  • I know arrays start at 0. My point of confusion is it makes sense to select a specific index if there are multiple items in the array-like object. But if you know there's just one, why specify? – nCardot Jun 04 '18 at 03:42