Position of Elements, DOM family in Javascript, Apr/5/2023

Today, I leanred is about the element postition in Javascript.

 

In the Javascript, the posisiton property is used to specify the type of positioning.

• absolute: The element is removed from normal flow and positioned in relation to its nearest positioned ancestor (if no positioned ancestor, then in relation to the browser window).
• fixed: The element is fixed in a specific position in the window even when the document is scrolled. 
• relative: The element is moved relative to where it would be in the normal flow.
• static: The element is positioned according to the normal flow. This is the default.

 

1. Absolute Positioning

Absolute position

2. Relative Positioning

Relative position

3. Overlapping Elements

Overlapping Elements

4. Hiding Elements

Hiding Elements

 

For changing an element's posistion, there are two methods below:

 

For changing element's content, there are two methods below:

When you change the element's content, you should know about how innerHTML and textContent work.

textContent will not parse the HTML for you. If you want the specified text to be parsed you should use the InnerHTML. It returns everything indcluded tags.

 

Now, we learn the DOM family relation in Javascript.

We know the relation tree in HTML like this.

This is the quick review for HTML relation. In Javascript, you have a function to use with this tree.

• appendChild: Adds a new child node to the end of the current node
• createElement: Creates an HTML element node
• createTextNode: Creates a text node
• removeChild: Removes a child from the current node
• replaceChild: Replaces a child node with a different child

This is the simple example of the functions:

In class exercise for the order list in HTML with using Javascript function.

The variable named "node" includes the function to create the element li in HTML. And the textnode creates the text Water.

node.appendChild(textnode) appends the text node to the li node. document.getElementByID("mylist").appendChild(node) append the li node to the list.

 

I can see the clear relationship between element and text. In this code, we append text node to element node. And then append the element node to the mylist we want to append. 

 

It is important to know DOM timing. You cannot access or modify the DOM untill it has been loaded.