title
JavaScript DOM Crash Course - Part 1

description
This crash course focuses on the DOM WITHOUT JQUERY. In this part we will talk about what the JavaScript DOM (Document Object Model) is and we will look at the different selectors like document.getElementById() document.getElementsByClassName() document.getElementsByTagName() document.querySelector() document.querySelectorAll() We will also look at how to change content and styles via these selectors 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 1', 'heatmap': [{'end': 1735.719, 'start': 1707.974, 'weight': 1}], 'summary': "Titled 'javascript dom crash course - part 1' covers javascript fundamentals, dom manipulation, html structure, document object, html and javascript interaction, dom manipulation methods, and manipulating html and css with javascript, emphasizing the shift from using jquery to vanilla javascript.", 'chapters': [{'end': 153.923, 'segs': [{'end': 52.483, 'src': 'embed', 'start': 26.916, 'weight': 0, 'content': [{'end': 36.087, 'text': 'we look at things like creating variables, creating arrays and functions and loops just the basic language fundamentals.', 'start': 26.916, 'duration': 9.171}, {'end': 37.349, 'text': 'All right.', 'start': 36.648, 'duration': 0.701}, {'end': 40.353, 'text': "So if that's what you're looking for, then that's the video to watch.", 'start': 37.369, 'duration': 2.984}, {'end': 43.757, 'text': "And it's actually in the Vanilla JavaScript playlist on my channel.", 'start': 40.393, 'duration': 3.364}, {'end': 44.918, 'text': 'all right now.', 'start': 44.338, 'duration': 0.58}, {'end': 52.483, 'text': 'what i want to do in this video is go a little deeper than just show you how to create variables and and talk about data types and stuff,', 'start': 44.918, 'duration': 7.565}], 'summary': 'Learn basic javascript concepts like variables, arrays, functions, and loops in this video, which is part of the vanilla javascript playlist.', 'duration': 25.567, 'max_score': 26.916, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc26916.jpg'}, {'end': 89.543, 'src': 'embed', 'start': 65.032, 'weight': 1, 'content': [{'end': 73.878, 'text': 'but i want to show you how to do it with vanilla javascript, because using jquery just for dom manipulation and, just like you know, changing a style,', 'start': 65.032, 'duration': 8.846}, {'end': 79.84, 'text': 'Adding an event, things like that, is kind of like using a sledgehammer to kill a mosquito.', 'start': 74.758, 'duration': 5.082}, {'end': 89.543, 'text': "It's just not needed anymore We have query selector, which is just as good as using you know jQuery selectors So that's what we're going to do.", 'start': 79.9, 'duration': 9.643}], 'summary': 'Using vanilla javascript for dom manipulation is just as efficient as using jquery selectors, making the latter unnecessary.', 'duration': 24.511, 'max_score': 65.032, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc65032.jpg'}, {'end': 138.987, 'src': 'embed', 'start': 109.036, 'weight': 2, 'content': [{'end': 110.437, 'text': "But it's basically just a header.", 'start': 109.036, 'duration': 1.401}, {'end': 116.302, 'text': 'And then we have, you know, a card with a form and then a list group.', 'start': 111.198, 'duration': 5.104}, {'end': 119.285, 'text': 'Okay, and we have certain classes and IDs and stuff.', 'start': 116.462, 'duration': 2.823}, {'end': 121.427, 'text': 'so that we can select certain elements.', 'start': 119.785, 'duration': 1.642}, {'end': 131.899, 'text': "Alright, now, in the description, you'll find a link and it will include the bare HTML file without any JavaScript, and then, as we move along,", 'start': 121.848, 'duration': 10.051}, {'end': 135.102, 'text': 'you can code along with me and add the JavaScript.', 'start': 131.899, 'duration': 3.203}, {'end': 138.987, 'text': "I'll also have the final versions of the code as well.", 'start': 135.423, 'duration': 3.564}], 'summary': 'Tutorial on building a web form with html and javascript.', 'duration': 29.951, 'max_score': 109.036, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc109036.jpg'}], 'start': 7.699, 'title': 'Javascript fundamentals & dom manipulation', 'summary': 'Covers javascript basics like variables, arrays, functions, and loops, and emphasizes the redundancy of using jquery for dom manipulation. it also introduces a simple html page for practical exploration.', 'chapters': [{'end': 153.923, 'start': 7.699, 'title': 'Javascript fundamentals & dom manipulation', 'summary': 'Covers the javascript fundamentals for beginners, including creating variables, arrays, functions, and loops, and also delves into dom manipulation with vanilla javascript, emphasizing the redundancy of using jquery for such tasks. the video also introduces a simple html page for practical exploration.', 'duration': 146.224, 'highlights': ['The video covers JavaScript fundamentals for beginners, including creating variables, arrays, functions, and loops. It emphasizes the coverage of fundamental JavaScript concepts, providing a strong foundation for beginners.', 'The chapter delves into DOM manipulation with vanilla JavaScript, showcasing how to select items, change styles, and replace content without using jQuery. Highlighting the redundancy of using jQuery for DOM manipulation and advocating for vanilla JavaScript for such tasks.', 'A simple HTML page is introduced for practical exploration, featuring a header, a card with a form, and a list group with certain classes and IDs. The practical exploration provides hands-on experience for viewers working with vanilla JavaScript and understanding DOM properties.']}], 'duration': 146.224, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc7699.jpg', 'highlights': ['The video covers JavaScript fundamentals for beginners, including variables, arrays, functions, and loops, providing a strong foundation.', 'The chapter emphasizes the redundancy of using jQuery for DOM manipulation and advocates for vanilla JavaScript for such tasks.', 'A simple HTML page is introduced for practical exploration, providing hands-on experience for viewers working with vanilla JavaScript.']}, {'end': 317.257, 'segs': [{'end': 207.747, 'src': 'embed', 'start': 178.085, 'weight': 0, 'content': [{'end': 182.567, 'text': 'Okay It can be thought of as a tree of nodes or elements created by the browser.', 'start': 178.085, 'duration': 4.482}, {'end': 186.349, 'text': 'JavaScript can be used to manipulate the DOM and its elements.', 'start': 183.107, 'duration': 3.242}, {'end': 191.771, 'text': 'The DOM is object oriented, meaning that each node has its own properties and methods.', 'start': 186.849, 'duration': 4.922}, {'end': 195.735, 'text': 'that we can go and we can change and we can add, we can remove things.', 'start': 192.211, 'duration': 3.524}, {'end': 200.039, 'text': 'So we can manipulate basically everything on the page using JavaScript.', 'start': 196.175, 'duration': 3.864}, {'end': 207.747, 'text': "OK, jQuery was used to do this for a long time, but it's becoming more and more popular to use just vanilla JavaScript for this.", 'start': 200.58, 'duration': 7.167}], 'summary': 'Dom is a tree of nodes manipulated by javascript; jquery use on decline.', 'duration': 29.662, 'max_score': 178.085, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc178085.jpg'}, {'end': 253.639, 'src': 'embed', 'start': 225.872, 'weight': 1, 'content': [{'end': 231.054, 'text': 'okay, so well, in the window we have the document object, basically the the core of the dom,', 'start': 225.872, 'duration': 5.182}, {'end': 237.455, 'text': 'and then we have a root element which is the HTML tag or the HTML element or node, whatever you want to call it,', 'start': 231.054, 'duration': 6.401}, {'end': 243.036, 'text': 'And then inside that we have children like head and body tags.', 'start': 238.035, 'duration': 5.001}, {'end': 245.357, 'text': 'OK, our head and body elements nodes.', 'start': 243.276, 'duration': 2.081}, {'end': 248.197, 'text': 'And then those have their own children.', 'start': 245.937, 'duration': 2.26}, {'end': 250.378, 'text': 'So we have a title for inside the head.', 'start': 248.317, 'duration': 2.061}, {'end': 253.639, 'text': 'We have titles, we have things like meta tags in the body.', 'start': 250.398, 'duration': 3.241}], 'summary': 'The document object in the window contains the html root element with head and body tags.', 'duration': 27.767, 'max_score': 225.872, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc225872.jpg'}], 'start': 153.963, 'title': 'Manipulating dom with javascript', 'summary': 'Introduces the dom, its structure as a tree of nodes, and the use of javascript to manipulate the dom and its elements, emphasizing the shift from using jquery to vanilla javascript.', 'chapters': [{'end': 317.257, 'start': 153.963, 'title': 'Manipulating dom with javascript', 'summary': 'Introduces the dom, its structure as a tree of nodes, and the use of javascript to manipulate the dom and its elements, emphasizing the shift from using jquery to vanilla javascript.', 'duration': 163.294, 'highlights': ["The DOM is a structured representation of the HTML document, and JavaScript can be used to manipulate its elements. jQuery was used for a long time, but it's becoming more popular to use vanilla JavaScript.", 'The DOM can be thought of as a tree of nodes or elements created by the browser, with the window object representing the browser, the document object representing the core of the DOM, and elements such as head, body, and their children.', 'The DOM can be manipulated with JavaScript, allowing changes and additions to elements and text nodes, as well as the manipulation of attributes like href on elements.']}], 'duration': 163.294, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc153963.jpg', 'highlights': ["The DOM is a structured representation of the HTML document, and JavaScript can be used to manipulate its elements. jQuery was used for a long time, but it's becoming more popular to use vanilla JavaScript.", 'The DOM can be thought of as a tree of nodes or elements created by the browser, with the window object representing the browser, the document object representing the core of the DOM, and elements such as head, body, and their children.', 'The DOM can be manipulated with JavaScript, allowing changes and additions to elements and text nodes, as well as the manipulation of attributes like href on elements.']}, {'end': 630.468, 'segs': [{'end': 363.764, 'src': 'embed', 'start': 338.51, 'weight': 3, 'content': [{'end': 344.612, 'text': 'Inside the header we have a container with an H1 with an ID where you have some bootstrap classes.', 'start': 338.51, 'duration': 6.102}, {'end': 347.053, 'text': 'Then we have under the header a container.', 'start': 345.132, 'duration': 1.921}, {'end': 352.615, 'text': 'We have a div with the ID of main, class of card which gives it this border around it.', 'start': 347.433, 'duration': 5.182}, {'end': 357.679, 'text': 'And then we have an H2, a form with one field and a submit button.', 'start': 353.015, 'duration': 4.664}, {'end': 363.764, 'text': 'And then we have an H2 and then a UL with the ID of items and the class of list group.', 'start': 358.039, 'duration': 5.725}], 'summary': 'Transcript describes the structure: h1, h2, form, ul with ids & classes.', 'duration': 25.254, 'max_score': 338.51, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc338510.jpg'}, {'end': 489.014, 'src': 'embed', 'start': 455.28, 'weight': 0, 'content': [{'end': 457.482, 'text': "all right, that's why i'm doing it all in the file here.", 'start': 455.28, 'duration': 2.202}, {'end': 467.574, 'text': "So what we're going to do is we're going to say console.dir, and we're going to pass in the document object.", 'start': 458.403, 'duration': 9.171}, {'end': 475.904, 'text': "So what this is going to do is it's going to show us all of the different properties and methods attached to the document object.", 'start': 468.034, 'duration': 7.87}, {'end': 479.967, 'text': 'Alright, so you can see we have the URL we can access.', 'start': 476.424, 'duration': 3.543}, {'end': 489.014, 'text': "we have document.all, which will give us an array not an array, but an HTML collection of everything that's inside of that page.", 'start': 479.967, 'duration': 9.047}], 'summary': 'Using console.dir to access properties and methods of the document object.', 'duration': 33.734, 'max_score': 455.28, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc455280.jpg'}, {'end': 571.473, 'src': 'embed', 'start': 534.786, 'weight': 1, 'content': [{'end': 535.547, 'text': 'You can edit it.', 'start': 534.786, 'duration': 0.761}, {'end': 536.848, 'text': "It's not read-only.", 'start': 535.867, 'duration': 0.981}, {'end': 539.791, 'text': 'If you want to change anything in the document, you can do that.', 'start': 537.188, 'duration': 2.603}, {'end': 542.193, 'text': "So let's take a look at..", 'start': 540.511, 'duration': 1.682}, {'end': 543.714, 'text': 'Let me see.', 'start': 542.193, 'duration': 1.521}, {'end': 545.435, 'text': "First of all, we'll look at the domain.", 'start': 543.814, 'duration': 1.621}, {'end': 548.218, 'text': 'So we can say console.log..', 'start': 546.056, 'duration': 2.162}, {'end': 550.94, 'text': 'We can say document.', 'start': 549.819, 'duration': 1.121}, {'end': 555.082, 'text': 'We can use our .syntax and we can access any of these properties.', 'start': 551.42, 'duration': 3.662}, {'end': 562.907, 'text': "So you'll see that there is a domain right here, which is going to give you whatever domain name you're running.", 'start': 555.703, 'duration': 7.204}, {'end': 571.473, 'text': "So if we say document.domain and save, you'll see that we get 127.0.0.1, which is just basically my local host.", 'start': 563.048, 'duration': 8.425}], 'summary': 'The transcript discusses accessing and editing document properties, such as domain, in javascript.', 'duration': 36.687, 'max_score': 534.786, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc534786.jpg'}], 'start': 317.777, 'title': 'Html structure and document object in javascript', 'summary': 'Provides an overview of html structure for a basic page, including bootstrap classes, a header with containers, a form, and a list group, as well as the inclusion of a script file. it also covers examining the document object in javascript, showcasing how to access properties and methods like domain, url, and title, and demonstrating the ability to modify them to enhance web development.', 'chapters': [{'end': 387.9, 'start': 317.777, 'title': 'Html structure overview', 'summary': 'Explains the html structure for a basic page, including the use of bootstrap classes, a header with containers, a form, and a list group, as well as the inclusion of a script file.', 'duration': 70.123, 'highlights': ['The HTML structure includes a header with an H1 and a container, a div with the ID of main and a class of card, a form with one field and a submit button, and a UL with the ID of items and the class of list group.', 'The use of Bootstrap classes is demonstrated in the header, giving it a nice style.', 'The script pointing to a script file called dom.js is included at the end of the HTML file, which is currently empty.']}, {'end': 630.468, 'start': 387.9, 'title': 'Working with document object in javascript', 'summary': 'Covers examining the document object in javascript, showcasing how to access properties and methods, such as domain, url, and title, and demonstrating the ability to modify them to enhance web development. key points include accessing the document object, examining its properties and methods, and showcasing the ability to modify them.', 'duration': 242.568, 'highlights': ['The chapter covers examining the document object in JavaScript, showcasing how to access properties and methods, such as domain, URL, and title, and demonstrating the ability to modify them to enhance web development.', 'The document object in JavaScript allows access to properties like domain, URL, and title, enabling developers to modify them for dynamic web content.', 'The chapter emphasizes the ability to modify properties such as the title of the page, demonstrating that it is not read-only and can be changed to enhance user experience and functionality.', 'The console.dir command allows developers to view all the different properties and methods attached to the document object, providing a comprehensive understanding of the available functionalities for web development.', 'The transcript also highlights the process of using console.log to access and display properties like domain, URL, and title, showcasing the practical application of accessing and modifying document object properties.']}], 'duration': 312.691, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc317777.jpg', 'highlights': ['The console.dir command allows developers to view all the different properties and methods attached to the document object, providing a comprehensive understanding of the available functionalities for web development.', 'The chapter emphasizes the ability to modify properties such as the title of the page, demonstrating that it is not read-only and can be changed to enhance user experience and functionality.', 'The document object in JavaScript allows access to properties like domain, URL, and title, enabling developers to modify them for dynamic web content.', 'The use of Bootstrap classes is demonstrated in the header, giving it a nice style.', 'The HTML structure includes a header with an H1 and a container, a div with the ID of main and a class of card, a form with one field and a submit button, and a UL with the ID of items and the class of list group.']}, {'end': 940.594, 'segs': [{'end': 686.843, 'src': 'embed', 'start': 658.476, 'weight': 0, 'content': [{'end': 665.179, 'text': "that'll grab the head element and we're outputting it to the console and you can see everything that's in the head.", 'start': 658.476, 'duration': 6.703}, {'end': 675.503, 'text': 'and, as you could probably guess, we can also do document.body, which will grab the body for us and output it all right.', 'start': 665.179, 'duration': 10.324}, {'end': 677.804, 'text': 'so another thing we can do is document.all.', 'start': 675.503, 'duration': 2.301}, {'end': 686.843, 'text': 'So if we do this, what it gives us is an array or an HTML collection of everything that is in the DOM.', 'start': 679.898, 'duration': 6.945}], 'summary': 'Access head, body, and all elements in the dom for output.', 'duration': 28.367, 'max_score': 658.476, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc658476.jpg'}, {'end': 846.802, 'src': 'embed', 'start': 821.7, 'weight': 2, 'content': [{'end': 828.105, 'text': "And anything you add into your file here, whether it's in the head or body, it's going to get added to document.all.", 'start': 821.7, 'duration': 6.405}, {'end': 829.726, 'text': "It's going to get added to that collection.", 'start': 828.145, 'duration': 1.581}, {'end': 833.489, 'text': "All right, so let's see.", 'start': 832.168, 'duration': 1.321}, {'end': 838.134, 'text': "What are some other things we can look at? Now, let's say you wanted to get all the forms on the page.", 'start': 833.509, 'duration': 4.625}, {'end': 844.981, 'text': "You could say, let's do console.log document.forms and save.", 'start': 838.354, 'duration': 6.627}, {'end': 846.802, 'text': "And we're looking right here.", 'start': 845.661, 'duration': 1.141}], 'summary': 'Accessing and logging document forms and elements using console.log.', 'duration': 25.102, 'max_score': 821.7, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc821700.jpg'}], 'start': 630.468, 'title': 'Html and javascript interaction', 'summary': 'Covers working with html using javascript, including changing scripts, examining doc types, accessing head and body elements, and using document.all to obtain an array of elements, as well as explaining the document object model in html, demonstrating how to access and manipulate elements using document.all, document.forms, and document.links with indexes and collections.', 'chapters': [{'end': 686.843, 'start': 630.468, 'title': 'Working with html using javascript', 'summary': 'Discusses changing scripts, examining doc types, accessing head and body elements, and using document.all to obtain an array of elements in the dom.', 'duration': 56.375, 'highlights': ['Accessing head and body elements using document.head and document.body and outputting them to the console.', 'Obtaining an array or HTML collection of elements in the DOM using document.all.', 'Changing scripts and examining doc types are also discussed.']}, {'end': 940.594, 'start': 686.923, 'title': 'Document object model in html', 'summary': 'Explains how to access and manipulate elements in the html document using document.all, document.forms, and document.links, demonstrating the use of indexes and collections.', 'duration': 253.671, 'highlights': ['Explaining how to access and manipulate elements in the HTML document using document.all, document.forms, and document.links Demonstrating the use of indexes and collections to access and manipulate elements in the HTML document, such as forms, links, and images.', 'Demonstrating the use of indexes and collections to access and manipulate elements Showing how to use indexes and collections to access and manipulate specific elements in the HTML document, such as forms, links, and images.', 'Demonstrating the potential confusion when selecting elements from the DOM using the document.all method Warning about the potential confusion and issues when using the document.all method to select elements from the DOM, due to the dynamic nature of the index and the addition of new elements.']}], 'duration': 310.126, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc630468.jpg', 'highlights': ['Accessing head and body elements using document.head and document.body and outputting them to the console.', 'Obtaining an array or HTML collection of elements in the DOM using document.all.', 'Explaining how to access and manipulate elements in the HTML document using document.all, document.forms, and document.links Demonstrating the use of indexes and collections to access and manipulate elements in the HTML document, such as forms, links, and images.']}, {'end': 1255.84, 'segs': [{'end': 971.101, 'src': 'embed', 'start': 940.594, 'weight': 4, 'content': [{'end': 942.595, 'text': 'but those are some of the the interesting ones.', 'start': 940.594, 'duration': 2.001}, {'end': 946.096, 'text': 'So what about selectors?', 'start': 943.696, 'duration': 2.4}, {'end': 953.638, 'text': 'So, basically, we have a few different selecting methods we can use to query the DOM.', 'start': 946.657, 'duration': 6.981}, {'end': 960.299, 'text': "So the first one we're going to look at is getElementById, which I'm sure you've heard of.", 'start': 954.118, 'duration': 6.181}, {'end': 968.16, 'text': "So what we're going to do here is let's console.log, and let's take a look at our DOM or our structure here.", 'start': 961.339, 'duration': 6.821}, {'end': 971.101, 'text': 'And we have an h1 with the id of headerTitle.', 'start': 968.54, 'duration': 2.561}], 'summary': 'Introduction to selecting methods like getelementbyid for dom querying.', 'duration': 30.507, 'max_score': 940.594, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc940594.jpg'}, {'end': 1188.117, 'src': 'embed', 'start': 1123.874, 'weight': 1, 'content': [{'end': 1126.216, 'text': "it's disregarding that span.", 'start': 1123.874, 'duration': 2.342}, {'end': 1130.438, 'text': "even though it's set to display none, it still shows it here.", 'start': 1126.216, 'duration': 4.222}, {'end': 1139.161, 'text': "but if we were to change this to inner text and save, you'll see that the 123 is not there.", 'start': 1130.438, 'duration': 8.723}, {'end': 1142.742, 'text': 'okay. so it actually pays attention to the styling.', 'start': 1139.161, 'duration': 3.581}, {'end': 1146.143, 'text': "so that's one of the biggest differences between the two.", 'start': 1142.742, 'duration': 3.401}, {'end': 1152.064, 'text': 'but you can use them for the most part pretty interchangeably, alright.', 'start': 1146.143, 'duration': 5.921}, {'end': 1155.105, 'text': "so that's that's what text content, inner text.", 'start': 1152.064, 'duration': 3.041}, {'end': 1160.766, 'text': "we also have inner HTML, which I'm sure you guys have seen before, if you've worked with JavaScript at all.", 'start': 1155.105, 'duration': 5.661}, {'end': 1170.885, 'text': "so let's say header title and we'll say innerHTML equals, and let's put an H3..", 'start': 1160.766, 'duration': 10.119}, {'end': 1179.629, 'text': "and we'll say hello, save now.", 'start': 1175.905, 'duration': 3.724}, {'end': 1180.49, 'text': 'you have an h3.', 'start': 1179.629, 'duration': 0.861}, {'end': 1188.117, 'text': "now. if we look at, if we look at it through the inspector, you'll notice that the h3 is actually inside the h1.", 'start': 1180.49, 'duration': 7.627}], 'summary': 'Comparison of text content and inner text, inner html usage in javascript', 'duration': 64.243, 'max_score': 1123.874, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc1123874.jpg'}, {'end': 1255.84, 'src': 'embed', 'start': 1234.352, 'weight': 0, 'content': [{'end': 1243.175, 'text': "In all of these, this text content, inner text, the stuff that I'm doing right now, you can use with any selector, not just document.getElementById.", 'start': 1234.352, 'duration': 8.823}, {'end': 1251.618, 'text': 'In fact, maybe I should have done all of the selectors first and then showed you this stuff, but you can use this with any selector.', 'start': 1243.535, 'duration': 8.083}, {'end': 1255.84, 'text': 'Selecting elements and then using these methods are two different things.', 'start': 1252.158, 'duration': 3.682}], 'summary': 'Javascript methods can be used with any selector for selecting and using elements.', 'duration': 21.488, 'max_score': 1234.352, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc1234352.jpg'}], 'start': 940.594, 'title': 'Dom manipulation with javascript', 'summary': 'Covers dom manipulation methods like getelementbyid, innertext, and textcontent, highlighting their differences and usage for element selection and manipulation.', 'chapters': [{'end': 1059.609, 'start': 940.594, 'title': 'Dom selectors and methods', 'summary': 'Introduces the getelementbyid method for querying the dom, demonstrating how to access and manipulate elements using this method and related properties like textcontent and innertext.', 'duration': 119.015, 'highlights': ['The chapter covers the getElementById method for querying the DOM, showcasing how to access and modify elements using this method and related properties like textContent and innerText.', 'It explains how to use getElementById to retrieve an element from the DOM and manipulate it, providing practical examples such as changing the text content of an h1 element.', 'The chapter illustrates accessing and manipulating elements in the DOM using the getElementById method, demonstrating practical scenarios like changing the text content of an h1 element.']}, {'end': 1152.064, 'start': 1060.329, 'title': 'Difference between innertext and textcontent', 'summary': 'Discusses the difference between innertext and textcontent, highlighting that innertext pays attention to styling, while textcontent disregards styling, with innertext being the preferred choice for handling styled content.', 'duration': 91.735, 'highlights': ['innerText pays attention to styling, while textContent disregards styling innerText pays attention to styling, while textContent disregards styling, leading to the difference in their display behavior.', 'innerText displays content as affected by styling, while textContent disregards styling and displays content as is innerText displays content as affected by styling, while textContent disregards styling and displays content as is, demonstrating the impact of styling on their behavior.', 'innerText is the preferred choice for handling styled content innerText is the preferred choice for handling styled content, indicating its suitability for managing content affected by styling.']}, {'end': 1255.84, 'start': 1152.064, 'title': 'Manipulating html elements with javascript', 'summary': 'Explains how to manipulate html elements using javascript, including text content, inner text, inner html, and style changes, emphasizing that these methods can be used with any selector and are distinct from element selection.', 'duration': 103.776, 'highlights': ['The chapter covers manipulating HTML elements using JavaScript, including text content, inner text, inner HTML, and style changes.', 'The methods demonstrated can be used with any selector, not just document.getElementById.', 'Manipulating the h1 to an h3 requires using other methods to access the parent element, which is more advanced and will be covered later.']}], 'duration': 315.246, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc940594.jpg', 'highlights': ['Covers dom manipulation methods like getelementbyid, innertext, and textcontent, highlighting their differences and usage for element selection and manipulation.', 'The chapter covers manipulating HTML elements using JavaScript, including text content, inner text, inner HTML, and style changes.', 'The methods demonstrated can be used with any selector, not just document.getElementById.', 'innerText is the preferred choice for handling styled content, indicating its suitability for managing content affected by styling.', 'The chapter covers the getElementById method for querying the DOM, showcasing how to access and modify elements using this method and related properties like textContent and innerText.']}, {'end': 1600.052, 'segs': [{'end': 1340.946, 'src': 'embed', 'start': 1312.713, 'weight': 0, 'content': [{'end': 1316.796, 'text': "And then we'll just change this to header and save.", 'start': 1312.713, 'duration': 4.083}, {'end': 1319.178, 'text': 'And now we have the border on the actual header.', 'start': 1317.156, 'duration': 2.022}, {'end': 1321.475, 'text': 'All right.', 'start': 1321.055, 'duration': 0.42}, {'end': 1330.901, 'text': 'so now you should understand get element by ID text content, inner text, inner HTML, and then changing the styles with style dot,', 'start': 1321.475, 'duration': 9.426}, {'end': 1332.401, 'text': 'whatever the CSS property.', 'start': 1330.901, 'duration': 1.5}, {'end': 1340.946, 'text': 'All right, so all stuff that used to be used with jQuery but should be used with vanilla JavaScript now.', 'start': 1332.421, 'duration': 8.525}], 'summary': 'Transitioning from jquery to vanilla javascript for element manipulation and styling.', 'duration': 28.233, 'max_score': 1312.713, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc1312713.jpg'}, {'end': 1399.766, 'src': 'embed', 'start': 1368.5, 'weight': 2, 'content': [{'end': 1371.282, 'text': "For that you would use query selector, but I'll get into that in a minute.", 'start': 1368.5, 'duration': 2.782}, {'end': 1373.599, 'text': 'So get elements by class name.', 'start': 1371.798, 'duration': 1.801}, {'end': 1377.58, 'text': "Let's say we want to get all these list items.", 'start': 1373.639, 'duration': 3.941}, {'end': 1383.161, 'text': 'So we know that these list items have a class of list group item.', 'start': 1378.2, 'duration': 4.961}, {'end': 1387.202, 'text': "So let's say we'll put it in a variable.", 'start': 1384.021, 'duration': 3.181}, {'end': 1393.324, 'text': "So var items equals and then we're going to say document dot get.", 'start': 1387.262, 'duration': 6.062}, {'end': 1399.766, 'text': 'What am I doing? Get elements by class name.', 'start': 1395.445, 'duration': 4.321}], 'summary': 'Using getelementsbyclassname to select list items in javascript.', 'duration': 31.266, 'max_score': 1368.5, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc1368500.jpg'}], 'start': 1257.029, 'title': 'Manipulating html and css with javascript', 'summary': 'Covers manipulating css styles with vanilla javascript, accessing elements by id, using getelementsbyclassname method, and manipulating html elements, providing syntax, functionality, and comparisons with other methods.', 'chapters': [{'end': 1340.946, 'start': 1257.029, 'title': 'Manipulating css styles with vanilla javascript', 'summary': 'Explains how to manipulate css styles using vanilla javascript, including changing the border style of an element, using camel case for css properties, and accessing elements by id to apply style changes.', 'duration': 83.917, 'highlights': ['The chapter explains how to change CSS styles using vanilla JavaScript, including using camel case for CSS properties, accessing elements by ID to apply style changes, and transitioning from using jQuery to vanilla JavaScript for style manipulation.', 'The tutorial demonstrates changing the border style of an element to be solid, three pixels wide, and black using vanilla JavaScript, showcasing the practical application of style manipulation in a webpage.', 'The speaker emphasizes the need to use camel case for CSS properties in JavaScript, highlighting a key aspect of manipulating styles using vanilla JavaScript.']}, {'end': 1437.45, 'start': 1341.026, 'title': 'Javascript dom manipulation', 'summary': 'Covers the usage of getelementsbyclassname method in javascript, including its syntax, functionality, and the output received, as well as a comparison with other dom manipulation methods.', 'duration': 96.424, 'highlights': ['The getElementsByClassName method in JavaScript is used to retrieve all elements with a specified class name, returning them as an HTML collection.', 'The method allows access to individual elements through indexing, providing a way to manipulate and interact with the selected elements.', 'It is highlighted that the getElementsByClassName method differs from getElementById and querySelector methods, emphasizing its unique functionality and syntax.']}, {'end': 1600.052, 'start': 1437.49, 'title': 'Manipulating html elements with javascript', 'summary': 'Discusses manipulating html elements using javascript, covering how to access and modify specific elements, change text content, apply styles, and iterate through collections of elements.', 'duration': 162.562, 'highlights': ['The chapter covers accessing and modifying specific HTML elements using JavaScript, demonstrating how to change text content, apply styles, and iterate through collections of elements.', 'Demonstrates how to access specific elements by their index in an array-like collection, such as changing the text content of a specific item using its index and modifying its style properties, providing a practical example of manipulating HTML elements.', 'Explains the need to iterate through collections of elements using a for loop in JavaScript, illustrating how to access and modify multiple elements at once, with a specific example of applying a style to all elements in a collection.', 'The chapter also highlights the requirement to loop through collections of elements in JavaScript using a for loop, emphasizing the need to iterate through each element to apply changes, such as modifying the background color of multiple elements simultaneously.']}], 'duration': 343.023, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc1257029.jpg', 'highlights': ['The tutorial demonstrates changing the border style of an element to be solid, three pixels wide, and black using vanilla JavaScript, showcasing the practical application of style manipulation in a webpage.', 'The chapter explains how to change CSS styles using vanilla JavaScript, including using camel case for CSS properties, accessing elements by ID to apply style changes, and transitioning from using jQuery to vanilla JavaScript for style manipulation.', 'The getElementsByClassName method in JavaScript is used to retrieve all elements with a specified class name, returning them as an HTML collection.', 'The chapter covers accessing and modifying specific HTML elements using JavaScript, demonstrating how to change text content, apply styles, and iterate through collections of elements.']}, {'end': 2340.074, 'segs': [{'end': 1664.334, 'src': 'embed', 'start': 1631.333, 'weight': 0, 'content': [{'end': 1634.194, 'text': "Now we're going to take a look at get elements by tag name.", 'start': 1631.333, 'duration': 2.861}, {'end': 1643.318, 'text': "Now this works basically the same way, except instead of getting it by class, you're getting it by tag.", 'start': 1637.856, 'duration': 5.462}, {'end': 1647.26, 'text': "So what I'm going to do is I'm actually going to copy.", 'start': 1643.838, 'duration': 3.422}, {'end': 1649.487, 'text': 'this whole thing.', 'start': 1648.746, 'duration': 0.741}, {'end': 1652.991, 'text': "i'm going to copy it and then i'm going to comment it out.", 'start': 1649.487, 'duration': 3.504}, {'end': 1654.733, 'text': "okay, we'll paste it here.", 'start': 1652.991, 'duration': 1.742}, {'end': 1664.334, 'text': "now let's change the variable to li, and what i want to do is say get elements by tag name and then just pass in here li.", 'start': 1654.733, 'duration': 9.601}], 'summary': 'Demonstrating how to use get elements by tag name to select elements.', 'duration': 33.001, 'max_score': 1631.333, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc1631333.jpg'}, {'end': 1735.719, 'src': 'heatmap', 'start': 1707.974, 'weight': 1, 'content': [{'end': 1712.857, 'text': "Now even though I don't have a class of list group item, it still applies because it's an li.", 'start': 1707.974, 'duration': 4.883}, {'end': 1714.978, 'text': "It's going by the tag, not by the class.", 'start': 1712.897, 'duration': 2.081}, {'end': 1724.391, 'text': 'If I were to just do it by the class like I did up here, then this would have no effect.', 'start': 1715.805, 'duration': 8.586}, {'end': 1726.333, 'text': 'Let me just show you what I mean.', 'start': 1725.332, 'duration': 1.001}, {'end': 1735.719, 'text': "If I comment that out and we uncomment this and save, you'll see that now this stuff, nothing is being applied.", 'start': 1726.513, 'duration': 9.206}], 'summary': 'Applying styles using tag instead of class has no effect on the list items.', 'duration': 27.745, 'max_score': 1707.974, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc1707974.jpg'}, {'end': 1775.934, 'src': 'embed', 'start': 1746.618, 'weight': 4, 'content': [{'end': 1748.861, 'text': "all right, so let's get element by tags name.", 'start': 1746.618, 'duration': 2.243}, {'end': 1754.309, 'text': "i'm not going to spend too much time on it, because it's identical to the class name.", 'start': 1748.861, 'duration': 5.448}, {'end': 1756.712, 'text': 'now what i want to do is look at query selector.', 'start': 1754.309, 'duration': 2.403}, {'end': 1759.737, 'text': 'all right, so this is an important one.', 'start': 1756.712, 'duration': 3.025}, {'end': 1761.219, 'text': 'so query selector.', 'start': 1759.737, 'duration': 1.482}, {'end': 1769.589, 'text': 'So for this, this works pretty much just like jQuery.', 'start': 1765.245, 'duration': 4.344}, {'end': 1775.934, 'text': 'The only big difference is you use it only for one item.', 'start': 1770.609, 'duration': 5.325}], 'summary': 'Introduction to element selection using query selector, similar to jquery.', 'duration': 29.316, 'max_score': 1746.618, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc1746618.jpg'}, {'end': 2033.301, 'src': 'embed', 'start': 1996.528, 'weight': 2, 'content': [{'end': 2000.729, 'text': "What happens? It's going to get the first one on the page.", 'start': 1996.528, 'duration': 4.201}, {'end': 2003.249, 'text': "Now let's say we wanted to get the last one.", 'start': 2000.869, 'duration': 2.38}, {'end': 2009.21, 'text': 'We could use the CSS last child.', 'start': 2003.289, 'duration': 5.921}, {'end': 2014.191, 'text': "So we'll say var and let's say last item first.", 'start': 2009.93, 'duration': 4.261}, {'end': 2018.673, 'text': "actually, I'll just copy this.", 'start': 2014.591, 'duration': 4.082}, {'end': 2033.301, 'text': "so we'll say last item and we'll select list, group, item, colon, last child, and then let's say last item, dot style.", 'start': 2018.673, 'duration': 14.628}], 'summary': 'Using css last child to select the last item on the page.', 'duration': 36.773, 'max_score': 1996.528, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc1996528.jpg'}, {'end': 2118.716, 'src': 'embed', 'start': 2079.025, 'weight': 1, 'content': [{'end': 2079.406, 'text': 'There we go.', 'start': 2079.025, 'duration': 0.381}, {'end': 2081.407, 'text': 'So now the second one is coral.', 'start': 2079.485, 'duration': 1.922}, {'end': 2087.408, 'text': "Okay, so we can use these CSS pseudo classes or pseudo selectors, whatever they're called.", 'start': 2082.067, 'duration': 5.341}, {'end': 2093.056, 'text': "All right, so what about querySelectorAll? Let's take a look at that.", 'start': 2088.853, 'duration': 4.203}, {'end': 2109.342, 'text': 'So querySelectorAll works similar to getElementsByTagName, getElementsByClassName.', 'start': 2102.74, 'duration': 6.602}, {'end': 2111.183, 'text': "It's going to grab more than one thing.", 'start': 2109.362, 'duration': 1.821}, {'end': 2114.865, 'text': "So what I'm going to do here is create a variable.", 'start': 2111.903, 'duration': 2.962}, {'end': 2118.716, 'text': "Let's see.", 'start': 2118.175, 'duration': 0.541}], 'summary': 'Discussion about using css pseudo classes and queryselectorall in coding.', 'duration': 39.691, 'max_score': 2079.025, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc2079025.jpg'}], 'start': 1600.572, 'title': 'Javascript dom manipulation', 'summary': 'Covers working with elements in javascript, including using get elements by class name, get elements by tag name, queryselector, and queryselectorall. it demonstrates manipulating elements, accessing elements by index, looping through them, using pseudo selectors, and performing array functions on a node list.', 'chapters': [{'end': 1744.686, 'start': 1600.572, 'title': 'Working with elements in javascript', 'summary': 'Demonstrates how to manipulate elements in javascript using get elements by class name and get elements by tag name, including examples of applying styles and accessing elements by index and looping through them.', 'duration': 144.114, 'highlights': ['The chapter demonstrates how to manipulate elements in JavaScript It covers the use of get elements by class name and get elements by tag name to manipulate elements in JavaScript.', 'Applying styles and accessing elements by index and looping through them The examples include applying styles to elements, accessing elements by index, and looping through the elements.', 'Applying styles using get elements by class name It shows how to apply styles to elements using get elements by class name, with the example of setting a gray background color to elements.', 'Accessing elements by tag name and applying styles The method of accessing elements by tag name is explained with an example of applying styles to list items using get elements by tag name.', 'Effect of applying styles based on class vs. tag name The difference in applying styles based on class and tag name is demonstrated, highlighting that applying styles by tag name affects all elements with the specified tag, regardless of class.']}, {'end': 2340.074, 'start': 1746.618, 'title': 'Javascript query selector and query selector all', 'summary': 'Discusses the usage of queryselector and queryselectorall in javascript, demonstrating how to select and manipulate elements in the dom, including using pseudo selectors, and the ability to perform array functions on a node list.', 'duration': 593.456, 'highlights': ['querySelector and querySelectorAll These methods in JavaScript are used to select and manipulate elements in the DOM, and they allow for the selection of elements using CSS selectors, with querySelectorAll returning a node list that can be manipulated using array functions.', 'Manipulating element styles The chapter demonstrates how to use querySelector to select elements by tag, class, or ID, and then manipulate their styles, such as adding a border or changing the color, providing practical examples of how to perform these actions.', 'Using pseudo selectors The usage of pseudo selectors, such as :last-child and :nth-child, is shown to select specific elements within a group, demonstrating how to apply different styles to alternate or specific elements based on their position.']}], 'duration': 739.502, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ik6X4DJKCc/pics/0ik6X4DJKCc1600572.jpg', 'highlights': ['The chapter demonstrates how to manipulate elements in JavaScript using get elements by class name and get elements by tag name.', 'querySelector and querySelectorAll are used to select and manipulate elements in the DOM, allowing for the selection of elements using CSS selectors.', 'Applying styles to elements, accessing elements by index, and looping through them are covered in the chapter.', 'The method of accessing elements by tag name is explained with an example of applying styles to list items using get elements by tag name.', 'The difference in applying styles based on class and tag name is demonstrated, highlighting that applying styles by tag name affects all elements with the specified tag, regardless of class.', 'The usage of pseudo selectors, such as :last-child and :nth-child, is shown to select specific elements within a group.']}], 'highlights': ['The video covers JavaScript fundamentals for beginners, including variables, arrays, functions, and loops, providing a strong foundation.', 'The chapter emphasizes the redundancy of using jQuery for DOM manipulation and advocates for vanilla JavaScript for such tasks.', 'A simple HTML page is introduced for practical exploration, providing hands-on experience for viewers working with vanilla JavaScript.', "The DOM is a structured representation of the HTML document, and JavaScript can be used to manipulate its elements. jQuery was used for a long time, but it's becoming more popular to use vanilla JavaScript.", 'The console.dir command allows developers to view all the different properties and methods attached to the document object, providing a comprehensive understanding of the available functionalities for web development.', 'The chapter emphasizes the ability to modify properties such as the title of the page, demonstrating that it is not read-only and can be changed to enhance user experience and functionality.', 'The document object in JavaScript allows access to properties like domain, URL, and title, enabling developers to modify them for dynamic web content.', 'Accessing head and body elements using document.head and document.body and outputting them to the console.', 'Obtaining an array or HTML collection of elements in the DOM using document.all.', 'Explaining how to access and manipulate elements in the HTML document using document.all, document.forms, and document.links Demonstrating the use of indexes and collections to access and manipulate elements in the HTML document, such as forms, links, and images.', 'Covers dom manipulation methods like getelementbyid, innertext, and textcontent, highlighting their differences and usage for element selection and manipulation.', 'The chapter covers manipulating HTML elements using JavaScript, including text content, inner text, inner HTML, and style changes.', 'The tutorial demonstrates changing the border style of an element to be solid, three pixels wide, and black using vanilla JavaScript, showcasing the practical application of style manipulation in a webpage.', 'The chapter explains how to change CSS styles using vanilla JavaScript, including using camel case for CSS properties, accessing elements by ID to apply style changes, and transitioning from using jQuery to vanilla JavaScript for style manipulation.', 'The chapter demonstrates how to manipulate elements in JavaScript using get elements by class name and get elements by tag name.', 'querySelector and querySelectorAll are used to select and manipulate elements in the DOM, allowing for the selection of elements using CSS selectors.', 'Applying styles to elements, accessing elements by index, and looping through them are covered in the chapter.', 'The method of accessing elements by tag name is explained with an example of applying styles to list items using get elements by tag name.', 'The difference in applying styles based on class and tag name is demonstrated, highlighting that applying styles by tag name affects all elements with the specified tag, regardless of class.', 'The usage of pseudo selectors, such as :last-child and :nth-child, is shown to select specific elements within a group.']}