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