Key Concepts that you need to know in Dom-JavaScript

What you need to know about DOM manipulations.

Adding Elements to the page;

• We can do this by the help of 2 main keywords,  that is to say;

a)append: This can be used to add strings and multiple characters to the page at the same time.

Forexample:

const body = document . body;
body = append("Hello world", "Bye")

b)appendChild:This only adds strings into the page,and only one at a time.

Forexample :

const body = document . body;
body = appendChild("Hello world")

• Therefore to create an element and add it on a page, we can say;

const body = document. body
const div = document . createElement(div)
div.innertext = "Hello World"
body.append(div)

NB: Incase we want to render a text having html tags but within script.js,  then we use innerHtml.

For security purposes, that is, to prevent other users from having to access over modifications in your document, it is not advisable to use inner Html.

Forexample:

div.innerHtml = <strong>Hello world2</strong>

Incase we want to remove an element or text from the page, we use the remove method.

-That is to say;

div.remove()

And to add it back, we use the append keyword

-That is to say;

div.append(div)

Incase we also want to access a certain element from our page, we can use the getAttribute(elementname) method.

Then to change the attribute or a specific element,  we use the setAttribute(target, new value) method.

If you want to remove the attribute,  we implement the removeAttribute(what you want to remove) method.

We can also directly modify our css using JavaScript

Forexample;

div.style.color = red
div.style.backgroundColor = grey

We use Carmel case when implementing css in our script.js.

Some of the main things to be used or implemented in our DOM most of the time, will be;

-working on components and
-modification of the web page.

I also used the same concepts above for a Quote Generator. This can be accessed on my Github account whose link is as below;

My Github link

My linked in