Bài giảng Lập trình Web - Chapter 6: DOM – AJAX - JQuery

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

DHTML (Dynamic HTML)

n DOM nodes and DOM tree

n Traversing, editing and modifying DOM nodes

n Editing text nodes

n 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

Lập Trình Web

3

DOM Concept

n DOM makes all components of a web page accessible

n

HTML elements

their attributes

text

n 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

Lập Trình Web

4

DOM Objects

n DOM components are accessible as objects or

collections of objects

n DOM components form a tree of nodes

•

relationship parent node – children nodes

•

documentis the root node

n Attributes of elements are accessible as text

n Browsers can show DOM visually as an

expandable tree

n

Firebug for Firefox

n

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

Lập Trình Web

5

Example

This is what the browser reads

<html>

<head>

<title>Sample DOM Document</title>

</head>

<body>

<h1>An HTML Document</h1>

<p>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

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>

<title>

<body>

"Sample DOM Document"

<h1>

"An HTML Document"

<p>

"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

Lập Trình Web

7

DOM Standards

n W3C www.w3.org defines the standards

n DOM Level 3 recommendation

n

www.w3.org/TR/DOM-Level-3-Core/

n DOM Level 2 HTML Specification

n

www.w3.org/TR/DOM-Level-2-HTML/

n

additional DOM functionality specific to HTML, in

particular objects for XHTML elements

n But, the developers of web browsers

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

Lập Trình Web

8

Accessing Nodes by id

n Access to elements by their id

n

document.getElementById(<id>)

n

returns the element with id<id>

n

idattribute can be defined in each start tag

n

divelement with idattribute can be used as an root node for

a dynamic DOM subtree

n

span element with idattribute can be used as a dynamic inline

element

n

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

Lập Trình Web

9

Other Access Methods

n Access by elements' tag

n

there are typically several elements with the same tag

n

document.getElementsByTagName(<tag>)

n

returns the collection of all elements whose tag is <tag>

the collection has a lengthattribute

an item in the collection can be reached by its index

n

e.g.

n

var html = document.getElementsByTagName("html")[0];

n Access by elements' nameattribute

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

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 lengthattribute

n

an item can be reached by its index

n

e.g. var body = html.childNodes[1];

n

firstChild, lastChildproperties

nextSibling, previousSiblingproperties

parentNodeproperty

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

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

n

CDATA_SECTION_NODE

n

CDATA sections are good for unformatted text

n

nodeName property

nodeValue property

attributes property

innerHTML property

n

not standard, but implemented in major browsers

n

very useful

n

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

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

n

dot notation, e.g., document.nodeType

n

n

brackets notation, e.g., document["nodeType"]

n

this is used in for-inloops

n 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

Lập Trình Web

13

Attributes of Elements

•

Access through attributes property

n

attributes is an array

n

has a lengthattribute

n

an item can be reached by its index

an item has the properties nameand value

e.g.

n

var src = document.images[0].attributes[0].value;

n 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

Lập Trình Web

14

Text Nodes

n Text node

n

can only be as a leaf in DOM tree

it’s nodeValue property holds the text

innerHTMLcan be used to access the text

n 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

Lập Trình Web

15

Modifying DOM Structure

n document.createElement(<tag>)

n

creates a new DOM element node, with <tag> tag.

n

the node still needs to be inserted into the DOM tree

n document.createTextNode(<text>)

n

creates a new DOM text with <text>

n

the node still needs to be inserted into the DOM tree

n <parent>.appendChild(<child>)

n

inserts <child> node behind all existing children of <parent> node

n <parent>.insertBefore(<child>,<before>)

n

inserts <child> node before <before> child within <parent> node

n <parent>.replaceChild(<child>,<instead>)

n

replaces <instead> child by <child> node within <parent> node

n <parent>.removeChild(<child>)

n

removes <child> node from within <parent> node

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

16

Modifying Node Attributes

n <node>.setAttribute(<name>,<value>)

n

sets the value of attribute <name> to <value>

e.g.

n

document.images[0].setAttribute("src","keiki.jpg");

n That's the standard

n

but it doesn't work in IE, there you have to use

n

setAttribute(<name=value>)

n

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

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

Lập Trình Web

18

Special DOM Objects

n window

n

the browser window

n

new popup windows can be opened

n document

n

the current web page inside the window

n body

n

<body> element of the document

n history

n

sites that the user visited

makes it possible to go back and forth using scripts

n

n location

n

URL of the document

setting it goes to another page

n

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

19

AJAX

Asynchronous JavaScript And XML

Bài giảng Lập trình Web - Chapter 6: DOM – AJAX - JQuery - Nguyễn Hữu Hiếu