[Music]
hey what's going on guys so i've been
getting a lot of requests after creating
my html crash course and css crash
course people are asking for a
javascript crash course but i think a
lot of people don't know that i already
have one it's called javascript
fundamentals for beginners uh it's not
actually called javascript crash course
but that's what it is we look at things
like creating variables um
creating arrays and functions and loops
just the basic language fundamentals
alright so if that's what you're looking
for then that's the video to watch and
it's actually in the vanilla javascript
playlist on my channel all right now
what i want to do in this video is go a
little deeper than just show you how to
create variables and and talk about data
types and stuff and show you how to
actually uh work with the dom okay so
select items how to
change styles how to
uh replace content things that you would
do with jquery
but i want to show you how to do it with
vanilla javascript because using jquery
just for dom manipulation and just like
you know changing a style
adding an event things like that is kind
of like using a sledgehammer to kill a
mosquito it's just not needed anymore
we have query selector which is just as
good as using you know jquery selectors
so that's what we're going to do we're
also going to just take a look at the
dom in general we're going to look at
all the some of the the different
properties of the document object
and we're going to do a little exploring
and this is the page we're going to use
to do it with this is just a simple html
page that i created that includes
bootstrap has some bootstrap classes
just to make it look good but it's
basically just a header
and then we have you know a card with a
form and then a list group okay and we
have certain classes and ids and stuff
so that we can select certain elements
all right now in the description you'll
find a link and it will it will include
this the bare html file without any
javascript and then as we move along you
can you can code along with me and add
the javascript i'll also have the final
versions of the code as well alright so
let's go ahead and get started so if you
guys really enjoy my content you feel
like you really get something out of it
consider becoming a patron to push me to
keep bringing you high quality
educational videos showing your support
with even one dollar means the world we
have different perks and tiers including
a two dollar tier that'll give you every
udemy course that i release absolutely
free to learn more check out patreon.com
traversie media
all right so before we get started let's
talk a little bit about what the dom
actually is so it stands for document
object model and it's basically a
structured representation of your html
document okay it can be thought of as a
tree of nodes or elements created by the
browser javascript can be used to
manipulate the dom and its elements the
dom is object oriented meaning that each
node has its own properties and methods
that we can go and we can change and we
can add we can remove things so we can
manipulate at basically everything on
the page using javascript okay jquery
was used to do this for a long time but
it's becoming more and more popular to
use just vanilla javascript for this and
that's what we'll be doing
so you may have seen diagrams like this
around the web now the browser gives us
a window object which
represents the browser itself it's the
top level object
and then we have a root element
inside the document okay so well in the
window we have the document object
basically the the core of the dom and
then we have a root element which is the
html tag or the html element or node
whatever you want to call it and then
inside that we have children like uh
head and body tags okay our head and
body elements nodes and then those have
their own children so we have a title
for inside the head we have titles we
have things like meta tags in the body
we have things like h1s and a tags and
all kinds of stuff and then those tags
those elements they have text nodes so
for instance we may have an h1 with the
text of my header that's also considered
a node
we also have attributes okay connected
to elements for instance we have an
href attribute on an a tag or an a
element so this is this is the dom okay
all of this stuff together
looked at kind of as a a tree like this
is the dom okay
and we can manipulate this stuff with
javascript and that's what we're gonna
do alright so let's go ahead and do it
all right guys so on the left here i
have visual studio code open i'm using
live server if you want to use that you
can just click on extensions and search
for it and install it and that'll make
it so this auto loads every time you
save if i go ahead and i say item
lister1 and i save you'll see that it'll
autoload all right so if you're not
using an extension like this or atom
live server or something like that then
you just have to reload all right but uh
let's go over this real quick so it's
just an index html file this is going to
be included in the description okay and
a link in the description and we just
have a link to bootstrap to the cdn to
version 4. but this doesn't really
matter i just wanted to use it to kind
of give it a nice style
and then down here we just have a header
inside the header we have a container
with an h1 with an id where you have
some bootstrap classes then we have
under the header a container we have a
div with the id of main
uh class of card which gives it this
border around it and then we have an h2
a form with one field and a submit
button and then we have an h2 and then a
ul with the id of items in the class of
list group okay and each list item has a
class of list group item so that's the
dom that that's the
um the html structure that we're going
to be working with we will be adding and
removing a couple things but this is
going to be
the basic page that we work with
all right now down here we have a script
point or pointing to a script called
dom.js
which is right here and is completely
empty and that's what we're going to be
working with all right now guys i'm
going to be moving a little fast here
because this is a crash course
but i'm going to go over the the most
important things as as well as i can
okay so what you want to do is you want
to have your console open so you want to
either hit f12 or go to your your tools
you can go to your developer tools
the the console is also available on
other browsers firefox safari whatever
you're using because we're going to use
this for our output for a while all
right and then once we get into
actually changing things in the dom will
be able to change text and styles and
all that okay
so the first thing i want to do is just
kind of examine the document object okay
so remember in that diagram i showed you
the document is at the top and then
under that we basically have a tree of
elements
so
we can actually type in the console here
javascript if i were to say alert one
it'll actually execute that javascript
in fact everything that we do in our
file here we could do in the console but
i want you guys to have this as a
reference all right that's why i'm doing
it all in the file here
so what we're going to do is we're going
to say console
dot dur
and we're going to pass in the document
object okay so what this is going to do
is it's going to show us all of the
different properties and methods
attached to the the document object all
right so you can see we have like the
url we can access we have
document.all which will give us an array
not an array but an html collection of
everything that's inside of that page
that's inside of that document
there's the document.body which we can
access and all the properties of that so
this is a very large tree of properties
and methods i'm not going to go through
all of this stuff but i do want to show
you some of the the useful stuff
so let's go over here and just um
we'll just comment this out
and let's look at some of the stuff that
we can access through the document
alright so let me put a comment up here
and we're just gonna say
examine i will say examine
the document
object all right
and you guys can use this stuff from
within your scripts when you create a
javascript program you can you can
access the stuff you can edit it it's
not read only if you want to change
anything in the document you can do that
so let's take a look at
uh let me see first of all we'll look at
the domain
so we can say console.log
we can say document we can use our dot
syntax and we can access any of these
properties
so you'll see that there is a
where is it domain right here which is
going to give you whatever domain name
you're running so
if we say document.domain and save
you'll see that we get
127001 which is just basically my
localhost that's the loopback address
all right we can also access
the
url so we'll say
document.url
and save and it gives us basically the
entire page in the entire
all right
another thing you know what i'm just
going to copy
this because we're going to be doing
this quite a bit this console log
document
another thing we could look at is the
title of the page
so we'll say document.title and we get
item lister okay and you'll see the
title is itemlister if i were to go and
change the title over here to let's say
itemlister2 and save now you'll see that
that has changed as well
and this stuff is not just read only we
can change it we could say
document.title
and we can actually set that equal to
we'll say one two three and now you can
see the title has actually changed so
you can change this stuff from your
from your scripts
all right so another thing we can look
at is let's see let's look at the
doctype
so if we say dot
doctype and save you'll see that we're
using excuse me we're using the html5
doctype
all right so we can also look at the uh
let's see the head and body so if we say
document.head
that'll that'll grab the head element
and we're outputting it to the console
and you can see everything that's in the
head and as you could probably guess we
can also do document.body
which will grab the body for us and
output it
all right so another thing we can do is
document.all
so if we do this what it gives us is an
array or an html collection
of everything that is in the dom so if
we go over and we look
uh let's look at our index.html file
you'll see if we go if we start right
here at zero we have our html tag which
is up at the top
okay and then the next one in the one
index is going to be the head then we
have the meta
we have another matter
okay and if we open this we can see all
the different properties of each of
these elements
okay so we can get pretty much anything
we want on that element
and if you go down you'll see the link
okay title then we have the body then we
have the first element in the body is
the header you can see it also has the
id and the classes then we have the
container then we have the title so we
can access any of these okay and we can
specifically access them by their index
so for instance the header title you'll
see as i hover over it it'll it'll it'll
highlight it in the browser let's say we
wanted to grab this and it has an index
of 10
so what we could do is we could say
console.log document
dot all and we could grab the index of
10
and save and it'll actually give us that
h1
all right now
again we can change things based on our
selector now this isn't this isn't the
way that you want to select things i'm
going to show you the specific methods
for selecting things but you could
say
document.all
and then grab
the the index of 10
and say dot
text content
equals
hello and save and you'll see that it
actually changed that in the page but
this this is not the way that you want
to select things
all right for one thing if you add
something this 10 is going to change if
i go
and i go before that and let's say we
add out a span
and we'll just put like a one in here or
something and save
now that span is now the the 10 index
and that's what's hello so you don't
want to use that method of selecting
from the dom all right just to let you
know that
and anything you add into your file here
whether it's in the head or body it's
going to get added to document.all it's
going to get added to that collection
all right so let's see what are some
other things we can look at now let's
say you wanted to get all the forms on
the page you could say
let's do console.log document dot forms
and save
and we're looking right here
if we click this arrow it's basically
going to be a collection of of all the
forms we only have one so we have in the
zero index okay these always start at
zero just like a regular array and then
we have our form and you can get all the
different properties of the form
all right now you can do the same thing
with like links so if you wanted to get
all the links on your page you could say
document.links we don't have any so we
just have an empty array
i say array but it's actually an html
collection
and there is a difference you there are
some there are things like
like let's say you wanted to use dot
reverse which is an array method in
javascript you couldn't do that you'd
have to first change it into an array
okay but you can select items like it's
an array
now if you wanted to select a certain
item like in our form we have our zero
index we could say forms
zero like that and it'll give us that
actual form
all right so hopefully that that makes
sense i'm gonna just comment all this
stuff out
so that this doesn't get too confusing
so what else in addition to links we
could do images
so we can say document.images
and you can get those we don't have any
so we're going to get an empty
collection
what else
i think that's it i mean that's not it
definitely there's more to it you saw
when we did uh console der document
there's a lot of different properties
but i'm not going to go through them all
because we'll be here all day
but those are some of the the
interesting ones
so what about selectors okay so
basically
we have a few different
selecting methods we can use to query
the dom so the first one we're going to
look at is
get element by id which i'm sure you've
heard of
so what we're going to do here is let's
console.log
and let's take a look at our dom or our
structure here
and we have an h1 with the id of header
title
so what we'll do is we'll say document
dot
get element by d
and we know that it has an id of header
title
was it header title or no header dash
title
okay so if we save that you'll see that
it'll actually pull it from the dom and
we're just logging it we can also put it
inside of a variable so if i copy this
and we say
i'm just going to use es5 syntax so
we'll say var
and we'll call this header
title equals and then we'll paste that
in
and save
and actually let's
let's log it
so header title
save and you'll see we get the same
thing now we can do certain things with
this header so we can change the text
so there's certain methods we can use
such as
text content
and we'll just set that to
hello save and that'll change it okay in
addition to text content we also have
inner text
which for the most part does the same
thing let's set this to goodbye
and save and you'll see a change because
we basically just overwrote it we
overwrote this
with this
now the difference or one of the
differences between inner text and text
content is one of them pays attention to
the styling so let me give you let me
show you what i mean
so if we go into our h1 here and we put
in a span
and we'll just say i don't know one two
three
and we'll save
actually if this is going to overwrite
that so let's just uh comment those out
but we get item lister one two three
okay so let's go ahead and console.log
header title dot
uh text content
all right so we get itemlister123 now if
i go to this span and i add a style to
it
of display
none
okay
in the daw and in the page here it's
going to disappear it's going to go away
now text content
is still showing the one two three it's
it's it's disregarding that span even
though it's set to display none it still
shows it here
but if we were to change this to inner
text
and save you'll see that the one two
three is not there okay so it actually
pays attention to the styling so that's
one of the biggest differences between
the two um but you can use them for the
most part pretty interchangeably
all right
so that's that's what text content inner
text we also have inner html which i'm
sure you guys have seen before if you've
worked with javascript at all
so let's say uh header title
and we'll say dot enter
html
equals and let's put an h3
and we'll say
hello
save and now we have an h3 now
if we look at if we look at it through
the inspector you'll notice that the h3
is actually inside the h1 now it doesn't
change the h1 to an h3 it puts the html
inside of that that dom element okay so
that's what inner html does
now if you wanted to actually change it
the h1 2 and h3 you'd have to use some
other methods to access the parent
element and it's a little more advanced
and we'll get to that in a little bit
all right but just keep in mind these
these three methods so text content
inner text and inner html
now we can also do style changes let's
go ahead and save this
all right so we just wanna i'm just
gonna comment this out too so basically
we just have the header title
so if we wanted to change a style like
let's say header title
um and in all of these this text content
inner text the stuff that i'm doing
right now you can use with any selector
not just document dot get element by d
in fact maybe i should have done all the
selectors first and then showed you this
stuff but
you can use this with any with any
selector okay selecting elements and
then using these methods are two
different things
so let's say header title and we'll say
dot style that's how you can change css
styles let's say we want to change the
border
bottom
all right now notice that i used camel
case here because you can't do border
dash bottom
even though this is the the actual css
property you can't do that so you have
to just change it to camel case
all right so let's say we want it to be
solid
3 pixels
and black and save and now you can see
that the h1
has the border
actually i want i want to put that
border on the header so what i would do
if i wanted to use get element by d
we know that the header actually has
an id of main header so let's grab that
instead
our
main dash header
and then we'll just change this to
header
and save and now we have the border on
the actual header
all right so now you should understand
get element by id
text content inner text inner html and
then changing the styles with style dot
whatever the css property
all right
so all stuff that
used to be used with jquery but should
be used with vanilla javascript now you
can see how easy it is
so next thing we're going to do is look
at another selector i'm going to comment
these out too
so we're going to look at getting
elements by class name
okay so let's say get elements
by
class name now notice that it's elements
plural
so this works a little different it's
not like get element by class which
doesn't actually exist
um for that you would use query selector
but i'll get into that in a minute so
get elements by class name let's say we
want to get
all these list items okay so we know
that these list items have a class of
list group item
so let's say
we'll put it in a variable say var
items equals and then we're going to say
document dot get
what am i doing get elements
by class name
and they have the class of list
group
item
okay
so if we go ahead and we console.log
console.log items
what do we get here so what it gives us
is an html collection okay just like
document.all gives us
and each one has an index
okay and you can see if i highlight
hover over one it'll highlight in the in
the browser
so we can access
individual
elements
by saying like items let's say we want
the second one we would use one because
they're zero based
so we'll save and you'll see it'll give
us the item two okay that's in the one
position
so if i wanted to let's say change the
text of that particular item i could say
items dot
uh or not items dot but items
one
dot
text content equals
and we'll say hello
to and save and now you'll see that it
actually says hello to if i wanted to
change the
style let's say items1 dot style
dot
let's do font
weight
can't do that we've got to use camel
case
so font weight
and we'll set that equal to bold
and save and now you can see that we've
we've bolded that that second one here
all right if we wanted to do a
background color for it let's say items
one
and we'll say style dot
background color and we'll set it to
let's say yellow
and there we go
okay so you can see we can we can do a
lot of the same stuff that we did we
could do in jquery now where it gets
tricky is if we want to add a style to
all of these
so let's say we want to give them all a
light gray background
so if we just say items
items dot
style
dot
uh background
color and set it to let's say light gray
and save
that's not gonna work
all right now this isn't going to work
because
it's an it's an html collection or it's
an array we have to actually loop
through it to be able to do this
so what we can do is uh we can iterate
through it with a for loop
so we're going to say
4 we'll create a variable called i
equals 0 and we're going to say as long
as i
is less than items dot length okay dot
length is a property it gets the the
number of items in that array or
collection and then we just need to
increment by one each time and then here
what we'll do
is we'll say
items and we want to get the current
iteration
and then from there we can say dot style
dot
background color equals
our gray color
and save
oh we need to actually comment this out
because this is giving an error
actually let's put a comment right here
we'll just say gives
error
and save and now you'll see that each
one has a gray background now
all right so that is get elements by
class name now we're going to take a
look at get elements by tag name
now this works basically the same way
except instead of getting it by class
you're getting it by tag
so what i'm going to do is i'm actually
going to copy
this whole thing i'm going to copy it
and then i'm going to comment it out
okay we'll paste it here
now let's change the variable to li and
what i want to do is say get elements by
tag name
and then just pass in here li so it's
going to grab all the allies on the page
and then let's console log li
we can get each li
by its
by its index
so let's change this to li so this
should basically do the same exact thing
we're just not using the class we're
using the li
and then down here we can loop through
it works the same way so li dot length
save let's save it and it does the same
thing
all right
now if i were to add another list item
here
so let's add a list item
and we'll just say item
5
and save
now even though i don't have a class of
list group item it still applies because
it's an li it's going by the tag not by
the class
if i were to just do it by the class
like i did up here then
then that would have this would have no
effect all right let me just show you
what i mean so if i comment that out
and we uncomment this and save
you'll see that now that this stuff
nothing's being applied this this um
gray background and all that is not
applying to this because it doesn't have
that class
all right so hopefully that makes sense
all right so let's get element by tag's
name i'm not going to spend too much
time on it because it's
identical to the class name
now what i want to do is look at query
selector alright so this is an important
one so query selector
so for this um this works pretty much
just like jquery
okay the only big difference is it's it
only work you're only you'll use it only
for one item okay
um if you want to use more than one item
then you're going to use query selector
all which i'm going to go over in a
second as well
all right so and it only affect it only
grabs the first one so if we try to grab
let's say the class of title and there's
more than one title on the page it's
going to grab the first one
so let's go ahead and save this and
let's get rid of that extra li we added
all right so we'll save that
and we're going to say let's say var
header
and we're going to say document
dot
query
selector
and we can use anything we want in here
so we can use tags you could grab a list
item you could grab a class okay so you
could say dot header
you can use any css selector just like
you could with jquery okay so just
replace
the jquery money sign like that with
documents document.queryselector
so if we want to grab the header for
instance it has an id
of main header so make sure you use that
hash right there
all right and then we could say header
dot style dot
border bottom
we'll set it to solid
4 pixels and gray
save and now you can see it has that
that border
all right so another thing we could
select is let's grab the input we
haven't done anything with that input
form so let's say var input
and let's set this to document
dot
query selector
and we want to grab the input
and we'll say input dot
value equals
hello world and save
and you can see now we've actually added
a value to that input
now even though there's two inputs on
the page because this this button
this is actually an input as well
it only grabbed the first one okay so
it's going to grab the first one by
default
now with query selector we can use any
css selector so what i'm going to do now
is i'm going to say var
submit
and let's set this to document dot
query selector
and instead of just input let's use the
input and then brackets and we can say
the type
equals
submit okay just like we could do in css
this should actually be in quotes though
all right so if we do that
and then we say submit dot value
and let's see we'll change it to send
and save and now you can see we've
actually changed the button to send
all right so what about these list items
what if we were to say var item
and send it set it to document dot
query selector
and we put in here a class
of list
what is it list group item
all right
um and then let's say item
dot color not color item dot style dot
color
equals
red what happens it's gonna get the
first one on the page
all right now let's say we wanted to get
the last one we could use the uh the see
the css
last child okay so we'll say var
and let's say last item
actually i'll just copy this
so we'll say
last item and we'll select list group
item colon
last child
and then let's say
last item dot style dot color
equals
blue
and save and you'll see that now the
last one is blue
all right we could also use our nth
child so let's say we want to grab the
second one so we'll say second item
and we'll change this to let's say nth
child
2
and then we'll change this to second
item
and we'll change it to let's say i don't
know coral
and save
uh wait a minute
and
oh forgot the the dash
there we go so now the second one is
coral
okay so we can use these css uh pseudo
classes or pseudo selectors whatever
they're called
all right so what about
query selector all let's take a look at
that
so query selector all works similar to
like get elements by tag name get
elements by class name it's going to
grab more than one thing
so what i'm going to do here is create a
variable
um let's see
i think we have two title classes yeah
we have h2 class title and h2 class
title here so let's grab both of those
so we'll say titles
equals
document dot
query
selector all
and we want to get and we can put
anything in here classes ids just tags
anything so we're going to say class
title
all right and then let's go ahead and
console.log
titles
all right i'm just going to comment all
this stuff out
okay so that gives us what's called a
node list which is similar to a
collection
except we can actually run array
functions on a node list
so zero is going to be the first title
which is that add items and then one is
the items and of course we can access
these like this we could say titles
xero
dot text content
equals
hello and we'll save and we'll change it
that way all right
now another thing that
used to be really hard to do with
vanilla javascript would be to let's say
alternate
uh let's say we want each other one to
be gray to have a gray background but we
can do that with query selector all so
what we'll do is we'll create a variable
called odd
right we'll set it to document dot
query selector all
we're going to use the
we're going to say li
and let's use nth child
and we'll pass in here odd okay now this
is a css selector this is a pseudo
selector
so we're grabbing all the odd ones
and then what we'll do is we'll loop
through we'll use a for loop
and we'll say 4
var
i equals 0
as long as i is less than
odd dot length
and let's say we just want to increment
by one
and then down here what we'll do is
we'll say odd we'll take the current
iteration and we'll say dot style dot
background
color
and we'll set that to light gray
and save and now every other one is
light gray
right if we wanted to do even we could
go ahead and
set this to even and then for the
selector we'll just do nth child even
and we'll go ahead and copy that
let's say even
and we'll change the color let's say to
a darker gray
and there we go
alright so we can do things like that in
vanilla javascript pretty damn easily
all right guys so i'm realizing that i
still have quite a bit that i want to
cover
we went over all of the selectors so i
think that this is going to be a good
place to stop for this video and we're
going to have to turn this into a little
series uh maybe one or two more videos
because i want to get into traversing
the dom i want to show you how we can
move like up how we can get parent nodes
and and child nodes how we can use
events
okay i want to show you how we can use
mouse and keyboard events things like
that how we can change the dom with
those events so there's quite a bit more
that i want to do so i'm going to stop
the video here and i will see you in the
next part