Preview
Video Player
00:00
00:00
One Solution
4:49This video covers one solution to the challenge.
Hey there, were you able to complete
the selecting DOM elements challenge
0:00
successfully?
0:03
If not, that's okay you can compare
my solution to what you wrote and
0:04
then try to recreate it yourself.
0:07
So first step,
to select the element with the ID
0:09
about I used document.getElementById.
0:14
Remember, document or the document object,
is what we can use to select and
0:18
control elements of
the currently loaded webpage.
0:23
So I used the getElementById
method on the document object,
0:25
passed it the string about.
0:31
Which returns the div element with the ID
about and assigning that to the about
0:33
variable or constant applies the 2
pixel solid firebrick order styles.
0:38
Next, to select all the h2
elements in the document.
0:50
I use the getElementsByTagName
method which searches for
0:55
elements by tag name and returns
a collection of the selected elements.
1:00
So this returns a list of
all the h2 in the document,
1:04
which I stored in the variable h2.
1:08
And to set there color
to a different color,
1:11
I had to iterate over all
of the h2's in a for loop.
1:14
The loops cycles through the exact
length of the h2 collection,
1:18
and then to access each item in
the collection I'm using the i or
1:23
index variable in square
brackets on the h2 variable.
1:27
And style.color to set each of
the selected h2's color to slateblue.
1:32
After that I selected all
elements with the class card with
1:45
the getElementsByClassName method,
which targets all elements
1:50
with the same class and
I assign them to the variable card.
1:56
Like getElementsByTagName,
2:01
getElementsByClassName returns a
collection of elements with a given class.
2:03
So to set their background color,
I once again used a for
2:08
loop to iterate over the collection
of elements with the class card.
2:11
And used style.backgroundColor
to set their
2:17
background color property
to the value seashell.
2:19
Next, step four asked you to select
only the first ul in the document,
2:30
and store it in a variable named ul.
2:36
To do that, I used the query Selector
method which returns only the first
2:39
element in the document that
matches the specified selector.
2:44
So in this case, the ul element selector.
2:48
And this is going to set its border
style to 2 pixels solid indigo.
2:52
Next, to select only the second
element in the document
3:03
with the class container,
I first used getElementByClassName.
3:08
To return a collection of all
elements with a class container.
3:14
And the returned collection
is kind of like an array.
3:18
So that means you can access an element in
the collection directly using its index.
3:20
So I need to access the second
element with the class container.
3:25
So I defined an index of one and
3:29
assigning it to a variable named container
sets its background color to royalblue.
3:31
Finally, to select only the anchor
elements that have a title attribute.
3:46
I used the querySelectorAll method,
3:52
and this returns all elements that
match the specified selector.
3:55
In this case, an attribute selector that
targets a tags with a title attribute.
3:59
I assigned those to
the variable titleLink.
4:05
And since querySelectorAll also returns
a node list of all the matching elements,
4:09
I had to loop over the whole
list to access all of them.
4:14
And in the loop, I set each element's
color style to the value salmon.
4:18
All right, so
4:26
I hope you were able to complete
this practice session successfully.
4:26
If you didn't get all of them,
that's okay.
4:30
Why not start over and try it again
without looking at my version.
4:32
You're also going to get plenty of other
opportunities to work with these methods
4:35
all throughout our JavaScript courses and
workshops.
4:39
So thanks everyone and happy coding.
4:42