DOM

BOM

BOM

The Browser Object Model (BOM) allows JavaScript to "talk to" the browser.

DOM

With the HTML DOM, JavaScript can access and change all the elements of an HTML document.

BOM

The window object is supported by all browsers. It represents the browser's window.

• All global JavaScript objects, functions, and variables automatically become members of the window object.
• Global variables are properties of the window object.
• Global functions are methods of the window object.
• Even the document object (of the HTML DOM) is a property of the window object

BOM

• window.history - contains the browsers history
• window.location - can be used to get the current page address (URL) and to redirect the browser to a new page
• window.navigator - contains information about the visitor's browser

BOM

• window.alert()
• window.confirm()
• window.prompt()

BOM

• window.setTimeout(function, milliseconds);
• window.clearTimeout(timeoutVariable);
• window.setInterval(function, milliseconds);

• window.clearInterval(timerVariable);

sessionStorage

maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores)

localStorage

• Stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser cache / Locally Stored Data
• Storage limit is the maximum amongst the three

Cookies

Cookies

Cookies let you store user information in web pages.

When a web server has sent a web page to a browser, the connection is shut down, and the server forgets everything about the user.

Cookies were invented to solve the problem "how to remember information about the user":

• When a user visits a web page, his name can be stored in a cookie.
• Next time the user visits the page, the cookie "remembers" his name.

Create a Cookie with JavaScript

You can also add an expiry date (in UTC time). By default, the cookie is deleted when the browser is closed

With a path parameter, you can tell the browser what path the cookie belongs to. By default, the cookie belongs to the current page

DOM

Finding dom nodes:

• document.getElementById(id)
• document.getElementsByTagName(name)
• document.getElementsByClassName(name)
• document.querySelector(selectors)
• document.querySelectorAll(selectors);

DOM

Node properties:

 

element.innerHTML =  new html content

Change the inner HTML of an element

element.style.property = new style

Change the style of an HTML element

element.classList 

is a read-only property that returns a live DOMTokenList collection of the class attributes of the element.

 

DOM

Node methods:

element.addEventListener()

Registers an event handler to a specific event type on the element

element.removeEventListener()

Removes the named attribute from the current node

element.setAttribute(attribute, value)

Change the attribute value of an HTML element

element.appendChild(child)

Adds a node to the end of the list of children of a specified parent node

DOM

element.insertAdjacentHTML(position, text)

The insertAdjacentHTML() method parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position.