javascript dom. slide 2 lecture overview the basics of the document object model (dom) dom structure...

JavaScriptDOM

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) Change the attribute of an HTML element

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

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")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 messagewindow.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 pageswindow.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 messagewindow.status("appears in the status bar")

javascript dom. slide 2 lecture overview the basics of the document object model (dom) dom structure...

Documents