Các công nghệ trong AJAX - DOM - Document Object Model

Agloco · 09-16-2007, 06:35 PM

Document Object Model (DOM) giúp phân tích một tài liệu (một trang web chẳng hạn) phục vụ cho cơ chế của JavaScript. Sử dụng DOM, cấu trúc của tài liệu có thể được phân rã theo cấu trúc cây và thao tác theo các nút. Đây là một khả năng đặc biệt hữu ích để viết một ứng dụng Ajax. Trong các ứng dụng web truyền thống, trình duyệt phải tái nạp các trang HTML theo một luồng từ server.

Trong một ứng dụng AJAX, sự thay đổi giao diện người dùng chủ yếu được tạo ra bởi DOM. Các thẻ HTML trong trang web được tổ chức theo cấu trúc cây. Gốc của cây là thẻ <HTML>, để biểu diễn tài liệu. Trong đó thẻ <BODY> biểu diễn phần thân của tài liệu, là gốc của phần hiển thị của tài liệu. Trong thân của tài liệu, có các bảng, paragraph, list, và các loại thẻ khác với các thẻ ở mức thấp hơn nữa.

Một biểu diễn theo mô hình DOM của một trang web là một cấu trúc cây, có các phần tử là các nút, rồi nó chứa các nút con trong nó, và cứ tiếp tục một cách đệ qui như thế. JavaScript làm việc với nút gốc của trang web hiện thời qua một biến toàn cục gọi là document, biến này là điểm bắt đầu của mọi thao tác trên DOM. Phần tử DOM đã được đặc tả bởi W3C. Mỗi phần tử DOM có một phần tử cha duy nhất, có hoặc không có các phần tử con, và có một số bất kỳ các thuộc tính, chúng được lưu trữ trong mảng móc nối.

Mối quan hệ giữa các phần tử DOM có thể được đối chiếu bởi danh sách các thành phần HTML. Mối quan hệ này là hai chiều. Sửa đổi mô hình DOM sẽ thay đổi cấu trúc HTML và dẫn đến thay đổi cách biểu diễn một trang web.

Bài 4 (tiếp): Các công nghệ trong AJAX - DOM - Làm việc với DOM bằng JavaScript.

Làm việc với DOM bằng JavaScript.

Trong một ứng dụng bất kỳ, nếu muốn thay đổi giao diện người dùng khi họ đang làm việc, thì phải cung cấp các phản hồi lại khi người dùng gửi các yêu cầu.

Để hiểu rõ cơ chế làm việc với DOM bằng JavaScript, chúng ta cùng xét một ví dụ về một trang HTML đơn giản.

Quote:

<html>
<head>
<link rel='stylesheet' type='text/css' href='hello.css' />
<script type='text/javascript' src='hello.js'></script>
</head>
<body>
<p id='hello'>hello</p>
<div id='empty'></div>
</body>

Ta đã thêm vào các tham chiếu đến các file hello.css (dùng Cascading Style Sheet) và một file chứa mã nguồnJavaScript là hello.js. Ở đây cũng đồng thời khai báo một thẻ <div> với một ID.

Còn đây là file hello.css chứa stylesheet để áp dụng cho các mục trong file HTML:

Quote:

.declared{
color: red;
font-family: arial;
font-weight: normal;
font-size: 16px;
}
.programmed{
color: blue;
font-family: helvetica;
font-weight: bold;
font-size: 10px;
}

Chúng ta định nghĩa hai style, để mô tả gốc của các nút DOM (tên của các style là tùy chọn). Các style này không dược dùng trong file HTML, nhưng chúng sẽ được áp dụng qua file JavaScript.

Quote:

window.onload=function(){
var hello=document.getElementById('hello');
hello.className='declared';
var empty=document.getElementById('empty');
addNode(empty,"reader of");
addNode(empty,"Ajax in Action!");
var children=empty.childNodes;
for (var i=0;i<children.length;i++){
children[i].className='programmed';
}
empty.style.border='solid green 2px';
empty.style.width="200px";
}
function addNode(el,text){
var childEl=document.createElement("div");
el.appendChild(childEl);
var txtNode=document.createTextNode(text);
childEl.appendChild(txtNode);
}

Hàm window.onload() sẽ được gọi khi trang web được nạp. Tại thời điểm này, cấu trúc cây DOM sẽ được thiết lập.

Trong bài 5 anh em ta sẽ học về: Tìm kiếm một DOM Node, Tạo DOM Node.

