Preview
Video Player
00:00
00:00
Select Elements by Class Name
3:48When working with HTML, you'll often set class attributes on elements and apply styles to them with CSS. The document object provides a way to select elements in the DOM with a given class name with document.getElementsByClassName().
Often when working with HTML, you'll
set class attributes on elements and
0:00
apply styles to them with CSS.
0:05
The document object provides a way for
us to select elements in the DOM
0:08
with a given class name with
document.getElementsByClassName.
0:12
In index.html, let's add a class
attribute to some of the items
0:17
in the unordered list and
set it to the class name, highlight.
0:22
It could be any item,
I'll add it to the second list item,
0:27
then the fifth and the sixth item.
0:32
I'll save this file, and
next select them with JavaScript.
0:38
In app.js,
declare a new variable named highlights
0:46
to reflect what we'll assign to it,
0:51
then get all elements that
have a class of highlight with
0:54
document.getElementsByClassName and
pass it the string highlight.
0:59
I'll save my file, refresh the browser,
and in the browser console,
1:09
I'll reference the variable, highlights.
1:15
Notice that the getElementsByClassName
method also returns an array
1:19
like HTMLCollection.
1:24
It contains each element
with the given class,
1:25
highlight, in the order
they appear on the page.
1:28
You can directly access any of these
elements, like we did earlier,
1:31
using an index value and bracket notation.
1:35
If you want to access and do something
with the elements all at once, you'll also
1:38
need to iterate through the HTMLCollection
and change each element one by one.
1:42
You could do this using a for loop.
1:48
This time I'll teach you a different kind
of JavaScript loop you can use to iterate
1:50
through arrays or array like objects.
1:54
It's called the for-of loop.
1:57
It looks similar to a for
loop, only more compact.
1:59
Within the parentheses,
2:04
you provide a variable that represents the
current item being processed in the loop.
2:06
This is similar to the index
variable in a for loop.
2:12
I'll name it highlight, follow
the variable with the keyword, of, and
2:15
the name of the array or
collection you're looping over.
2:20
In this case, the HTMLCollection
assigned to the highlights variable.
2:24
Inside the curly braces,
you provide a statement or
2:30
action to be carried out for each
element that gets passed into the loop.
2:33
Now what might we do
with each highlight item?
2:38
Well, normally you might hide or
expand selected elements,
2:41
remove them, or
perhaps change them to fit some criteria.
2:45
For now, let's just set a new background
color with JavaScript to show that
2:49
our selection is working.
2:52
Within the for-of loop body,
2:54
I'll access the current
element assigned to highlight,
2:57
then set its background color
style to 'cornsilk' with
3:03
dot style.backgroundColor
equals the string 'cornsilk'.
3:08
This for-of loop looks a whole lot more
compact than a for loop, doesn't it?
3:18
And remember, you can use it with
regular JavaScript arrays too.
3:23
Check the teacher's notes
to learn more about it.
3:26
I'll save my file.
3:28
And switching back to the browser and
refreshing the page,
3:31
displays the cornsilk background
colors for the highlighted items.
3:34
Good, this means that
the selection worked.
3:38
All right,
up next I'll show you a more powerful and
3:41
flexible way to select
elements in a document.
3:44
See you there.
3:46