You might also get some questions regarding how JavaScript is working with Dom, for example, here
we must highlight all of the words over eight characters long in the paragraph text with yellow background.
And as you can see here, I have indexes HTML and we have our pedigree and we have our head in paragraph
and we have quite a lot of text here.
And if you want to try it yourself, I will link the source code in the description box below.
So you should not type this whole text.
So this is how tact is looking now, how we can implement this specific task.
First of all, we must find our paragraph.
And this is really easy that we have just a single paragraph.
So here we can say that we find in paragraph and here this document or query selector, and here is
P.
And as you can see, I used here quite select and this is super important if you will try to use get
element by eight or get 11 by class.
This is not the best approach, and it shows that you didn't work with Dom too much.
This is why you always must use query selector or quota selector.
Oh, if you want to get a list of your elements, in our case, we get just a single element.
This is why we simply right here and we're getting our paragraph.
We could also write here a dollar sign at the beginning, just like in Jake Versatile and for example,
I prefer to do it too easily distinguished by the name the difference between just elements and dom
elements.
But for now, we will keep it just like a paragraph.
But we want to do now.
We want to change our content so our inertia to mount.
This is where we can write paragraph dot in the STEM equals.
And we want, first of all, to read paragraph dot in a stem cell.
And as you can see, this is how our content inside in this cell is looking like.
So this is just a plain string, and now we can work with it, just like with normal JavaScript string.
So what we want to do now here, we want, first of all, to split it with space.
In this case, we are getting an array of our words.
And now we can use Map to work with every single word.
So actually, here we are getting word and inside we want to check if a word is longer than eight symbols
so we can simply return here.
Word dot land bigger than eight symbols.
Then here we want to write ternary operator.
And if we're bigger than eight symbols, then we want to wrap it in yellow, which actually means we
want to write another Dom node inside.
This is where here I will create a string div with style inside and inside style by writing background
color.
For example, yellow.
Here we must close our div and actually div is bad.
We must use his pen because this will be an inland element.
And inside this pen, we're just writing a word that was there previously.
So in this case were written and you don't know.
And if we didn't change a word then was simpler to turn this word back.
As you can see, in this case, first of all, we take our string inside in this HTML was blighted by
words with space where maybe in every single word and we're checking the length.
In this case, I'm returning your dumb node or I am returning the word in self.
And after we're finished with our map, we must change everything back.
This is why here we're joining with space, just like we did previously.
Let's check what we're getting.
I'm reloading here, the page.
And as you can see, all our words which are longer than eight symbols, will be highlighted with yellow,
which means actually in a few lines, we can solve this task.
And you can get different tasks regarding Dom.
So what you need to know is how to get elements from Dom.
How to remove them from Dom.
How to update them.
And actually how to transform Dom elements directly to JavaScript strings, for example.
So you can work with them.