09-16-2007, 06:35 PM	#1
Agloco Newbie Join Date: Aug 2007 Posts: 11	Các công nghệ trong AJAX - DOM - Document Object Model Document Object Model (DOM) giúp phân tích một tài liệu (một trang web chẳng hạn) phục vụ cho cơ chế của JavaScript. Sử dụng DOM, cấu trúc của tài liệu có thể được phân rã theo cấu trúc cây và thao tác theo các nút. Đây là một khả năng đặc biệt hữu ích để viết một ứng dụng Ajax. Trong các ứng dụng web truyền thống, trình duyệt phải tái nạp các trang HTML theo một luồng từ server. Trong một ứng dụng AJAX, sự thay đổi giao diện người dùng chủ yếu được tạo ra bởi DOM. Các thẻ HTML trong trang web được tổ chức theo cấu trúc cây. Gốc của cây là thẻ <HTML>, để biểu diễn tài liệu. Trong đó thẻ <BODY> biểu diễn phần thân của tài liệu, là gốc của phần hiển thị của tài liệu. Trong thân của tài liệu, có các bảng, paragraph, list, và các loại thẻ khác với các thẻ ở mức thấp hơn nữa. Một biểu diễn theo mô hình DOM của một trang web là một cấu trúc cây, có các phần tử là các nút, rồi nó chứa các nút con trong nó, và cứ tiếp tục một cách đệ qui như thế. JavaScript làm việc với nút gốc của trang web hiện thời qua một biến toàn cục gọi là document, biến này là điểm bắt đầu của mọi thao tác trên DOM. Phần tử DOM đã được đặc tả bởi W3C. Mỗi phần tử DOM có một phần tử cha duy nhất, có hoặc không có các phần tử con, và có một số bất kỳ các thuộc tính, chúng được lưu trữ trong mảng móc nối. Mối quan hệ giữa các phần tử DOM có thể được đối chiếu bởi danh sách các thành phần HTML. Mối quan hệ này là hai chiều. Sửa đổi mô hình DOM sẽ thay đổi cấu trúc HTML và dẫn đến thay đổi cách biểu diễn một trang web. Bài 4 (tiếp): Các công nghệ trong AJAX - DOM - Làm việc với DOM bằng JavaScript. Làm việc với DOM bằng JavaScript. Trong một ứng dụng bất kỳ, nếu muốn thay đổi giao diện người dùng khi họ đang làm việc, thì phải cung cấp các phản hồi lại khi người dùng gửi các yêu cầu. Để hiểu rõ cơ chế làm việc với DOM bằng JavaScript, chúng ta cùng xét một ví dụ về một trang HTML đơn giản. Quote: <html> <head> <link rel='stylesheet' type='text/css' href='hello.css' /> <script type='text/javascript' src='hello.js'></script> </head> <body> <p id='hello'>hello</p> <div id='empty'></div> </body> Ta đã thêm vào các tham chiếu đến các file hello.css (dùng Cascading Style Sheet) và một file chứa mã nguồnJavaScript là hello.js. Ở đây cũng đồng thời khai báo một thẻ <div> với một ID. Còn đây là file hello.css chứa stylesheet để áp dụng cho các mục trong file HTML: Quote: .declared{ color: red; font-family: arial; font-weight: normal; font-size: 16px; } .programmed{ color: blue; font-family: helvetica; font-weight: bold; font-size: 10px; } Chúng ta định nghĩa hai style, để mô tả gốc của các nút DOM (tên của các style là tùy chọn). Các style này không dược dùng trong file HTML, nhưng chúng sẽ được áp dụng qua file JavaScript. Quote: window.onload=function(){ var hello=document.getElementById('hello'); hello.className='declared'; var empty=document.getElementById('empty'); addNode(empty,"reader of"); addNode(empty,"Ajax in Action!"); var children=empty.childNodes; for (var i=0;i<children.length;i++){ children[i].className='programmed'; } empty.style.border='solid green 2px'; empty.style.width="200px"; } function addNode(el,text){ var childEl=document.createElement("div"); el.appendChild(childEl); var txtNode=document.createTextNode(text); childEl.appendChild(txtNode); } Hàm window.onload() sẽ được gọi khi trang web được nạp. Tại thời điểm này, cấu trúc cây DOM sẽ được thiết lập. Trong bài 5 anh em ta sẽ học về: Tìm kiếm một DOM Node, Tạo DOM Node. __________________ Blog của Agloco nè: http://cafe.timnhanh.com/agloco Earn money online: http://vietmakemoneyonline.com/showthread.php?t=611

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode