<article>

<aside>

<details>

<figcaption>

<figure>

<footer>

<header>

<main>

<mark>

<nav>

<section>

<summary>

<time>

• https://www.w3schools.com/css/css_positioning.asp

• Relative

• Displays relative to enclosing element; does consider content inside;

• Absolute
 • Similar to relative but doesn’t take into account another content

• Static

• Stay on position in accordance with flow; no impact of left, right etc.

• Fixed

• Similar to absolute; but stays fixed on position with scroll.

Properties

Float

https://www.w3schools.com/css/css_float.asp

Clear

Overflow

https://www.w3schools.com/css/css_overflow.asp

Display

https://www.w3schools.com/cssref/pr_class_display.asp

Visibility

https://www.w3schools.com/cssref/pr_class_visibility.asp
var x = myFunction(4, 3); // Function is called, return value will end up in x

function myFunction(a, b) {
return a * b; // Function returns the product of a and b
}

There can be numerous operations on arrays

“length” property determines number of elements in array  person.length

“shift()” & “pop()” is used to remove an elements from first & last position respectively

“unshift()” & “push()” inserts/adds an element at first and last position respectively

Use “delete” operator to remove items based on index  delete person[2];

“splice()” is used to insert/delete elements based on index

array.splice(index, howmany, item1, ....., itemX)

“concat()” is used to merge to arrays  person.concat(student);

“sort()” in ascending order

“reverse()” reverses the order

• While sending data to server, use JSON.stringify;

• While retrieving data from server, use JSON.parse;

document.getElementById(id)

Access a unique element based on id

document.getElementsByTagName(name)

Access all elements with specific tag

document.getElementsByClassName(name)

Access all elements with specific class applied

You can access the “value” of an element by the value property.

For example, if you have an “input” element that has the attribute id=“dem” :

var pass = document.getElementById(‘dem').value;

htmlElementObject].innerHTML = “<p>Hello!<br/>How are you ?</p>”

Translates HTML elements and render accordingly

[htmlElementObject].innerText = “<p>Hello!<br/>How are you?</p>”

Doesn’t translate HTML elements and render as text

[htmlElementObject].[attribute] = [value]

document.getElementById(“dvTitle”).className = “newClass”

[htmlElementObject].setAttribute(attribute, value)

document.getElementById(“dvTitle”).setAttribute(“class”, “newClass”)

[htmlElementObject].style.[property] = [value]
document.getElementById(“dvTitle”).style.color = “red”

Date() to get current date (client’s machine)

setInterval(), continue to execute function/code after specified time until explicitly stopped

setInterval(move, 10) //execute function move after every 10 milliseconds

clearInterval(), used to stop execution of setInterval()

setTimeout, used to execute function/code only once after specified time

setTimeoutl(move, 3000) //execute function move once after 3 seconds

With the HTML DOM, you can navigate the node tree using node relationships.

The entire document is a document node

Every HTML element is an element node

The text inside HTML elements are text nodes

Every HTML attribute is an attribute node

All comments are comment nodes

You can use the following node properties to navigate between nodes with JavaScript:

• parentNode

• childNodes[nodenumber]

• firstChild

• lastChild

• nextSibling

• previousSibling

You can use the following node properties to navigate between nodes with JavaScript:
parentNode

childNodes[nodenumber]

firstChild

lastChild

nextSibling

previousSibling

• A common error in DOM processing is to expect an element node to contain text.

• The element node <title> (in the example above) does not contain text.

• It contains a text node with the value "DOM Tutorial".

There are two special properties that allow access to the full document:

document.body - The body of the document

document.documentElement - The full document returns the Element that is the root element of the document.
Node Lenght

onmouseenter

onmouseleave
onmouseover

onmouseout

onmousemove

Many more……..

• Input events

onsubmit - When a user clicks the submit button

onblur - When a user leaves an input field

onchange - When a user changes the content of an input field

onchange - When a user selects a dropdown value

onfocus - When an input field gets focus

onselect - When input text is selected

onreset - When a user clicks the reset button

onkeydown - When a user is pressing/holding down a key

onkeypress - When a user is pressing/holding down a key

onkeyup - When the user releases a key

• Click Events

onclick - When button is clicked

ondblclick - When a text is double-clicked

• Load Events

onload - When the page has been loaded

onload - When an image has been loaded

onerror - When an error occurs when loading an image

onunload - When the browser closes the document

onresize - When the browser window is resized