Modifying the DOM

[00:00:00]
>> 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:00:20]
We use JavaScript dot syntax notation to change properties. So, and by the way, I'm here simplifying this a little bit because actually, it's a little bit more complex. We have properties and HTML attributes, and actually not the same. Later I will show you an example when this is not exactly the same.

[00:00:41]
But for now, this is the first part of the workshop. Let's simplify this a little bit. And let's say that when you change the property of the JavaScript DOM element, you are kind of changing the attribute, the HTML attribute. And 99% of the properties have the same name as the HTML attribute name.

[00:01:00]
But there are a couple of exceptions. For example, class. Because class, the HTML class attribute, is class name in JavaScript, that's because class, it's a reserved keyword in JavaScript. So it can't be used as a property name. The other one is for, when you have a label in HTML, label for.

[00:01:21]
In JavaScript, it's not called for, it's called htmlFor. And if you're coming from React, you're probably used to that because React or other language, because it's also JavaScript so they're also changing those properties, anyway. To change the styles of a DOM element, we access the style object of the DOM element.

[00:01:43]
I'm talking about that object. So every DOM element has a style property, and that style property have all the CSS attributes on that particular browser available as a JavaScript property. And in this case, have in mind, we need to change the kebab syntax. That's the one with a hyphen, for example, font-size or border-right-color.

[00:02:09]
We change that to camel case, okay? So capital R, capital C, capital S. And again, most of the libraries that you're used to are already doing that. So that's probably not new, okay? Because we cannot use a hyphen in JavaScript in a property. That's why they had to make that change.

[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:22]
We will use that later. But if you're not going to use it, you don't even need to define that because this is JavaScript, and you're not forced to define labels or variable names for all the arguments. Okay, so you can just do something like this. And this is how, typically, event handlers look like in JavaScript, okay?

[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 nodes 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:08]
Very simple, it's just a property. With innerHTML, it's just the same. The difference is that we can write the HTML. And most of the time these days, we use the template strings of the backtick in JavaScript that will let us even write multi-line strings. So I can write HTML, like so, like if it's an HTML file directly in JavaScript.

[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.