title
JavaScript DOM Crash Course - Part 2

description
In this video we will learn how to traverse and move around the DOM with properties like parentNode, parentElement, nextElementSibling and so on. We will also learn how to insert elements with createElement() and createTextNode() CODE: Code for this video http://www.traversymedia.com/downloads/domcrashcourse2.zip BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia COURSES & MORE INFO: http://www.traversymedia.com FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia NEW DISCORD CHAT SERVER: https://discord.gg/traversymedia

detail
{'title': 'JavaScript DOM Crash Course - Part 2', 'heatmap': [{'end': 900.876, 'start': 880.683, 'weight': 0.728}, {'end': 1195.081, 'start': 1097.502, 'weight': 0.862}], 'summary': 'This javascript dom crash course - part 2 covers dom traversal basics including parent nodes, child nodes, and siblings, emphasizing the use of selectors like getelementbyid, getelementsbyclassname, getelementsbytagname, queryselector, and queryselectorall. it also delves into using parent nodes in javascript, manipulating html elements, accessing and manipulating child nodes, discussing text nodes and differences between child nodes and children, and explaining dom navigation and sibling methods like firstchild, lastchild, next sibling, and previous sibling, with practical examples provided.', 'chapters': [{'end': 76.253, 'segs': [{'end': 54.993, 'src': 'embed', 'start': 7.639, 'weight': 0, 'content': [{'end': 12.903, 'text': 'Alright guys, so in the last video we left off after looking at all the different selectors.', 'start': 7.639, 'duration': 5.264}, {'end': 23.431, 'text': 'So we looked at the document.getElementById, getElementsByClassName, getElementsByTagName, querySelector, and querySelectorAll.', 'start': 13.003, 'duration': 10.428}, {'end': 25.693, 'text': "So now we're going to talk about traversing the DOM.", 'start': 23.491, 'duration': 2.202}, {'end': 31.478, 'text': 'So basically kind of moving up and down, looking at parent nodes, child nodes, and siblings.', 'start': 25.733, 'duration': 5.745}, {'end': 40.804, 'text': "So if we look at the index.html here, when we talk about a parent node, basically what that means is let's, let's take this h2, for example.", 'start': 31.978, 'duration': 8.826}, {'end': 45.867, 'text': 'so this h2 has a parent of this div right here with the id of main.', 'start': 40.804, 'duration': 5.063}, {'end': 50.13, 'text': "this is this is the h2 parent because it's inside of it.", 'start': 45.867, 'duration': 4.263}, {'end': 54.993, 'text': "okay, now, this h2 is a child of the div, so that's a child.", 'start': 50.13, 'duration': 4.863}], 'summary': 'Covered different selectors and now discussing traversing the dom, including parent nodes, child nodes, and siblings.', 'duration': 47.354, 'max_score': 7.639, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mPd2aJXCZ2g/pics/mPd2aJXCZ2g7639.jpg'}], 'start': 7.639, 'title': 'Dom traversal basics', 'summary': 'Introduces dom traversal, covering parent nodes, child nodes, and siblings, while highlighting the use of various selectors such as document.getelementbyid, getelementsbyclassname, getelementsbytagname, queryselector, and queryselectorall.', 'chapters': [{'end': 76.253, 'start': 7.639, 'title': 'Dom traversal basics', 'summary': 'Introduces dom traversal, covering parent nodes, child nodes, and siblings, while highlighting the use of various selectors such as document.getelementbyid, getelementsbyclassname, getelementsbytagname, queryselector, and queryselectorall.', 'duration': 68.614, 'highlights': ['DOM traversal covers parent nodes, child nodes, and siblings, including examples of h2 as a child of div and form as a sibling of h2.', 'Selectors such as document.getElementById, getElementsByClassName, getElementsByTagName, querySelector, and querySelectorAll are highlighted for DOM manipulation.']}], 'duration': 68.614, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mPd2aJXCZ2g/pics/mPd2aJXCZ2g7639.jpg', 'highlights': ['Selectors like document.getElementById, getElementsByClassName, getElementsByTagName, querySelector, and querySelectorAll are emphasized for DOM manipulation.', 'DOM traversal encompasses parent nodes, child nodes, and siblings, with examples like h2 as a child of div and form as a sibling of h2.']}, {'end': 288.345, 'segs': [{'end': 133.317, 'src': 'embed', 'start': 103.251, 'weight': 0, 'content': [{'end': 108.896, 'text': "the ID of items, because it's a UL with the ID of items, and that's what I'm grabbing.", 'start': 103.251, 'duration': 5.645}, {'end': 112.419, 'text': "So let's take a look at the parent node.", 'start': 109.817, 'duration': 2.602}, {'end': 119.986, 'text': "So we're going to use the parent node method, or I'm sorry, parent node property.", 'start': 112.839, 'duration': 7.147}, {'end': 130.413, 'text': "So we're going to console.log, and let's say item list.parent node, and you'll see it actually comes up here.", 'start': 120.466, 'duration': 9.947}, {'end': 133.317, 'text': "So let's go ahead and save that and see what it gives us.", 'start': 131.275, 'duration': 2.042}], 'summary': 'Accessing parent node of item list to retrieve id of items.', 'duration': 30.066, 'max_score': 103.251, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mPd2aJXCZ2g/pics/mPd2aJXCZ2g103251.jpg'}, {'end': 215.208, 'src': 'embed', 'start': 184.657, 'weight': 1, 'content': [{'end': 189.519, 'text': 'So now we have the gray background on the main, the div with the ID of main.', 'start': 184.657, 'duration': 4.862}, {'end': 195.682, 'text': "And if we look down here in the console, it's logging in, and it now has that background color.", 'start': 190.66, 'duration': 5.022}, {'end': 199.271, 'text': 'Now we can keep going.', 'start': 198.109, 'duration': 1.162}, {'end': 200.493, 'text': 'We can chain these things.', 'start': 199.311, 'duration': 1.182}, {'end': 209.346, 'text': "So if we want to, let's say, grab this console log and let's say parent node dot parent node.", 'start': 200.553, 'duration': 8.793}, {'end': 215.208, 'text': 'So what do you think that this is going to give us? We know that the div with the ID of main is the parent node of the items.', 'start': 209.986, 'duration': 5.222}], 'summary': 'Demonstrating css changes on div with id of main in console log', 'duration': 30.551, 'max_score': 184.657, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mPd2aJXCZ2g/pics/mPd2aJXCZ2g184657.jpg'}, {'end': 288.345, 'src': 'embed', 'start': 258.505, 'weight': 2, 'content': [{'end': 262.93, 'text': 'So if I were to change element..', 'start': 258.505, 'duration': 4.425}, {'end': 268.105, 'text': "So we'll say element, parent element.", 'start': 265.987, 'duration': 2.118}, {'end': 273.298, 'text': "Let's see.", 'start': 272.878, 'duration': 0.42}, {'end': 274.479, 'text': 'We should get the same thing.', 'start': 273.318, 'duration': 1.161}, {'end': 275.719, 'text': 'And save.', 'start': 275.099, 'duration': 0.62}, {'end': 277.66, 'text': 'And we get the same exact thing.', 'start': 276.42, 'duration': 1.24}, {'end': 279.061, 'text': "We're getting the gray background.", 'start': 277.7, 'duration': 1.361}, {'end': 281.042, 'text': "We're console logging down here.", 'start': 279.081, 'duration': 1.961}, {'end': 284.923, 'text': 'So parent node and parent element, for the most part, can be used.', 'start': 281.562, 'duration': 3.361}, {'end': 286.664, 'text': 'They can be interchangeable.', 'start': 285.344, 'duration': 1.32}, {'end': 288.345, 'text': 'All right.', 'start': 288.065, 'duration': 0.28}], 'summary': 'Demonstrating interchangeability of parent node and element.', 'duration': 29.84, 'max_score': 258.505, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mPd2aJXCZ2g/pics/mPd2aJXCZ2g258505.jpg'}], 'start': 77.859, 'title': 'Using parent nodes and javascript manipulation', 'summary': 'Covers using parent nodes in javascript to retrieve the parent element of a selected item list, manipulating html elements, including changing background colors, and understanding the interchangeability of parent node and parent element, with practical examples and relevance in web development.', 'chapters': [{'end': 156.936, 'start': 77.859, 'title': 'Using parent nodes in javascript', 'summary': 'Explains the concept of parent nodes and demonstrates the usage of parent node property in javascript to retrieve the parent element of a selected item list, highlighting the relevance of identifying the parent node in web development.', 'duration': 79.077, 'highlights': ['The concept of parent nodes is explained, demonstrating how to use the parent node property in JavaScript to retrieve the parent element of a selected item list.', "The usage of querySelector to grab elements by their ID is exemplified in the context of retrieving a UL with the ID 'items'.", 'The relevance of identifying the parent node in web development is emphasized through the practical demonstration of using parent node property to retrieve the parent element of a selected item list.']}, {'end': 229.612, 'start': 159.184, 'title': 'Using javascript to manipulate html elements', 'summary': 'Demonstrates using javascript to manipulate html elements, including changing background colors and accessing parent nodes, with examples of changing the background color of a specific div and accessing parent nodes of html elements.', 'duration': 70.428, 'highlights': ['The chapter demonstrates changing the background color of a specific div using JavaScript, resulting in the main div having a gray background color.', 'It also illustrates accessing parent nodes of HTML elements, showing how to access the parent node of a specific div and identifying it as the container div.']}, {'end': 288.345, 'start': 229.632, 'title': 'Understanding parent node and parent element', 'summary': 'Explains the usage and interchangeability of parent node and parent element, showcasing their ability to access the same elements and indicating that they can be used interchangeably in most scenarios.', 'duration': 58.713, 'highlights': ['The chapter explains the usage and interchangeability of parent node and parent element, showcasing their ability to access the same elements and indicating that they can be used interchangeably in most scenarios.', 'Parent node and parent element can be used interchangeably in accessing the same elements, as demonstrated by the example where changing from element to parent element yields the same result.']}], 'duration': 210.486, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mPd2aJXCZ2g/pics/mPd2aJXCZ2g77859.jpg', 'highlights': ['Demonstrates using parent nodes in JavaScript to retrieve the parent element of a selected item list.', 'Illustrates changing the background color of a specific div using JavaScript.', 'Explains the interchangeability of parent node and parent element in accessing the same elements.']}, {'end': 537.5, 'segs': [{'end': 355.717, 'src': 'embed', 'start': 288.465, 'weight': 0, 'content': [{'end': 294.088, 'text': "So what about children? So we're going to look at a property called child nodes.", 'start': 288.465, 'duration': 5.623}, {'end': 307.846, 'text': "so let's say child nodes and let's do a console, dot log.", 'start': 301.064, 'duration': 6.782}, {'end': 319.588, 'text': "jeez, i can't type console.log and we're going to take that item list, which is the ul, and we're going to say dot, child nodes.", 'start': 307.846, 'duration': 11.742}, {'end': 321.209, 'text': 'i cannot type on this keyboard.', 'start': 319.588, 'duration': 1.621}, {'end': 324.251, 'text': "so let's take a look at what we get here.", 'start': 322.549, 'duration': 1.702}, {'end': 327.455, 'text': "so what we're getting is a node list.", 'start': 324.251, 'duration': 3.204}, {'end': 333.902, 'text': "okay, some, basically an array, and it's giving us all these different nodes or all these different items.", 'start': 327.455, 'duration': 6.447}, {'end': 339.168, 'text': 'here we have zero, one, two, and notice that this zero is actually a text node.', 'start': 333.902, 'duration': 5.266}, {'end': 346.452, 'text': 'Okay, so the text node is actually the, just represents white space.', 'start': 340.209, 'duration': 6.243}, {'end': 350.314, 'text': "Okay, so it represents if there's a line break or anything like that.", 'start': 346.452, 'duration': 3.862}, {'end': 355.717, 'text': "So if we look in our HTML here, this is what it's grabbing now.", 'start': 350.795, 'duration': 4.922}], 'summary': 'Demonstrating accessing child nodes in javascript, obtaining a node list with different items and a text node representing whitespace.', 'duration': 67.252, 'max_score': 288.465, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mPd2aJXCZ2g/pics/mPd2aJXCZ2g288465.jpg'}, {'end': 470.849, 'src': 'embed', 'start': 443.09, 'weight': 2, 'content': [{'end': 446.991, 'text': "I'm sure you guys, if you guys have been following along, you probably know how we can do that.", 'start': 443.09, 'duration': 3.901}, {'end': 450.672, 'text': 'We can say item list dot child.', 'start': 447.611, 'duration': 3.061}, {'end': 459.82, 'text': "children and we can put in our brackets and we'll select the one element and then you'll see it's listing out item two.", 'start': 451.312, 'duration': 8.508}, {'end': 470.849, 'text': "okay, and if we wanted to do something with that, we could take it and let's say dot background color and we'll set that equal to yellow.", 'start': 459.82, 'duration': 11.029}], 'summary': 'Demonstrating code to select and manipulate elements, e.g. changing background color to yellow.', 'duration': 27.759, 'max_score': 443.09, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mPd2aJXCZ2g/pics/mPd2aJXCZ2g443090.jpg'}], 'start': 288.465, 'title': 'Javascript dom manipulation', 'summary': "Explains child nodes in javascript, detailing how to access and manipulate them within a node list for a given html element. it also highlights the presence of text nodes representing white space. additionally, the chapter discusses differences between child nodes and children in dom manipulation, and explains how to access specific elements and their properties like 'children' and 'first child' in javascript.", 'chapters': [{'end': 386.83, 'start': 288.465, 'title': 'Understanding child nodes in javascript', 'summary': 'Explains the concept of child nodes in javascript, demonstrating how to access and manipulate them within a node list for a given html element, and highlighting the presence of text nodes representing white space within the node list.', 'duration': 98.365, 'highlights': ['Demonstrating how to access and manipulate child nodes within a node list for a given HTML element. Accessing and manipulating child nodes, working with node list, using JavaScript to interact with HTML elements.', 'Highlighting the presence of text nodes representing white space within the node list. Identifying text nodes, understanding their representation of white space within HTML elements.']}, {'end': 537.5, 'start': 386.93, 'title': 'Manipulating dom elements in javascript', 'summary': "Discusses the differences between child nodes and children in dom manipulation, explaining how to access specific elements and the properties like 'children' and 'first child' in javascript.", 'duration': 150.57, 'highlights': ['Explained the difference between child nodes and children in DOM manipulation The speaker discussed the differences between child nodes and children, emphasizing the use of children over child nodes.', "Demonstrated accessing specific elements using children property The speaker demonstrated accessing a specific element using the children property and selecting 'item two' from the list.", "Illustrated the use of 'first child' property for selecting elements The speaker illustrated the use of the 'first child' property, highlighting its limitations when including white space and line breaks."]}], 'duration': 249.035, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mPd2aJXCZ2g/pics/mPd2aJXCZ2g288465.jpg', 'highlights': ['Demonstrating how to access and manipulate child nodes within a node list for a given HTML element.', 'Explained the difference between child nodes and children in DOM manipulation', 'Demonstrated accessing specific elements using children property', 'Highlighting the presence of text nodes representing white space within the node list.']}, {'end': 778.043, 'segs': [{'end': 574.975, 'src': 'embed', 'start': 538.021, 'weight': 1, 'content': [{'end': 542.966, 'text': "So there's another method called first element child, which is probably what you want to use.", 'start': 538.021, 'duration': 4.945}, {'end': 553.056, 'text': "So let's say first element child, and we're going to just console log the item list.", 'start': 543.506, 'duration': 9.55}, {'end': 558.567, 'text': 'dot first element child.', 'start': 555.862, 'duration': 2.705}, {'end': 561.432, 'text': 'And then that will give us the actual LI.', 'start': 559.809, 'duration': 1.623}, {'end': 564.337, 'text': 'All right, and we can take that.', 'start': 561.552, 'duration': 2.785}, {'end': 574.975, 'text': "first element child and let's say dot text content and we'll change that to, let's say hello one, save,", 'start': 566.072, 'duration': 8.903}], 'summary': "Using 'first element child' method to access and modify list items.", 'duration': 36.954, 'max_score': 538.021, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mPd2aJXCZ2g/pics/mPd2aJXCZ2g538021.jpg'}, {'end': 661.255, 'src': 'embed', 'start': 602.508, 'weight': 0, 'content': [{'end': 604.209, 'text': 'It gives us that last text node.', 'start': 602.508, 'duration': 1.701}, {'end': 609.671, 'text': "And let's go ahead and save this.", 'start': 608.29, 'duration': 1.381}, {'end': 615.053, 'text': 'And we just need to change this to last element child.', 'start': 611.131, 'duration': 3.922}, {'end': 620.455, 'text': "And we'll change this text to, let's say, hello4.", 'start': 617.854, 'duration': 2.601}, {'end': 627.998, 'text': "All right, so now you can see that it's logging us the last li, and then it's also changing the text content to hello4.", 'start': 621.155, 'duration': 6.843}, {'end': 631.515, 'text': 'all right.', 'start': 630.174, 'duration': 1.341}, {'end': 635.176, 'text': 'so first child, last child, first element child.', 'start': 631.515, 'duration': 3.661}, {'end': 637.777, 'text': 'last element child.', 'start': 635.176, 'duration': 2.601}, {'end': 640.378, 'text': "next thing we're going to look at is siblings.", 'start': 637.777, 'duration': 2.601}, {'end': 644.28, 'text': "okay, so up to this point we've been looking at parent, parents and children.", 'start': 640.378, 'duration': 3.902}, {'end': 645.601, 'text': "now let's look at siblings.", 'start': 644.28, 'duration': 1.321}, {'end': 648.182, 'text': "so let's say we want to get the next sibling.", 'start': 645.601, 'duration': 2.581}, {'end': 651.603, 'text': "okay, that's actually a method.", 'start': 648.182, 'duration': 3.421}, {'end': 659.835, 'text': "so we're going to console.log and let's grab the item list And you can test this out on any element you want.", 'start': 651.603, 'duration': 8.232}, {'end': 661.255, 'text': 'I just chose the item list.', 'start': 659.875, 'duration': 1.38}], 'summary': 'Javascript tutorial covering dom traversal and manipulation methods.', 'duration': 58.747, 'max_score': 602.508, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mPd2aJXCZ2g/pics/mPd2aJXCZ2g602508.jpg'}, {'end': 728.464, 'src': 'embed', 'start': 702.545, 'weight': 5, 'content': [{'end': 708.388, 'text': "Oh, does it not have any? Yes, see, okay, so it's null because it doesn't actually have a next sibling.", 'start': 702.545, 'duration': 5.843}, {'end': 716.412, 'text': "If I were to put, let's say, a span here, let's save that, and then you can see it's a span, okay?", 'start': 708.428, 'duration': 7.984}, {'end': 720.78, 'text': "So I just chose something that doesn't actually have a next sibling.", 'start': 717.819, 'duration': 2.961}, {'end': 722.841, 'text': 'All right.', 'start': 722.561, 'duration': 0.28}, {'end': 726.103, 'text': "Let's see what else we're going to look at.", 'start': 724.542, 'duration': 1.561}, {'end': 728.464, 'text': "We're also going to look at previous sibling.", 'start': 726.123, 'duration': 2.341}], 'summary': 'Discussion about next and previous siblings in web development.', 'duration': 25.919, 'max_score': 702.545, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mPd2aJXCZ2g/pics/mPd2aJXCZ2g702545.jpg'}], 'start': 538.021, 'title': 'Dom navigation and sibling methods', 'summary': 'Explains dom navigation methods like firstchild, lastchild, firstelementchild, and lastelementchild, and methods for working with siblings in the dom, including next sibling, next element sibling, previous sibling, and previous element sibling, with practical examples.', 'chapters': [{'end': 637.777, 'start': 538.021, 'title': 'Dom navigation methods', 'summary': 'Explains the usage of firstchild, lastchild, firstelementchild, and lastelementchild methods to navigate the dom, demonstrating how to access and modify the content of the first and last elements of a list.', 'duration': 99.756, 'highlights': ["The method firstElementChild is used to access the first LI element and modify its text content, demonstrated by changing it to 'hello one'.", "The lastElementChild method is used to access the last LI element and change its text content to 'hello4'.", 'The lastChild method is utilized to access the last text node within the list.']}, {'end': 778.043, 'start': 637.777, 'title': 'Working with siblings in dom', 'summary': 'Covers the methods for accessing the next and previous siblings of an element in the dom, including next sibling, next element sibling, previous sibling, and previous element sibling, with examples illustrating their usage and handling of null values.', 'duration': 140.266, 'highlights': ['The chapter covers the methods for accessing the next and previous siblings of an element in the DOM. It introduces the concept of accessing siblings in the DOM, expanding on the previous focus on parents and children elements.', 'including next sibling, next element sibling, previous sibling, and previous element sibling, with examples illustrating their usage It explains the different methods available for accessing siblings, such as next sibling, next element sibling, previous sibling, and previous element sibling, and provides examples of their usage.', 'handling of null values. It discusses the scenario of encountering a null value when accessing siblings and how to handle it, demonstrated through an example of an element without a next sibling.']}], 'duration': 240.022, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mPd2aJXCZ2g/pics/mPd2aJXCZ2g538021.jpg', 'highlights': ['The chapter covers methods for accessing next and previous siblings in the DOM, expanding on the previous focus on parents and children elements.', "The method firstElementChild is used to access the first LI element and modify its text content, demonstrated by changing it to 'hello one'.", "The lastElementChild method is used to access the last LI element and change its text content to 'hello4'.", 'It explains different methods available for accessing siblings, such as next sibling, next element sibling, previous sibling, and previous element sibling, and provides examples of their usage.', 'The lastChild method is utilized to access the last text node within the list.', 'It discusses the scenario of encountering a null value when accessing siblings and how to handle it, demonstrated through an example of an element without a next sibling.']}, {'end': 1280.159, 'segs': [{'end': 870.398, 'src': 'embed', 'start': 830.228, 'weight': 0, 'content': [{'end': 835.41, 'text': 'like when you scroll down a page and you want certain things to pop out at certain spots.', 'start': 830.228, 'duration': 5.182}, {'end': 838.171, 'text': 'I mean you can do that kind of stuff in JavaScript,', 'start': 835.47, 'duration': 2.701}, {'end': 843.733, 'text': "but there are really nice jQuery plugins that will save you a lot of time and it's a lot less code.", 'start': 838.171, 'duration': 5.562}, {'end': 846.654, 'text': "So I'm not saying don't use jQuery for anything.", 'start': 844.133, 'duration': 2.521}, {'end': 850.495, 'text': "I'm just saying for simple DOM manipulation, there's really no need for it.", 'start': 846.994, 'duration': 3.501}, {'end': 860.695, 'text': 'All right, guys, so what I want to do now is I want to get into actually creating stuff, creating DOM elements from JavaScript and inserting them.', 'start': 852.133, 'duration': 8.562}, {'end': 863.876, 'text': "Because right now, up to this point, we've just been selecting them.", 'start': 860.715, 'duration': 3.161}, {'end': 866.697, 'text': "We've been changing the content and stuff like that.", 'start': 864.316, 'duration': 2.381}, {'end': 870.398, 'text': 'But I want to show you how we can actually create elements and insert them.', 'start': 866.737, 'duration': 3.661}], 'summary': 'Jquery plugins save time for dom manipulation, but not essential for simple tasks like creating and inserting dom elements.', 'duration': 40.17, 'max_score': 830.228, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mPd2aJXCZ2g/pics/mPd2aJXCZ2g830228.jpg'}, {'end': 907.596, 'src': 'heatmap', 'start': 880.683, 'weight': 0.728, 'content': [{'end': 886.327, 'text': "All right, so let's go ahead and let's create a div.", 'start': 880.683, 'duration': 5.644}, {'end': 888.468, 'text': "So we'll create a variable.", 'start': 887.147, 'duration': 1.321}, {'end': 892.23, 'text': "I'll call it new div, not new dick, new div.", 'start': 888.548, 'duration': 3.682}, {'end': 894.632, 'text': "I don't need a new dick, I don't think.", 'start': 892.751, 'duration': 1.881}, {'end': 900.876, 'text': "And we'll say document.createElement.", 'start': 897.494, 'duration': 3.382}, {'end': 904.458, 'text': 'Should I edit that out? Nah.', 'start': 902.597, 'duration': 1.861}, {'end': 907.596, 'text': 'So create element div.', 'start': 905.914, 'duration': 1.682}], 'summary': 'Creating a new div element using javascript.', 'duration': 26.913, 'max_score': 880.683, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mPd2aJXCZ2g/pics/mPd2aJXCZ2g880683.jpg'}, {'end': 1195.081, 'src': 'heatmap', 'start': 1097.502, 'weight': 0.862, 'content': [{'end': 1102.644, 'text': "So I'm going to say I want to grab the header container.", 'start': 1097.502, 'duration': 5.142}, {'end': 1108.706, 'text': 'If we look at the HTML inside the header, we have the class container because I want to put it.', 'start': 1102.684, 'duration': 6.022}, {'end': 1111.868, 'text': 'I want to put it right here.', 'start': 1108.727, 'duration': 3.141}, {'end': 1112.608, 'text': 'All right.', 'start': 1111.888, 'duration': 0.72}, {'end': 1113.909, 'text': 'Well, right below this div.', 'start': 1112.648, 'duration': 1.261}, {'end': 1117.79, 'text': "So let's create a variable and we'll just call it container.", 'start': 1114.769, 'duration': 3.021}, {'end': 1119.911, 'text': 'Of course, you could call it anything you want.', 'start': 1117.81, 'duration': 2.101}, {'end': 1135.866, 'text': "And we're going to use the document dot query selector and inside here we'll say in the header we want the container class, alright,", 'start': 1120.291, 'duration': 15.575}, {'end': 1140.591, 'text': "and then I'm also going to grab the h1, the header h1.", 'start': 1135.866, 'duration': 4.725}, {'end': 1160.021, 'text': "so we'll set that to document dot query selector and let's grab the header h1, all right, and then what we'll do is let's see,", 'start': 1140.591, 'duration': 19.43}, {'end': 1164.605, 'text': "we'll take our container and we're going to say dot insert before.", 'start': 1160.021, 'duration': 4.584}, {'end': 1167.547, 'text': "Okay? And that's exactly what it's going to do.", 'start': 1164.625, 'duration': 2.922}, {'end': 1170.99, 'text': "It's going to insert before and it's going to take in two parameters.", 'start': 1167.627, 'duration': 3.363}, {'end': 1178.617, 'text': "One is going to be what we're inserting, which is new div, and then one is going to be what we're inserting before, which is going to be the h1.", 'start': 1171.131, 'duration': 7.486}, {'end': 1183.715, 'text': "All right, so let's go ahead and save that, and there it is.", 'start': 1180.253, 'duration': 3.462}, {'end': 1185.376, 'text': "There's our hello world.", 'start': 1184.255, 'duration': 1.121}, {'end': 1195.081, 'text': "If we go ahead and we inspect it, you'll see that it has the class, the ID, the title, and it has the text that we constructed in the JavaScript.", 'start': 1185.456, 'duration': 9.625}], 'summary': 'Using javascript to insert a new div before the h1 in the header container.', 'duration': 97.579, 'max_score': 1097.502, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mPd2aJXCZ2g/pics/mPd2aJXCZ2g1097502.jpg'}, {'end': 1228.617, 'src': 'embed', 'start': 1196.002, 'weight': 2, 'content': [{'end': 1198.023, 'text': 'All right, whoops, what did I do?', 'start': 1196.002, 'duration': 2.021}, {'end': 1205.003, 'text': "So if we wanted to change, let's say we wanted to change the font size.", 'start': 1200.68, 'duration': 4.323}, {'end': 1215.99, 'text': "we could simply go in here and say new div dot style dot font size and we'll set it to, let's say, 30 pixels.", 'start': 1205.003, 'duration': 10.987}, {'end': 1219.953, 'text': 'Save And we can treat it just like any other div element.', 'start': 1216.61, 'duration': 3.343}, {'end': 1222.674, 'text': "Okay? So it's now part of the DOM.", 'start': 1220.693, 'duration': 1.981}, {'end': 1226.737, 'text': "I'm sorry, I said div element, I mean DOM element.", 'start': 1224.335, 'duration': 2.402}, {'end': 1228.617, 'text': 'all right.', 'start': 1228.257, 'duration': 0.36}], 'summary': 'Demonstrating how to change font size to 30 pixels in a dom element.', 'duration': 32.615, 'max_score': 1196.002, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mPd2aJXCZ2g/pics/mPd2aJXCZ2g1196002.jpg'}], 'start': 779.023, 'title': 'Javascript and dom manipulation', 'summary': 'Covers javascript dom manipulation without jquery, such as creating and inserting dom elements, adding classes, ids, attributes, and text content. it also explains manipulating the dom using javascript, selecting elements, inserting new elements, and applying styles. plans for future videos include events and creating an application.', 'chapters': [{'end': 1089.735, 'start': 779.023, 'title': 'Javascript dom manipulation', 'summary': 'Covers javascript dom manipulation without jquery, including creating and inserting dom elements using methods like createelement and appendchild, demonstrating how to add classes, ids, attributes, and text content to the elements.', 'duration': 310.712, 'highlights': ['The chapter covers creating and inserting DOM elements using methods like createElement and appendChild, demonstrating how to add classes, IDs, attributes, and text content to the elements.', "JavaScript DOM manipulation without jQuery is emphasized, as it is stated that for simple DOM manipulation, there's no need for jQuery.", 'The speaker expresses a preference for using JavaScript over jQuery for simple DOM manipulation, highlighting that jQuery adds an extra file to the page and slows down the performance.', 'The speaker acknowledges the utility of jQuery for specific tasks like hardcore animation and time-saving with plugins, but still asserts that for simple DOM manipulation, jQuery is unnecessary.', 'Demonstration of creating a new div element using document.createElement and adding a class, ID, and attribute to it is performed, showcasing the flexibility of JavaScript for DOM manipulation.', 'The process of creating a text node and appending it to the new div using appendChild is illustrated, resulting in the addition of text content to the dynamically created DOM element.']}, {'end': 1280.159, 'start': 1089.795, 'title': 'Dom manipulation with javascript', 'summary': 'Explains how to manipulate the dom using javascript, including selecting elements, inserting new elements, and applying styles. it also outlines plans for future videos, including events and creating an application.', 'duration': 190.364, 'highlights': ['The chapter covers selecting elements using document.querySelector and inserting new elements using insertBefore, demonstrating the process with specific code examples.', 'It demonstrates changing styles by altering the font size of a newly inserted element, providing a tangible example of applying styles through JavaScript.', 'The instructor outlines future plans for the tutorial series, including delving into events such as click and keyboard events, and creating an application to add and delete items from the DOM.']}], 'duration': 501.136, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mPd2aJXCZ2g/pics/mPd2aJXCZ2g779023.jpg', 'highlights': ['The chapter covers creating and inserting DOM elements using methods like createElement and appendChild, demonstrating how to add classes, IDs, attributes, and text content to the elements.', 'The chapter covers selecting elements using document.querySelector and inserting new elements using insertBefore, demonstrating the process with specific code examples.', 'It demonstrates changing styles by altering the font size of a newly inserted element, providing a tangible example of applying styles through JavaScript.', 'The speaker acknowledges the utility of jQuery for specific tasks like hardcore animation and time-saving with plugins, but still asserts that for simple DOM manipulation, jQuery is unnecessary.', 'The speaker expresses a preference for using JavaScript over jQuery for simple DOM manipulation, highlighting that jQuery adds an extra file to the page and slows down the performance.']}], 'highlights': ['Selectors like document.getElementById, getElementsByClassName, getElementsByTagName, querySelector, and querySelectorAll are emphasized for DOM manipulation.', 'DOM traversal encompasses parent nodes, child nodes, and siblings, with examples like h2 as a child of div and form as a sibling of h2.', 'Demonstrates using parent nodes in JavaScript to retrieve the parent element of a selected item list.', 'Illustrates changing the background color of a specific div using JavaScript.', 'Explains the interchangeability of parent node and parent element in accessing the same elements.', 'Demonstrating how to access and manipulate child nodes within a node list for a given HTML element.', 'Explained the difference between child nodes and children in DOM manipulation.', 'Demonstrated accessing specific elements using children property.', 'Highlighting the presence of text nodes representing white space within the node list.', 'The chapter covers methods for accessing next and previous siblings in the DOM, expanding on the previous focus on parents and children elements.', "The method firstElementChild is used to access the first LI element and modify its text content, demonstrated by changing it to 'hello one'.", "The lastElementChild method is used to access the last LI element and change its text content to 'hello4'.", 'It explains different methods available for accessing siblings, such as next sibling, next element sibling, previous sibling, and previous element sibling, and provides examples of their usage.', 'The lastChild method is utilized to access the last text node within the list.', 'It discusses the scenario of encountering a null value when accessing siblings and how to handle it, demonstrated through an example of an element without a next sibling.', 'The chapter covers creating and inserting DOM elements using methods like createElement and appendChild, demonstrating how to add classes, IDs, attributes, and text content to the elements.', 'The chapter covers selecting elements using document.querySelector and inserting new elements using insertBefore, demonstrating the process with specific code examples.', 'It demonstrates changing styles by altering the font size of a newly inserted element, providing a tangible example of applying styles through JavaScript.', 'The speaker acknowledges the utility of jQuery for specific tasks like hardcore animation and time-saving with plugins, but still asserts that for simple DOM manipulation, jQuery is unnecessary.', 'The speaker expresses a preference for using JavaScript over jQuery for simple DOM manipulation, highlighting that jQuery adds an extra file to the page and slows down the performance.']}