JavaScript DOM

Lecture Overview The Basics of the Document Object Model (DOM) DOM structure Navigating the DOM Manipulating elements

The Document Object Model There really is not that much to the JavaScript language itself It’s just a subset of Java JavaScript uses the Document Object Model (DOM) objects to get at the browser, its documents, and its windows This is where the real power comes in Other “things” can use the DOM too (.NET for example)

What is the DOM (1)? The HTML DOM is a tree of objects It permits access to the contents, structure, and style of an HTML 5 document An XML document too The DOM can communicate with multiple browser instances It’s formally defined by the W3C "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

What is the Dom (2)?

What is the DOM (3)? Use the DOM to hide and make elements visible change CSS styles dynamically create new document elements move document elements and remove them too

The DOM Hierarchy

DOM Programming Model It’s an object model and a programming interface HTML elements are considered objects They have properties to store data Some properties are read / write Some properties are read only innerHTML for example They have methods that perform actions getElementById for example They respond to events

We will Talk About document (the currently loaded document in the browser) navigator (the browser itself) window (a window in the browser)

The document Object The document object represents your running HTML document as it is seen by the browser We can find elements and set their properties change elements add and delete elements

The document Object (Finding Elements) Method Description document.getElementById() Find an element by element id document.getElementsByTagName() Find elements by tag name document.getElementsByClassName() Find elements by class name

The document Object (Changing Element Content) Method Description element.innerHTML= Change the inner HTML of an element element.attribute= Change the attribute of an HTML element element.setAttribute(attribute,value) element.style.property= Change the style of an HTML element

The document Object (Adding / Deleting Elements) Method Description document.createElement() Create an HTML element document.removeChild() Remove an HTML element document.insertBefore() Insert a new element document.appendChild() Add an HTML element document.replaceChild() Replace an HTML element document.write(text) Write into the HTML output stream See example in IS360JavaScriptDomExample.html

The document Object (A Canonical List) Refer to W3Schools http://www.w3schools.com/js/js_htmldom_document.asp

Referencing Elements by ID Remember each HTML element has an ID attribute This attribute is special – it’s the unique identifier for the node It’s value should begin with a letter for compatibility with all browsers Use the getElementById method to get a reference to the node The method applies to the document object

Referencing Elements by ID (Example) Get and change the text in the paragraph named First <script type="text/javascript"> function ShowTree() { x=document.getElementById("First"); x.innerHTML = "Changed"; } </script> The paragraph declaration <p id="First">Hello world!</p>

Getting Elements by Tag Name getElementsByTagName gets a list (array) of elements having a particular tag name The length property of the array tells us how many item are in the array Each element can be referenced via an array subscript

Getting Elements by Tag Name (Example) Collapse (hide) all paragraph elements

Getting Elements by Query Selector The querySelectorAll() method selects objects (elements) based on a CSS query selector These are the same query selectors that you have used before

Getting Elements by Query Selector Collapse all <p> tags in a <section>

Getting Elements by Class Name You can get all elements that belong to a particular class by calling getElementsByClassName The method accepts one argument – the class name The method returns an array of elements

Creating new Elements First create an element with createElement() Optionally put text in the element with createTextNode() Append the text to the above element Insert the element that you created in the DOM where you want it

Creating New Elements (Example)

Determining the Browser Use the navigator object to get info about the browser appVersion gets the major version Netscape Microsoft Internet Explorer appMinorVersion gets the minor version Supported by IE only appName gets the name of the browser

Determining the Browser Location geolocation gets coordinates for browsers that support it Getting the location is a multi-step process Call navigator.geolocation.getCurrentPosition() to get the current position Create a callback function to process the returned coordinates https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition

Determining the Browser Location

The window object The window object provides a reference to the open browser window Through the window object, you can Reference the elements on the page through the DOM Create new windows and destroy them

The window Object (Introduction) It’s the root of the IE object hierarchy It refers to the IE Browser windows The document property contains a reference to the open document More about the document object in a moment window.open() creates a new browser window

window.open (Semantics) window – refers to the browser window We can also use the keyword self window.open (url, name, features, replace) url contains URI or file name Second argument contains the name of the window Features allows browser window configuration It’s a comma-separated list of key=value pairs Replace, if false, creates a new history entry. If true, the current history entry is replaced

The window Object (Attributes 1) fullscreen - defines whether window fills the desktop toolbar – enable or disable the toolbar menubar – enable or disable the menu bar resizable – allow or disallow window resizing

The window Object (Attributes 2) alwaysRaised – browser floats on top of other windows regardless of whether it is active height and width define the window size scrollbars defines whether scroll bars appear when necessary Unspecified attributes will have false values

The window Object (Attributes – Example) Create a blank Web page without a toolbar or a menu bar Note attributes appear as a comma separated list 1 and yes are equivalent 0 and no are equivalent newWindow = window.open("","foo", "toolbar=no,menubar=no")

The window Object (Best practices) Do not use to create those dreaded banner ads Do not use to trap the user by handling onClose and displaying the window again Do not hide the title bar

The window Object (Example) Display a very annoying window that’s hard to get rid of window1 = window.open("","Annoy", "height=300,width=300,titlebar=no") window1.document.write("Annoying") See JavaScriptWindowMaker.htm

The window Object (Members 2) Display a prompt with a text entry field window.prompt(“message”, “Default”) Display a confirmation dialog if (window.confirm("Exit")) { window.close() } Display a message window.alert("Error")

The window Object (History 1) history – used for history navigation window.history.back() window.history.forward() Go back to pages and forward 2 pages window.history.go(-2) window.history.go(2)

The window Object (History 2) The history object also support the following properties: current – the URL of the current document length – the number of URLs in the history list next – the next URL in the history list previous – the previous URL in the history list

The window Object (Status bar) There are two properties to manage the status bar defaultStatus – this message always appears status – this message appears only temporarily such as when the mouse hovers over a button or link Display a status bar message window.status("appears in the status bar")