- to manipulate items on a webpage, JS takes control of the host environment - Window can be separated into 3 poritons: → DOM ⇒ elements → BOM (browser object model) ⇒ screen, navigator.. → JavaScript ⇒ arrays, functions
Window - window object root element of the browser's window - can access its properties: window.outerWidth for example -
var temp_object = {} temp_object == window.temp_object //objects created belong to the window root object
Browser Object Model - related to the browser but not the content - e.g. screen - navigator object: contains information about the browser client, such as userAgent property - history object: involves information regarding browser's history and how to manipulate it - location object: gives information about the tab's current URL → location.hostname, location.href
Document Object Model - consists of visible objects and elements - data structure representing DOM is a tree - Document → HTML ⇒ <head> • <title> ◇ “title” ⇒ <body> • <h1> ◇ “header” • <script> ◇ “alert()” ◇ TYPE text/javascript (attribute node) - to work with the DOM tree we have to → access the elements we want → find the node we want → use the nodes text context, childrn and attributes → work with the element you want to update or change in any way - document.getElementByID can access individual objects - document.querySelector can use a CSS query to select the element. only selects the first instance of an item if there are more than one. - document.getElementsByClassName, getElementsByTagName, querySelectorAll to select multiple elements. - when a DOM method returns multiple items they're stored in a node list and you have to be able to handle the list - For any node in the DOM, we can access adjacent nodes: → x.firstChild, lastChild.. → x.parentNode → x.nextSibling, previousSibling.. → x.childNodes - different properties we can access to update node content → textContent ⇒ gets/sets only text ⇒ will display hidden items ⇒ supported by all browsers and IE9 → innerText ⇒ gets/sets only text ⇒ only displays visible text (not set to display:none) ⇒ not supported by firefox → innerHTML ⇒ gets/sets text AND markup
Manipulating the DOM - createElement() - create the item - createTextNode() - give it content - appendChild() - add it to the DOM - removeChild() - remove elements from DOM
Index