Chapter 6 dom ajax jquery
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (8.4 MB, 96 trang )
Chapter 6
DOM – AJAX - jQuery
Lectured by:
Nguyễn Hữu Hiếu
DOM
Document Object Model
DOM & DHTML
n
Dynamic web pages with JavaScript and DOM
n
n
n
n
n
DHTML (Dynamic HTML)
DOM nodes and DOM tree
Traversing, editing and modifying DOM nodes
Editing text nodes
Accessing, editing and modifying elements'
attributes
Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2020
Lập Trình Web
3
DOM Concept
n
DOM makes all components of a web page accessible
n
n
n
n
HTML elements
their attributes
text
They can be created, modified and removed with
JavaScript
Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2020
Lập Trình Web
4
DOM Objects
n
n
DOM components are accessible as objects or
collections of objects
DOM components form a tree of nodes
•
•
n
n
relationship parent node – children nodes
document is the root node
Attributes of elements are accessible as text
Browsers can show DOM visually as an
expandable tree
n
n
Firebug for Firefox
in IE -> Tools -> Developer Tools
Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2020
Lập Trình Web
5
Example
This is what the browser reads
<html>
<head>
<title>Sample DOM Document</title>
</head>
<body>
An HTML Document
This is a <i>simple</i> document.
</body>
</html>
This is what the browser displays on screen.
Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2020
Lập Trình Web
6
Example
Document
This is a drawing of the model that
the browser is working with for the
page.
<html>
<head>
<body>
<title>
"Sample DOM Document"
"An HTML Document"
"This is a"
<i>
"document"
"simple"
Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2020
Lập Trình Web
7
DOM Standards
n
n
W3C www.w3.org defines the standards
DOM Level 3 recommendation
n
n
DOM Level 2 HTML Specification
n
n
n
www.w3.org/TR/DOM-Level-3-Core/
www.w3.org/TR/DOM-Level-2-HTML/
additional DOM functionality specific to HTML, in
particular objects for XHTML elements
But, the developers of web browsers
n
n
n
don't implement all standards
implement some standards differently
implement some additional features
Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2020
Lập Trình Web
8
Accessing Nodes by id
n
Access to elements by their id
n
document.getElementById(<id>)
n
n
id attribute can be defined in each start tag
n
n
n
returns the element with id <id>
div element with id attribute can be used as an root node for
a dynamic DOM subtree
span element with id attribute can be used as a dynamic inline
element
The preferred way to access elements
Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2020
Lập Trình Web
9
Other Access Methods
n
Access by elements' tag
n
n
there are typically several elements with the same tag
document.getElementsByTagName(<tag>)
n
returns the collection of all elements whose tag is <tag>
the collection has a length attribute
n
an item in the collection can be reached by its index
n
n
e.g.
n
n
var html = document.getElementsByTagName("html")[0];
Access by elements' name attribute
n
several elements can have the same name
n
document.getElementsByName(<name>)
n
returns the collection of elements with name <name>
Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2020
Lập Trình Web
10
Traversing DOM tree
n
Traversal through node properties
n
childNodes property
n
the value is a collection of nodes
n has a length attribute
an item can be reached by its index
e.g. var body = html.childNodes[1];
n
n
n
n
n
firstChild, lastChild properties
nextSibling, previousSibling properties
parentNode property
Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2020
Lập Trình Web
11
Other Node Properties
•
nodeType property
n
ELEMENT_NODE: HTML element
TEXT_NODE: text within a parent element
ATTRIBUTE_NODE: an attribute of a parent element
n
attributes can be accessed another way
CDATA_SECTION_NODE
n
n
n
n
n
n
n
n
nodeName property
nodeValue property
attributes property
innerHTML property
n
n
n
CDATA sections are good for unformatted text
not standard, but implemented in major browsers
very useful
style property
n
object whose properties are all style attributes, e.g., those defied in CSS
Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2020
Lập Trình Web
12
Accessing JS Object's Properties
n
There are two different syntax forms to access
object's properties in JS (
n
<object>.
n
n
<object>[
n
n
n
dot notation, e.g., document.nodeType
brackets notation, e.g., document["nodeType"]
this is used in for-in loops
this works for properties of DOM objects, too
Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2020
Lập Trình Web
13
Attributes of Elements
•
Access through attributes property
n
n
attributes is an array
has a length attribute
n
an item can be reached by its index
an item has the properties name and value
n
e.g.
n
n
n
var src = document.images[0].attributes[0].value;
Access through function getAttribute(<name>)
n
returns the value of attribute <name>
n
e.g.
n
var src = document.images[0].getAttribute("src");
Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2020
Lập Trình Web
14
Text Nodes
n
Text node
n
n
n
n
can only be as a leaf in DOM tree
it’s nodeValue property holds the text
innerHTML can be used to access the text
Watch out:
n
There are many more text nodes than you would expect!
Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2020
Lập Trình Web
15
Modifying DOM Structure
n
document.createElement(<tag>)
n
n
n
document.createTextNode(<text>)
n
n
n
inserts <child> node before <before> child within
n
n
inserts <child> node behind all existing children of
n
n
creates a new DOM text with <text>
the node still needs to be inserted into the DOM tree
n
n
creates a new DOM element node, with <tag> tag.
the node still needs to be inserted into the DOM tree
replaces <instead> child by <child> node within
n
removes <child> node from within
Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2020
Lập Trình Web
16
Modifying Node Attributes
n
<node>.setAttribute(<name>,<value>)
n
sets the value of attribute <name> to <value>
n
e.g.
n
n
document.images[0].setAttribute("src","keiki.jpg");
That's the standard
n
but it doesn't work in IE, there you have to use
n
n
setAttribute(<name=value>)
e.g.
n
document.images[0].setAttribute("src=\"keiki.jpg\"");
Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2020
Lập Trình Web
17
W3C Document Object Model
Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2020
Lập Trình Web
18
Special DOM Objects
n
window
n
n
n
document
n
n
<body> element of the document
history
n
n
n
the current web page inside the window
body
n
n
the browser window
new popup windows can be opened
sites that the user visited
makes it possible to go back and forth using scripts
location
n
n
URL of the document
setting it goes to another page
Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2020
Lập Trình Web
19
AJAX
Asynchronous JavaScript And XML
AJAX
n
A lot of hype
n
n
n
Powerful approach to building websites
n
n
It has been around for a while
Not complex
Think differently
Allows for more interactive web applications
n
Gmail, docs.google.com, Flickr, ajax13, etc.
Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2020
Lập Trình Web
21
AJAX
Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2020
Lập Trình Web
22
AJAX Technologies
n
HTML
n
n
Javascript
n
n
Facilitates asynchronous communication and
modification of HTML in-place
DHTML - Dynamic HTML
n
n
Used to build web forms and identify fields
Additional markup for modifying and updating HTML
DOM - Document Object Model
n
Used via Javascript to work with both the structure of
your HTML and also XML from the server
Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2020
Lập Trình Web
23
The XMLHttpRequest Object
n
Base object for AJAX
n
n
n
Used to make connections, send data, receive data, etc.
Allows your javascript code to talk back and forth
with the server all it wants to, without the user
really knowing what is going on.
Available in most browsers
n
But called different things
Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2020
Lập Trình Web
24
The XMLHttpRequest Object
<script language="javascript" type="text/javascript">
var request;
function createRequest() {
try {
request = new XMLHttpRequest();
if (request.overrideMimeType) {
request.overrideMimeType('text/xml');
}
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!");
}
</script>
Trường Đại Học Bách Khoa TP.HCM
Khoa Khoa Học và Kỹ Thuật Máy Tính
© 2020
Lập Trình Web
25
