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?
Tests on the Google Chrome console
What is the difference between selecting by ID or ClassName?
2
asked by Axayacatl Vélez 12.07.2018 в 17:46
source
4 answers
0
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: console.log(document.getElementsByClassName("chicharo-magico")[1000]);
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.
answered by 12.07.2018 / 18:02
source
2
It is that getElementsByClassName unlike ById returns a collection and not an element.
you should do:
document.getElementsByClassName('algo')[0].style.color='red';
or search in a for loop.
answered by
12.07.2018 в 17:56
0
The 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.
document.getElementsByClassName('textoClass')[0].style.color='blue';
Solution
document.getElementById('textoID').style.color='red';
document.getElementsByClassName('textoClass')[0].style.color='blue';<!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>
answered by
12.07.2018 в 17:53
0
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 [0] or 1 or [2] . Then: if I want to modify all the elements with CLASS I can use a FOR.
answered by
12.07.2018 в 18:56