1
00:00:00,620 --> 00:00:05,480
In this lesson, we're going to be reviewing the relationships between elements, so looking at element

2
00:00:05,480 --> 00:00:11,330
children, element siblings and then element parents and how we can traverse through the different element

3
00:00:11,510 --> 00:00:17,150
and before between the dormitory in order to select multiple elements and different elements.

4
00:00:18,040 --> 00:00:24,730
In regards to their relationship to other elements, so we know that JavaScript has children and within

5
00:00:24,730 --> 00:00:30,160
the parent node Property Children is a read-only property that returns Alive Live HTML collection,

6
00:00:30,460 --> 00:00:37,750
which contains all the child elements of a node upon which it is called so HTML collection versus node

7
00:00:37,750 --> 00:00:38,170
list.

8
00:00:38,350 --> 00:00:39,240
So node list.

9
00:00:39,280 --> 00:00:40,570
They both have length.

10
00:00:40,570 --> 00:00:45,930
So you can see that when we select the child nodes, this is a node list.

11
00:00:45,940 --> 00:00:49,480
When we do element children, this is an HTML collection.

12
00:00:49,480 --> 00:00:51,580
So there is a difference between the two.

13
00:00:51,790 --> 00:00:57,820
There's more information between children that they have an example at the Mozilla Developer Network

14
00:00:58,030 --> 00:01:04,990
so we can select an element and we can loop through iterate through all their children using typical

15
00:01:04,990 --> 00:01:05,840
for loop.

16
00:01:05,920 --> 00:01:10,720
Let's make a selection of one of the elements on the page will select this one, which is a div with

17
00:01:10,720 --> 00:01:11,740
a class of first.

18
00:01:11,920 --> 00:01:16,600
So it's got a lot of siblings, it's got a parent and it's got some children that are contained within

19
00:01:16,600 --> 00:01:16,720
it.

20
00:01:16,750 --> 00:01:23,710
So first, selecting our element using document query selector and we're selecting the div with a class

21
00:01:23,710 --> 00:01:30,580
of first three using a CSR style selector and then we can consult directory the element into the console

22
00:01:30,580 --> 00:01:32,580
so we can take a closer look at what's available.

23
00:01:33,100 --> 00:01:35,260
So this is the element that we've selected.

24
00:01:35,260 --> 00:01:38,080
So that is referring to this first one here.

25
00:01:38,380 --> 00:01:43,600
As we look through the element, there's a lot of information that's being returned, of course, and

26
00:01:43,600 --> 00:01:50,800
we've got child nodes where there's 15 of them and there's children where there's only seven of those.

27
00:01:51,010 --> 00:01:58,300
And so the children are all referring to the different elements that are contained within that particular

28
00:01:58,300 --> 00:02:03,370
element, that particular parent that we've selected and the child nodes include everything.

29
00:02:03,580 --> 00:02:05,290
So it includes all of the text.

30
00:02:05,410 --> 00:02:09,430
It includes all of the spaces between them, spaces between them.

31
00:02:09,430 --> 00:02:13,750
Within the HTML document, you're going to see that we get quite a bit less.

32
00:02:14,110 --> 00:02:18,640
So all of these are the spaces that are being included in that node list.

33
00:02:19,060 --> 00:02:27,430
And if we go through and delete the out refresh and go back into the list, you can see now the node

34
00:02:27,430 --> 00:02:33,480
list only has ten and we've got reduced significantly some of the spaces that were available there.

35
00:02:33,940 --> 00:02:40,870
We can also output that element, see the information, taking the elements, selecting the children

36
00:02:40,870 --> 00:02:41,770
of that element.

37
00:02:42,250 --> 00:02:45,610
You can list out the HTML collection by selecting the children.

38
00:02:45,940 --> 00:02:51,790
And then if you want to see the child nodes, you can select the out by the child node election as well

39
00:02:51,790 --> 00:02:54,760
as the node list have length values.

40
00:02:54,970 --> 00:02:58,030
So that means that you can use a for loop to loop through them.

41
00:02:58,270 --> 00:03:04,030
So how about we open up our editor and I'll show you how we can add and loop through all of the elements

42
00:03:04,030 --> 00:03:07,360
that are available, all of the children that are available within the element.

43
00:03:08,050 --> 00:03:15,640
So setting up a for loop and then looping while children length because we've got that length value

44
00:03:15,640 --> 00:03:20,740
within that object, incrementing it by one and console log.

45
00:03:21,280 --> 00:03:28,180
And then we just have to provide the I value and we can also get the text content so we can select those

46
00:03:28,180 --> 00:03:31,480
elements that are contained within the parent within this format.

47
00:03:31,720 --> 00:03:35,740
And we can see the information of each element as we iterate through.

48
00:03:36,100 --> 00:03:39,820
So let's do the same thing for the child nodes as well.

