1
00:00:02,290 --> 00:00:08,770
Now to query elements or nodes and I kind of use this term interchangeably, though I will come back

2
00:00:08,770 --> 00:00:10,990
to the difference in a few seconds

3
00:00:10,990 --> 00:00:16,810
but to query content let's say in your HTML page, I mean in your rendered HTML page

4
00:00:16,810 --> 00:00:21,670
so in the DOM, you have a couple of methods which you can use on that document object

5
00:00:21,670 --> 00:00:23,860
I showed you a few minutes ago,

6
00:00:24,040 --> 00:00:28,910
most importantly you got query selector and get element by ID.

7
00:00:29,140 --> 00:00:32,010
These methods will select one element at a time,

8
00:00:32,110 --> 00:00:39,610
you also have query selector all and other methods like get elements by tag name which will select multiple

9
00:00:39,610 --> 00:00:44,890
elements. So you can get access to single elements with query selector and get element by ID

10
00:00:45,370 --> 00:00:51,310
and these are simply different ways of querying elements. Query selector takes a CSS selector as you could

11
00:00:51,310 --> 00:00:57,670
use it in a CSS file, even pseudo selectors are supported and gives you therefore a lot of flexibility

12
00:00:58,090 --> 00:01:05,050
and power when it comes to selecting elements with complex query in your DOM. Get element by ID on

13
00:01:05,050 --> 00:01:09,910
the other hand takes an ID which you might have assigned to an HTML element and selects an element

14
00:01:09,910 --> 00:01:13,100
by that and since ID should be unique on your web page,

15
00:01:13,120 --> 00:01:18,790
this is a method which returns one element. The query selector method takes any CSS selector and

16
00:01:18,790 --> 00:01:24,100
therefore this might be a selector that matches multiple elements but in this case, query selector, this

17
00:01:24,100 --> 00:01:28,450
method will always give you access to the first matched element on the page, 

18
00:01:28,450 --> 00:01:29,760
so in the DOM.

19
00:01:30,130 --> 00:01:34,480
So this gives you a direct reference to the DOM element which it found,

20
00:01:34,480 --> 00:01:39,490
now query selector all, get elements by tag name and there are other methods as well which I'll show

21
00:01:39,490 --> 00:01:44,010
you give you access to collections of elements, array-like objects,

22
00:01:44,050 --> 00:01:49,420
typically a node list, though that also is not always the case but typically it's such a node list which

23
00:01:49,420 --> 00:01:56,110
is not a real array but array-like, so which supports certain behaviors of an array but not all of them.

24
00:01:57,140 --> 00:02:03,830
You have different ways of querying elements, you can for example use the above methods - query selector

25
00:02:03,860 --> 00:02:11,210
all takes a CSS selector as query selector but unlike query selector, it does not return the first element

26
00:02:11,240 --> 00:02:17,510
which it matched but all elements that match the selector. Get elements by tag name give you all the

27
00:02:17,510 --> 00:02:22,820
elements that have a certain HTML tag and then there are other selectors to select by class name

28
00:02:22,850 --> 00:02:28,490
or by the name attribute which you might have assigned, though the query selector all method is the most

29
00:02:28,490 --> 00:02:34,100
flexible one where you have the power to select anything you want by CSS selectors.

30
00:02:34,100 --> 00:02:38,990
Now one important difference here which I want I mention right away which often will not matter but

31
00:02:38,990 --> 00:02:45,990
still is worth being mentioned is that query selector all will give you a non-live node list,

32
00:02:46,010 --> 00:02:55,400
so a snapshot of the currently rendered DOM, whereas these get something by something methods like get elements

33
00:02:55,400 --> 00:03:00,950
by tag name return a live node list which means that if you then add or remove elements which we'll

34
00:03:00,950 --> 00:03:08,480
also learn throughout this module, you'll see that reflected in the list which you loaded through the get something

35
00:03:08,480 --> 00:03:13,760
by something method, it will not be reflected in the data returned by query selector all but again, that's

36
00:03:13,760 --> 00:03:18,690
something we can come back to later once we learned how to add and remove elements, for now let's ignore

37
00:03:18,690 --> 00:03:24,080
that. Before we try these methods though and play around with them a bit to get a feeling for how you

38
00:03:24,080 --> 00:03:30,470
select things, let's dive into nodes and elements. I kind of use these terms interchangeably but actually

39
00:03:30,470 --> 00:03:34,330
should be careful and you should at least understand what the difference is.

40
00:03:34,430 --> 00:03:41,060
So you have nodes and elements and nodes are the objects that make up the DOM, everything in the DOM

41
00:03:41,060 --> 00:03:48,350
is a node. HTML tags are just element nodes as I mentioned, I will also refer to them as just elements

42
00:03:48,380 --> 00:03:54,140
but in the end, these are element nodes to be super precise. We also have for example text nodes and there

43
00:03:54,140 --> 00:03:59,000
are other nodes as well which aren't really that important though and which with you'll not really work. 

44
00:03:59,480 --> 00:04:03,800
Attached, you will find a thorough document about all supported nodes but text nodes and element nodes

45
00:04:03,800 --> 00:04:05,630
are the important ones.

46
00:04:06,020 --> 00:04:10,550
Now elements therefore are in the end just element nodes as I just explained,

47
00:04:10,550 --> 00:04:16,580
so elements are really just the nodes which are created off of HTML tags which were rendered, not the

48
00:04:16,580 --> 00:04:18,000
text in there.

49
00:04:18,020 --> 00:04:19,250
Now why does this matter?

50
00:04:19,250 --> 00:04:25,340
Because on element nodes, on elements therefore, you have special properties and methods to interact

51
00:04:25,340 --> 00:04:30,890
with the elements, to change their style, to change their content and so on. You also have special properties

52
00:04:30,890 --> 00:04:36,590
on methods and text nodes but you simply don't work with text nodes as often as you will work with elements

53
00:04:36,830 --> 00:04:41,570
because typically you want to add a new HTML element, you want to remove one, you want to change the

54
00:04:41,570 --> 00:04:47,240
style of one, you want to edit it in any other way. For text, you typically just want to change the text

55
00:04:47,270 --> 00:04:52,970
and then you typically just go to the elements that holds the text and change the child content which

56
00:04:52,970 --> 00:05:00,290
is the text of that element, which is why you don't work with text nodes as often. So which exact properties

57
00:05:00,290 --> 00:05:02,530
and methods are available on every element,

58
00:05:02,600 --> 00:05:06,440
so on every rendered HTML tag depends on the kind of element though,

59
00:05:06,440 --> 00:05:13,260
for example on the input where the user can enter content, you have ways of reading that input, on other

60
00:05:13,260 --> 00:05:20,060
elements where users just can't edit the content, you don't have access to that of course and you have

61
00:05:20,060 --> 00:05:23,630
different ways of selecting elements,

62
00:05:23,630 --> 00:05:30,380
as I mentioned we'll learn about different methods that give us access and you can also create and remove

63
00:05:30,380 --> 00:05:36,420
them with the help of Javascript. So that's the difference between nodes and elements, elements are the

64
00:05:36,450 --> 00:05:37,890
important thing for us here,

65
00:05:37,890 --> 00:05:44,370
text nodes are most of the time just created automatically when you set the text content of an

66
00:05:44,370 --> 00:05:46,570
element to a new text content for example

67
00:05:46,650 --> 00:05:48,740
but again it is something we'll come back to.

68
00:05:48,870 --> 00:05:53,130
Let's now try out some of these query methods to get a feeling for how they work.