close

Se connecter

Se connecter avec OpenID

CHAPTER 1

IntégréTéléchargement
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




They have methods that perform actions


Some properties are read / write
Some properties are read only
innerHTML for example
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_d
ocument.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



appMinorVersion gets the minor version


Netscape
Microsoft Internet Explorer
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/enUS/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 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")
Auteur
Документ
Catégorie
Без категории
Affichages
4
Taille du fichier
176 Кб
Étiquettes
1/--Pages
signaler