Go Back   Diễn Đàn Bo-Blog Việt Nam > Phụ Trợ Bo-Blog > Ứng Dụng HTML - Java - Ajax Cho Bo-blog



About Me
Your Avatar

 
Trả lời Gởi Ðề Tài Mới
 
Ðiều Chỉnh Kiếm Trong Bài
  #1  
Old 10-09-2011, 11:16 AM
tiziuls's Avatar
tiziuls is offline
Junior Member
 
Tham gia ngày: Sep 2011
Bài gởi: 1
Default Ứng dụng Java Script để xử lý tài liệu HTML

a. Giới thiệu mô hình đối tượng tài liệu HTML DOM

Trước khi đi sâu vào lập trình JavaScript với HTML, chúng ta cần tìm hiểu một đối tượng được sử dụng để tham chiếu tới toàn bộ tài liệu HTML, đó là DOM (Document Object Model). Mô hình này được sử dụng để biểu diễn cấu trúc của một tài liệu HTML, cho phép tham chiếu tới từng phần tử thẻ trong HTML, qua đó cho phép sử dụng JavaScript để can thiệp vào nội dung của từng phần tử thẻ HTML. Cùng với JavaScript, DOM đã trở thành một cánh tay đắc lực để xây dựng các ứng dụng có khả năng tương tác với máy chủ ở mức độ cao như AJAX.
Mô hình của DOM như sau:
Click the image to open in full size.

b. Truy xuất nội dung của một thẻ HTML

Như ta đã biết, HTML là một file văn bản thuần túy chứa các phần tử HTML. Các phần tử này sẽ chứa nội dung (nằm giữa cặp thẻ) và các thuộc tính (nằm trong thẻ mở). Nội dung và thuộc tính của một phần tử HTML có thể được truy cập thông qua DOM. Điều đó có nghĩa là chúng ta có thể sử dụng JavaScript để thay đổi hoặc thậm chí là xóa luôn nội dung của một phần tử nào đó.

Để đánh dấu một phần tử HTML nào đó, người ta thường thiết lập định danh (Identify hay id) hoặc tên (name) cho phần tử đó thông qua các thuộc tính id hoặc name. Nên nhớ rằng khi thiết lập id hoặc name cho một phần tử nào đó, chúng ta phải xác định id hoặc name đó là duy nhất.

Ví dụ:
Code:
<H1 id=”thu_h1”>Chào mừng bạn đến với PHPVN</H1>

Để truy cập vào một phần tử nào đó thông qua định danh id, chúng ta sử dụng một phương thức của DOM có tên là getElementById(id), còn để truy cập vào một phần tử nào đó thông qua tên, chúng ta sử dụng một phương thức khác có tên là getElementByName(name). Trong đó, id và name là các thuộc tính được gán vào thẻ HTML.

Ví dụ sau đây hiển thị nội dung chứa trong thẻ h1:

Code:
<html>
<head>
<script type="text/javascript">
function getValue()
{
var x=document.getElementById("myHeader")
alert(x.innerHTML)
}
</script>
</head>
<body>
<h1 id="myHeader" onclick="getValue()">Đây là dòng tiêu đề</h1>
<p>Kích chuột vào dòng tiêu đề trên để hiển thị hộp thoại</p>

</body>
</html>


Ví dụ trên sẽ hiển thị dòng tiêu đề Đây là dòng tiêu đề nằm giữa cặp thẻ <h1>. Thẻ H1 được xác định bởi một định danh id là myHeader.

Khi kích chuột lên dòng tiêu đề, biến cố onclick sẽ được kích hoạt và gọi hàm getValue(). Hàm này chịu trách nhiệm khai báo một biến x. Biến này sẽ nhận giá trị là thẻ được định danh bởi myHeader (chính là thẻ h1). Hàm alert sẽ in giá trị được lưu trong thuộc tính innerHTML của biến x. Thuộc tính innerHTML lúc này chứa nội dung nằm giữa cặp thẻ <h1>...</h1>.

Để thay đổi nội dung nằm giữa một cặp thẻ có id hoặc name cho trước, ta cũng có thể gán thuộc tính innerHTML của biến tham chiếu tới thẻ đó với một chuỗi nội dung HTML xác định. Hãy sửa hàm getValue() trên theo ví dụ dưới đây rồi chạy thử để xem kết quả:

Code:
function getValue()
{
var x=document.getElementById("myHeader")
x.innerHTML=”Xin chào, tôi đây”
}



Click the image to open in full size. Logged Trở về phpvn.org
Trả Lời Với Trích Dẫn
Trả lời Gởi Ðề Tài Mới

Tags
Ứng, dụng, html, java, , liệu, script, tài, xử, để

Ðiều Chỉnh Kiếm Trong Bài
Kiếm Trong Bài:

Kiếm Chi Tiết

Chuyển đến


Múi giờ GMT. Hiện tại là 04:01 AM.
Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
vdata

Bo-Blog Việt Nam

Bo-blog
9.9 10 13259