You already know how to select and manipulate on individual elements using dumb methods which are getting
hammered by ID and query selector.
Now it's time to move on and to learn about how to deal with multiple elements.
At the same time, there are two methods and some catch elements by class name and get elements by Tognum,
which allow us to select and manipulate on multiple elements using class names and techniques.
Let's start from Get Elements by Class Name Method, which returns a collection of all elements in the
document with specified class name.
In other words, it returns an array like object of all child elements which have already given class
names.
Remember that this method returns an array like collection, which is not actually an array.
All right, let's see practically what this method does.
Choose from HTML document the elements that have the same class names.
These kind of elements are placed inside, at least I mean the elements for icons.
All these elements have the same class name F.A.A..
So let's use this class name and select all those elements, create variable icons, because we are
going to get multiple elements that write document that get elements by class name and write the class
name inside the parentheses F a.
So here we have selected elements with class name F.A.A. and you may notice that they are placed inside
square brackets, similar as it's in case of a right.
But if you drop down, you will see that it's an HTML collection.
This collection is very similar to an array.
It has length property and also each of the items in collection has its proper index number and they
are zero based as well.
Therefore, if we want to access on a particular item, we can use array syntax and put the relevant
index number inside the square brackets.
So right icons zero.
You see that we have first item from HTML collection in the same way you can access on any of the items
from it.
Let's say the second one.
Because of that, the items in the collection are zero based and also it has the length property then
you're able to use for loops with these type of collections.
Now I'm going to write some codes in text editor.
So let's go back to brackets, then opens cryptologist file, which is empty for now.
At first create again variable icons and select elements with class name as a right for items equals
document that get elements by class name.
And then right, the class of eight, then below creates for loop, right for that set, the counter
variable, i.e. equal to zero then is less than the length of the Aitken's.
So.
Right.
I can start length and then the increment I plus plus.
Inside the color braces.
Let's log the variable in Castle, White Castle that log icons and then square brackets, right, I.
Reload the page and you see that we have here all items from e-mail collection.
OK, as you see, we have used for Loop with a collection in the exact same way as it's in case of a
race.
But as we said, collection is not an array and therefore we cannot use a builtin methods with Estima
collections.
Let's prove it and use one of the array methods push, which adds an item to array to the end.
So right.
I can start to push and then writes Hello.
Reload and we have an error, which tells us that a constant push is not a function.
Those words are not very helpful because they don't tell us exactly the problem.
But we know what is the reason.
The reason is that you cannot use Arae methods with e-mail collections.
And there is a nice way to fix that.
And I'm going to show you it in a second.
We need somehow to transform e-mail collection into an array.
And for that we have a great method in JavaScript, which is called a red dot from this method creates
a new era, for instance, from an array like object, which in our case is a similar collection.
Let's use this method and get rid of this line of code.
Create variable var icons array equals to array dot from.
And inside the parentheses.
Right, Aitken's.
Let's log both variables in Castle, right, Castle, Dot log, aikens array.
And then cancel that look icon's.
Reload then dropped out, both of them, and you see that in the first case, we have an array and in
the second case we still have a collection.
So let me explain what happens here.
When we assign a dot from icons to variable, icons are right, then JavaScript engine creates memory
space for I can separate this variable gets a value of icons variable.
But because of using a right that from method icons, a right variable becomes an array in the execution
stage.
But a variable icon itself maintains its value as a symbol collection and the results.
What we have in council proves that makes sense.
I know that it's a bit confusing, but if you look carefully on the results, everything will be obvious.
OK, after that, you are able to use a real push method, but with Aikens array variable, so.
Right, I can see a red dot push.
That hello.
And plug it in, console, right, console the plug icons are right.
Reload and you can see that we have here new item, hello, inside an array.
All right, I'm going to stop here for a while and I would like to recommend you to think about what
I've shown in this video would be great if you tried to test this codes and practice on your own.
Think of new examples and test them, for example, using Dham properties that you are already familiar
with.
I mean, text content and interact HTML.
See you in the next video where we will continue talking about how to access on multiple elements using
other methods.