Using Console.dir

Modern JavaScript Manipulating HTML Pages
4 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€96.50
List Price:  €135.10
You save:  €38.60
£80.63
List Price:  £112.89
You save:  £32.25
CA$145.40
List Price:  CA$203.56
You save:  CA$58.16
A$160.60
List Price:  A$224.84
You save:  A$64.24
S$135.71
List Price:  S$190
You save:  S$54.29
HK$779.02
List Price:  HK$1,090.66
You save:  HK$311.64
CHF 91.07
List Price:  CHF 127.50
You save:  CHF 36.43
NOK kr1,131.84
List Price:  NOK kr1,584.63
You save:  NOK kr452.78
DKK kr720.12
List Price:  DKK kr1,008.20
You save:  DKK kr288.08
NZ$177.35
List Price:  NZ$248.29
You save:  NZ$70.94
د.إ367.25
List Price:  د.إ514.17
You save:  د.إ146.91
৳12,188.62
List Price:  ৳17,064.56
You save:  ৳4,875.93
₹8,668.86
List Price:  ₹12,136.76
You save:  ₹3,467.89
RM445.45
List Price:  RM623.65
You save:  RM178.20
₦154,534.54
List Price:  ₦216,354.54
You save:  ₦61,820
₨27,879.70
List Price:  ₨39,032.69
You save:  ₨11,152.99
฿3,378.86
List Price:  ฿4,730.54
You save:  ฿1,351.68
₺3,569.61
List Price:  ₺4,997.60
You save:  ₺1,427.98
B$584.14
List Price:  B$817.82
You save:  B$233.68
R1,866.90
List Price:  R2,613.74
You save:  R746.83
Лв188.62
List Price:  Лв264.07
You save:  Лв75.45
₩145,763.42
List Price:  ₩204,074.62
You save:  ₩58,311.20
₪357.35
List Price:  ₪500.30
You save:  ₪142.95
₱5,841.51
List Price:  ₱8,178.35
You save:  ₱2,336.84
¥15,518.95
List Price:  ¥21,727.15
You save:  ¥6,208.20
MX$2,068.09
List Price:  MX$2,895.41
You save:  MX$827.32
QR364.35
List Price:  QR510.10
You save:  QR145.75
P1,392.18
List Price:  P1,949.11
You save:  P556.93
KSh12,918.70
List Price:  KSh18,086.70
You save:  KSh5,168
E£5,022.22
List Price:  E£7,031.31
You save:  E£2,009.09
ብር12,803.60
List Price:  ብር17,925.55
You save:  ብር5,121.95
Kz91,190.88
List Price:  Kz127,670.88
You save:  Kz36,480
CLP$98,322.16
List Price:  CLP$137,654.96
You save:  CLP$39,332.80
CN¥718.60
List Price:  CN¥1,006.08
You save:  CN¥287.47
RD$6,174.95
List Price:  RD$8,645.18
You save:  RD$2,470.23
DA13,530.14
List Price:  DA18,942.73
You save:  DA5,412.59
FJ$232.27
List Price:  FJ$325.18
You save:  FJ$92.91
Q773.17
List Price:  Q1,082.46
You save:  Q309.29
GY$20,911.70
List Price:  GY$29,277.22
You save:  GY$8,365.51
ISK kr14,154.58
List Price:  ISK kr19,816.98
You save:  ISK kr5,662.40
DH1,003.31
List Price:  DH1,404.68
You save:  DH401.36
L1,852.87
List Price:  L2,594.10
You save:  L741.22
ден5,931.41
List Price:  ден8,304.21
You save:  ден2,372.80
MOP$802.33
List Price:  MOP$1,123.30
You save:  MOP$320.96
N$1,865.71
List Price:  N$2,612.07
You save:  N$746.36
C$3,678
List Price:  C$5,149.34
You save:  C$1,471.34
रु13,845.50
List Price:  रु19,384.25
You save:  रु5,538.75
S/371.83
List Price:  S/520.58
You save:  S/148.74
K406.99
List Price:  K569.80
You save:  K162.81
SAR375.03
List Price:  SAR525.05
You save:  SAR150.02
ZK2,796.22
List Price:  ZK3,914.82
You save:  ZK1,118.60
L480.09
List Price:  L672.14
You save:  L192.05
Kč2,431.78
List Price:  Kč3,404.59
You save:  Kč972.81
Ft39,351.06
List Price:  Ft55,093.06
You save:  Ft15,742
SEK kr1,109.56
List Price:  SEK kr1,553.44
You save:  SEK kr443.87
ARS$105,082.91
List Price:  ARS$147,120.28
You save:  ARS$42,037.36
Bs690.69
List Price:  Bs967
You save:  Bs276.30
COP$415,849.38
List Price:  COP$582,205.77
You save:  COP$166,356.39
₡50,420.04
List Price:  ₡70,590.08
You save:  ₡20,170.03
L2,546.27
List Price:  L3,564.89
You save:  L1,018.61
₲788,391.22
List Price:  ₲1,103,779.24
You save:  ₲315,388.02
$U4,333.83
List Price:  $U6,067.53
You save:  $U1,733.70
zł406.63
List Price:  zł569.29
You save:  zł162.66
Already have an account? Log In

Transcript

We've now done a few videos on how you can select nodes in different ways from the DOM. We've also as a part of those videos, changed some of the attributes of those nodes just to show you what's possible. We haven't gone into detail of what can be changed. But we have shown you a few things. Well, you may be asking yourself, Well, how do I know what I can change and what I can't change what's even available with a particular node to change? Well, in this movie, we're going to take a few minutes just to teach you a console command that would allow you to display the different attributes that are part of a node element.

So I'm going to go to the same page I was using in the last video. In the last video, we selected all the span tags, which is the part that is causing the ID the tagging and CSS class to be blue because there is a CSS class associated with a span tag. So let's select those again. And then let's look at a command that's available on the console for you to be able to display the properties or attributes that are associated with a node. So let me open the console. I'm going to do the same command, where I select by tag name, all the span tags.

Now, as we saw in the previous video, I can type in that variable and I can see what's been selected, but I don't have a lot of details about those. I can also do a console dot log and display one of them. I'll select the first one in this case. And that displays a single no that we've selected. But what if I want to get more Details while there is a console dot Dir. Or you can just type dir as well let me do console dot dir first.

And then we will select also the first one. And notice it provides and icon for opening up and exploring that node. Okay, now as I mentioned, we can just do dir as well. So that's another way to accomplish the same thing when you're in the console. Obviously, if you were doing this from outside the console from a JavaScript page, then you will need to enter console dot Dir. So now let me just show you what's available as a part of this expanding node.

It basically lists all the properties that are associated with the node. So you can scroll down through here and see that there are a number of things. Notice here is hidden. This is one of the properties we've been dealing with here is ID, the ID is not set for this particular node. There are a lot of different properties that are available. Here a bunch of events which we have not discussed yet.

One I want to touch on before we finish this video is this style. We've covered that in a little bit of detail. I think we've done two or three attributes of the style. But notice when you come to the style inside of this node, it opens up again. And inside of there, you can see all of the different things you can change about the style So as you can see, there are a lot of possibilities. And this tool the DIR command is simply a tool to help you discover what's available.

What you can change with JavaScript. So use it to learn about the properties associated with individual nodes that you may select from within the DOM. Alright, let's continue with the next topic.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.