Now let's dive into some other ways of selecting elements which we haven't used too much thus far
or not at all to be precise and that are the methods for selecting multiple elements.
So let's say I want to select all list items, all li's,
well then we can do this with document query selector all and then the li tag for example.
This will now select all elements on our entire document with an li tag,
so all li's therefore is such a node list now with three list elements as you can tell. If you want
to work with one of them now, you have to use all li's and then access them by index,
so index 0 for the first element for example,
second element, third element,
this would work or of course, you can also use a loop here.
So here in app.js, if I want to get my list item elements let's say and store them in a constant
named like this,
then we can use query selector all and search for li, what I just did in a console
and now if you would want to do something with them, you can go through them with a for/of loop,
for list item of list item elements and therefore maybe here, list item el to make it clear that we're
working with elements here and then here for example, console dir
list item el, like this.
If you do that and you then reload, the script will run and now you'll see that's getting output like
that.
An alternative to this and this is the most modern way of doing that but an alternative would be to
use list item elements and select them by using get elements by tag name
and here, you can also select them like this,
you can access them with a for/of loop, if you now reload we get the same result.
Minor difference which I also already mentioned earlier,
this gives you a live list which reflects changes to the selected elements,
this does not. So I don't mean changes to the elements themselves,
so if I change the text content of one of the list items due to that reference type thing which you
learned about that will be reflected in the objects we selected here
but the list itself, the number of items in the array, that will change here for this selected list
if you add or remove elements, something we haven't learned about yet, it will not for query selector
all because that just takes a snapshot.
The DOM objects themselves, due to being reference values will reflect changes to them,
that is important to know.
So let's now summarize a bit of what we learned thus far,
what we played around with in the console, for example we can select the h1 element with document
get element by ID, since this conveniently has an ID of main title to get access to it like this and
then we can also use this to for example change its text content to some new title,
this would work.
We can also change its styles by accessing the style property and there, color
white and then maybe also the background color,
like this black and here important, background color has to be written like this, with a dash it would
simply be invalid
Javascript, my IDE you already complains here and therefore we have these mappings of the original CSS
property names, which are pretty much the same but dashes are removed and instead characters after
dashes are capitalized.
So that would be one way of selecting elements, if you would want to select a list item,
let's say the last one, we could use query selector for that conveniently and you'll actually use that
a lot because it is really nice to use. So last of type here with a pseudo selector, that would give us access
to the last list item
so that on that list item, we could also change the text on to the content to maybe be the existing text
content even and add something new, change like this,
this here has to be li and if I now save this
and here we reload,
now we see that change title and we see also that changed list item and also nice to know and something
that's easy to forget,
you can also get access to certain elements like the document body with document.body and store
this here and then we can actually also run our query methods except for get element by ID on these
selected elements,
of course not just true for body,
that's just something I wanted to show you because we have a property for getting access to the body
directly on document,
the same is true for head but actually no matter how you selected it, if there is a special property
available on document or not or if you selected it simply with get element by ID or query selector,
on any element you selected,
so on this body but always on this h1 element and so on, you have the query selector and the get elements
by something methods available to dive deeper into that part of the DOM, into that part of the DOM tree
if you will and select child elements. So that's also something you can do.