Transcript from the "Modifying the DOM" Lesson
>> So for example, if you wanna read or change attributes of a DOM element, it's actually pretty simple. We just use dot syntax. So there is no need for special syntax, like using an '@' symbol or using colon. I mean, depends on different frameworks, different ways to this, okay, but it's just dot syntax.
[00:02:30] And to listen for events, we typically use addEventListener. The name of the event as a string and a function, okay? So we take an element. It can be a button. It can be the whole document. It can be the window, a list, a ul, anything, any object in the DOM structure can have an event listener.
[00:02:55] It's addEventListener, event name. And then the handler, the function, can be a function that you declare there, like this. It can be like a little function that is typically pretty common. And, of course, these days you can use arrow functions to declare the event handler. And the event handler receives an argument with event metadata.
[00:03:49] So, to access and edit the contents of an HTML, so you have a paragraph. In the text of the paragraph, you can change the text content property, the inner HTML property. The difference is that the first one does not support HTML. So if you write HTML, you will actually convert the less than and greater than symbols into a Unicode representation in HTML.
[00:04:22] So you will actually see the HTML, the user will see the HTML code. InnerHTML will actually let you define HTML, you can define the whole web page in an inner HTML property as a string, or you can use the DOM APIs to create new notes and we will see all the versions.
[00:04:43] We will play with all these versions later, okay? So for example, in this case, I'm getting an element by its ID, but using querySelector, I know its ID because it's hash. So this is a CSS way to get an ID, and I can read the text content, or I can change the text content of that element.
[00:05:33] This is not JSX, okay, because this is within a string, it's still a string, okay? But anyway, it kind of looks like JSX, the only problem is that no one is going to validate if what we have inside the string is valid or not. And with DOM API, using the DOM API looks more verbose.
[00:05:58] So for example, in this case, we can create an H1 with document.createElement H1. This is creating a new element, a new h1 element in memory only for now. Then we change the text content of that h1 in memory and we append that as a child to the element, in this case, a header inside a section, okay?
[00:06:23] When we use appendChild, In that case, it appears in the DOM. Not yet in the UI because we are still executing code, okay? So when this thread is released, here, when there is no more code to execute. In that case, the browser will say, okay, let's see, we have a new h1.
[00:06:44] Let's render that, okay? And then we create another one, in this case, a paragraph with its own text and we are adding that also to the same element. So now we will end up with the same code as this one, innerHTML, but differently. In this case, we wrote the h1 and the paragraph as a string and this is going to be parsed by the browser and it will create the nodes for me.
[00:07:14] Here, we are writing a string and then the browser will pass that and it will create the DOM elements for me. And here I'm creating the elements manually. Every technique has pros and cons, okay? Later we will use both and you will understand which one is better for each situation.
[00:07:35] I'm not saying you need to always use this one or that one, it's typically based on the case.