Why can I change properties of the object when I select it with
getElementById , whereas if I select it with
getElementByClassName it marks me undefined?
What is the theory behind this?
The reference to an element of the HTML of the page through getElementById is done on an ID, which as a rule must be unique on that page, so it gives direct access to the element with that ID.
By using getElementByClassName we refer to the class of the element, it being possible and frequent that several elements share that class, so we do not have direct access to an element to be able to work, but the set of the elements with that class on the page, so we must know their order of appearance to operate on the desired element, that is, we obtain an array of the elements of the page with that class according to their order of appearance in the DOM and we must indicate the position in this array to access the specific element.
Note: In both cases we will get an undefined value if the element we are trying to access does not exist in the DOM, either because it is not found in the HTML from the beginning or deleted from the DOM, before trying to access. You will also have undefined if you try to access an element of the results array whose position does not exist, that is, if you have 3 elements with the class "chicharo-magico" in the sun and you do this:
the result is an undefined .
For the explained before the manipulation of elements using IDs is very used: identify the element unequivocally and allow an access direct to it.
Access through classes can be useful when you want to apply some change or action to several elements simultaneously or if by the Whatever the reason, IDs can not be used to manipulate the DOM.
It is that getElementsByClassName unlike ById returns a collection and not an element.
you should do:
or search in a for loop.
id selector is a unique identifier of a DOM object, however a class selector
class can be applied to several elements, the way to manipulate them is similar to one < strong> arrangement , that is, by positions.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="container"> <span id="textoID">Texto con ID</span> <span class="textoClass">Texto con clase</span> </div> </body> </html>
Thank you all for your answers. In summary, the ID is unique and is not repeated in the document. CLASSs create an array and access them by order of appearance  or 1 or  . Then: if I want to modify all the elements with CLASS I can use a FOR.