›
›

Bài giảng Web technologies and e-Services - Bài 5, Phần 1: Document object model - Nguyễn Bình Minh

Download
08/04/2021  
IT4409: Web Technologies and e-Services  
2020-2  
Document Object Model (DOM)  
Instructor: Dr. Thanh-Chung Dao  
Slides by Dr. Binh Minh Nguyen  
Department of Information Systems  
School of Information and Communication Technology  
Hanoi University of Science and Technology  
1
Outline  
§ Introduction of DOM  
§ Overview of DOM  
§ DOM Examples  
§ How the DOM Really works?  
§ Advantages and Disadvantages  
§ DOM or SAX  
§ Summary  
2
2
1
08/04/2021  
Before going to the DOM  
§ HTML – How to Display the Data in the Webpage.  
§ XML – How to Describe the Data .  
§ DHTML - How to Add Movement or Animation to an HTML  
Document.  
§ JAVASCRIPT - How to make Web Content Dynamic.  
3
3
World Wide Web Consortium-W3C  
4
4
2
08/04/2021  
World Wide Web Consortium-W3C  
§ To Promote Open Standard For world wide web.  
§ W3C is a vendor Organization.  
§ Main Vendors are Netscape and Microsoft.  
§ Some W3C Standards are HTTP,HTML,XML,CSS.  
§ DOM is also Recommend by W3C.  
5
5
Overview  
The Document Object Model (DOM) is an API that allows programs  
to interact with HTML (or XML) documents  
§ In typical browsers, the JavaScript version of the API is provided  
§ W3C recommendations define standard DOM  
6
6
3
08/04/2021  
What is the DOM?  
DOM  
NEUTRAL - INTERFACE  
JAVA  
XML  
ANY  
LANGUAGE  
HTML  
SCRIPT  
7
7
W3C  
8
8
4
08/04/2021  
Five Basic Levels Of W3C :  
Recommendation:- It is the Final outcome from W3C.All  
the Web functions are working properly.  
HTML,CSS,DOM  
No Error  
9
9
Proposed Recommendation:-  
§ In this layer the work is mostly complete .But some  
minor changes is occur.  
Partial Output  
10  
10  
5
08/04/2021  
Candidate Recommendation:-  
MOZILLA  
Document.all  
Document.all  
MICROSOFT  
Working  
Not Working  
IE  
11  
11  
Working Drafts  
W3C  
MEMBERS  
Working With  
Current Task.  
12  
12  
6
08/04/2021  
Status Of The DOM  
13  
13  
DOM Level 1:  
W3C recommendation, 1 Oct. 1998.  
Interfaces for representing an XML and HTML  
document.  
1)Document  
2)Node  
3)Attr  
4)Element  
5)and Text interfaces.  
14  
14  
7
08/04/2021  
DOM Level 2:  
W3C recommendation, 13 Nov. 2000.  
It contains six different specifications:  
1)DOM2 Core  
2)Views  
3)Events  
4)Style  
5)Traversal and Range  
6)and the DOM2 HTML.  
15  
15  
DOM Level 3:  
W3C candidate recommendation, 7 Nov. 2003  
It contains five different specifications:  
1)DOM3 Core  
2)Load and Save  
3)Validation  
4)Events  
5)and XPath  
16  
16  
8
08/04/2021  
Overview of DOM  
17  
17  
DOM Introduction  
Example: “Rollover” effect  
Cursor not over image  
Image changes when cursor  
moves over  
18  
18  
9
08/04/2021  
DOM Introduction  
19  
19  
DOM Introduction  
Import  
JavaScript  
code  
20  
20  
10  
08/04/2021  
DOM Introduction  
Default language for scripts specified as attribute values  
21  
21  
DOM Introduction  
Calls to JavaScript  
show() function when  
mouse moves over/away  
from image  
22  
22  
11  
08/04/2021  
DOM Introduction  
Notice that id of image is first argument to show()  
23  
23  
DOM Introduction  
24  
24  
12  
08/04/2021  
DOM Introduction  
DOM method returning Object  
25  
25  
DOM Introduction  
Returns instance  
of Element  
(DOM-defined  
host object)  
representing  
HTML element  
with given id  
26  
26  
13  
08/04/2021  
DOM Introduction  
Method inherited by Element instances  
for setting value of an attribute  
27  
27  
DOM Introduction  
Effect: src attribute of HTML element with  
specified eltId is changed to specified URL  
28  
28  
14  
08/04/2021  
DOM Introduction  
Image src changed to  
CFP22.png when mouse  
is over image,  
CFP2.png when leaves  
29  
29  
Document Tree  
Recall that HTML document elements form a tree structure, e.g.,  
DOM allows scripts to access and modify the document tree  
30  
30  
15  
08/04/2021  
The Document Tree Example  
31  
31  
Referencing Objects-Each Object is  
Identified by Object Name.  
32  
32  
16  
08/04/2021  
How To Use Referencing Objects  
Object Names  
object1.object2.object3..  
n General form is  
TO Access The History  
window.history  
To Access The Body  
document.body  
33  
33  
The DOM structure model  
o It is a Hierarchy of Node objects  
n node object  
Element  
Attribute  
etc  
34  
34  
17  
08/04/2021  
Document Tree: Node  
Example HTML document  
Function will use Node methods and  
properties to produce string  
representing Element tree  
35  
35  
Document Tree: Node  
String produced by TreeOutline():  
36  
36  
18  
08/04/2021  
An Example of DOM XML  
<?xml version = "1.0"?>  
<message from = "Paul" to = “Name">  
<body>Hello!</body>  
</message>  
Node is created for message element:  
– message element has child element: body.  
– body element has Text “Hello!"  
– Attributes: from and to also are nodes in DOM tree.  
37  
The DOM Interface  
o The DOM has many interfaces to handle  
various node objects.  
o Every interface has its “Attributes” and  
“Methods”.  
n Compare with Object Oriented Programming  
(OOP).  
DOM  
OOP  
Interface  
Attribute  
Method  
Object Class  
Property  
Method  
38  
38  
19  
08/04/2021  
Document Tree Structure  
document  
#doc um ent  
<htm l>  
<body>  
<h1>Heading 1</h1>  
HTML  
<p>Paragraph.</p>  
<h2>Heading 2</h2>  
<p>Paragraph.</p>  
document.  
documentElement  
HEAD  
BODY  
</body>  
</htm l>  
document.body  
H1  
P
#tex t  
#tex t  
#tex t  
#tex t  
H2  
P
39  
39  
child, sibling, parent  
BODY  
lastChild  
H1  
P
H2  
P
#t ex t  
#t ex t  
#t ex t  
#t ex t  
40  
40  
20  
Tải về để xem bản đầy đủ
pdf 41 trang Thùy Anh 27/04/2022 9180
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Web technologies and e-Services - Bài 5, Phần 1: Document object model - Nguyễn Bình Minh", để tải tài liệu gốc về máy hãy click vào nút Download ở trên

File đính kèm:

  • pdfbai_giang_web_technologies_and_e_services_bai_5_phan_1_docum.pdf