49
00:03:40,180 --> 00:03:46,510
So update this to child nodes node and there is going to be a difference between the two and there are

50
00:03:46,510 --> 00:03:49,360
different reasons why you would use one or the other one.

51
00:03:50,050 --> 00:03:55,270
So when we refresh, you can see for the most part, when we loop through, it's going to look the same.

52
00:03:55,960 --> 00:04:01,870
And also notice as well that as we're looping through so we get some more spaces with the child nodes.

53
00:04:02,170 --> 00:04:08,920
That's because it's including, of course, the spacing that we had and using for each to loop through

54
00:04:08,920 --> 00:04:16,300
each one of the items within the list, get a function and we can get its value back as an element.

55
00:04:16,420 --> 00:04:19,630
And for now, we'll just cancel log with element.

56
00:04:19,990 --> 00:04:26,710
So we see that for each is not a function for children, but you are able to use it with child nodes.

57
00:04:26,950 --> 00:04:32,830
So that's one of the differences between the two that you are able to do a for each with the child nodes.

58
00:04:33,100 --> 00:04:35,710
And as you can see, that they do get listed out there.

59
00:04:35,710 --> 00:04:37,810
So we do get all of those element values.

60
00:04:38,140 --> 00:04:44,020
So I know we've got quite a few going on here, but it is listing them out afterwards so that one worked

61
00:04:44,020 --> 00:04:46,900
and the children only works with the for loop.

62
00:04:46,900 --> 00:04:47,740
So keep that in mind.

63
00:04:48,100 --> 00:04:49,750
We can also navigate up.

64
00:04:49,760 --> 00:04:53,330
So once we've got the element we can traverse through.

65
00:04:53,330 --> 00:04:57,070
So not only the children, we can also get some parent information.

66
00:04:57,070 --> 00:05:00,940
So we've got parent element, we also have the parent node.

67
00:05:01,330 --> 00:05:03,000
And in this case it's the same thing.

68
00:05:03,010 --> 00:05:07,000
So the only parent for that particular element is the body.

69
00:05:07,630 --> 00:05:10,540
And that's the one, of course, that contains the element that we're looking at.

70
00:05:11,050 --> 00:05:17,500
We're also able to see siblings, so we're able to see next element sibling so we can see the next element.

71
00:05:17,720 --> 00:05:24,680
That's in line to our element that we're looking at is this paragraph, so we look at our HTML, this

72
00:05:24,680 --> 00:05:26,090
is the element that we selected.

73
00:05:26,420 --> 00:05:28,260
The next sibling is first.

74
00:05:28,280 --> 00:05:30,140
So that's being represented here in the list.

75
00:05:30,770 --> 00:05:31,950
Next sibling.

76
00:05:32,000 --> 00:05:36,710
So that's going to be slightly different where it's returning back that text spacing there.

77
00:05:36,980 --> 00:05:39,290
So there's it's a different type.

78
00:05:39,310 --> 00:05:41,780
So there's just a written character there.

79
00:05:42,110 --> 00:05:44,270
That is the next one between the two.

80
00:05:44,540 --> 00:05:48,400
And that's this space here, because remember, this is an.

81
00:05:49,780 --> 00:05:55,090
Just looking at that element, siblings, so this is again looking at the nodes as opposed to looking

82
00:05:55,090 --> 00:05:58,340
at the four elements that next element sibling is looking at.

83
00:05:58,600 --> 00:06:04,150
So even though they sound the same, there are subtle differences between them as to what value is going

84
00:06:04,150 --> 00:06:07,810
to be returning back in the same thing with previous elements, siblings.

85
00:06:07,810 --> 00:06:08,840
So it works the same way.

86
00:06:09,520 --> 00:06:15,760
And then there's previous sibling is just going to be that text space again, because this one here

87
00:06:15,790 --> 00:06:17,920
also has a return that's available.

88
00:06:18,040 --> 00:06:23,050
And if there was no return, there's no spacing in your HTML, then you're simply going to get back

89
00:06:23,050 --> 00:06:24,340
whatever the next node is.

90
00:06:24,340 --> 00:06:25,300
And that would be the diff.

91
00:06:25,660 --> 00:06:31,270
So now it's time for a challenge to select some elements, navigate to their siblings and output the

92
00:06:31,270 --> 00:06:32,780
element into the console.

93
00:06:33,130 --> 00:06:39,010
So we've got the default that we were looking at and you can use the various methods that we've seen

94
00:06:39,100 --> 00:06:41,830
in order to navigate and output content.

95
00:06:41,950 --> 00:06:45,040
Also loop out the contents of their children.

96
00:06:45,430 --> 00:06:50,110
You can output the text content, as we did try to for yourself, and you could be ready to move on

97
00:06:50,140 --> 00:06:51,250
to the next lesson.