#100DaysOfWeb in Python Transcripts
Chapter: Days 25-28: JavaScript Introduction
Lecture: The Document Object Model (DOM) - targeting elements
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Welcome back to day three of JavaScript Introduction. I hope you liked the exercises of yesterday. I hope you learned a lot.
0:15
I hope you had fun guessing a number. I hope it was straightforward to sum some numbers and define a range function as well. And some food objects
0:32
looping through the array of those objects. Today, I'm excited to teach you about the Document Object Model, or DOM. So what is the DOM?
0:44
The Document Object Model is a platform and language neutral interface that will allow programs and scripts to dynamically access and update
0:52
the content structure and style of documents. Basically, it's how JavaScript can manipulate content on a website. And it's important to note
1:02
that browsers may extend the standard so there may be differences across browser. Think of it as a tree of objects.
1:11
So, you have your webpage, and that's a root you have the HTML element which is further broken down into head and body.
1:19
The head then typically has title and metatags. And the body is the actual content of your page. So you got links, a tags
1:28
headers, h1, paragraphs, divs, etc. So with the object model, JavaScript gets all the power it needs to create dynamic HTML.
1:40
JavaScript can change all the elements attributes, CSS styles can remove elements, add new elements react to all existing events
1:50
and that's really exciting because all those modern apps we use today there are a lot of handlers listening and as you click on things, scroll
1:59
or do anything on those websites JavaScript listens and does things on the fly. And it's all JavaScript that's responsible
2:08
for those nice effects and animations in the apps that we use every day. Now, let's get practical and do a demo.
2:20
I'll retrieve some of Richard Branson's favorite quotes I put them in a website where I edit some paragraphs
2:27
and the quotes in an unordered list of list items. We're going to manipulate the DOM of this simple page learning how to target elements
2:39
using elements by tag name, class name, and by id write new content using inner HTML and then remove elements with append and remove child
2:54
taking the CSS using element style color and a click event using add event listener so we can share a quote on Twitter. So let's go to my demo folder
3:07
in the checkout that's seeding into DOM. Here I got my website, which is a simple HTML tree of head containing a title body containing a div
3:23
paragraph, an unordered list with id quote and a ten quotes in reversed order. And I did that on purpose so we can write them back
3:33
to the DOM in order as part of this demo. One quote has a class of Churchill and at the bottom, there is a p tag with an id of more
3:46
and we're going to write some content into that. Then I got my Javascript tags and inside it, I got the tasks I want to accomplish.
3:57
Let me open this website. And here it renders in the browser. First of all, let's get the p tag with an ID of more.
4:10
To work with the DOM, we have to document object and we can call methods on it. So, in this case I want to call cap element by id.
4:22
It's very similar how you target elements in Selenium which you also learn about in this course. So here's the paragraph and an ID of more
4:34
and I can get the element by ID specifying more in parenthesis and let's just bounce this to unordered. I get an object of HTML paragraph element
4:50
that's got its content and I can say inner HTML. And that's just a dash. So let's put something more excited in there. I can target the inner HTML
5:09
and just write a string into it. Now if we refresh that content gets written into that element.
5:28
Great! So how can I get all the p tags? Let me define a variable. From here, I can use get elements line tag name
5:46
then target the paragraphs. And let's just bounce 'em to the console. Let me open the console.
6:03
Refresh, and here I get my p tags. So this is the first one and the second one. The first one didn't have an id the second one had the id of more.
6:17
Great! Let's get all the li tags, or list items which are effectively the quotes. It's the same as the paragraph, but we just target li.
6:29
And I'm going to store them in quotes. You can bounce the length of the quotes and as it's an array, I can index into the quotes
6:44
and get the first element and its inner HTML. Let's try that out. Awesome, I get ten quotes and the first element is number 10
7:00
"The beautiful thing about learning...," etc. Great, we're getting somewhere. Now what if we want to get the Churchill tag
7:10
which happens to have a class of Churchill? Well, I can also target elements by class name so let's do that next. But you're not going to really use it
7:21
I'm just going to straight log it to the console. Document get elements by class name. And notice it's plural so I can index into the results
7:39
which is an array and get the content with inner HTML. Let's refresh again, and there you go: I get quote number three, which had that class set.
7:50
Now in the next video we're going to do some more manipulation of the DOM writing the quotes back in order, add a new quote
7:58
remove the last quote, adding color to quotes and work with an event listener.