"Swift 2.0 Protocols" was retired on May 31, 2020. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
This video covers one solution to the challenge.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up