1. JavaScript DOM

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

3. 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)

4. 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."

5. What is the Dom (2)?

6. 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

7. The DOM Hierarchy

8. 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

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

10. 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

11. 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

12. 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

13. 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

14. The document Object (A Canonical List)
Refer to W3Schools

15. 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

16. 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>

17. 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

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

19. 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

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

21. 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

22. 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

23. Creating New Elements (Example)

24. 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

25. 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

26. Determining the Browser Location

27. 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

28. 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

29. 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

30. 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

31. 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

32. 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")

33. 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

34. 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

35. 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")

36. 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)

37. 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

38. 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")