Ứng dụng Java Script để xử lý tài liệu HTML – Tự học lập trình Java Script
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).
a. Giới thiệu mô hình đối tượng tài liệu HTML DOM
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:
Mô hình của DOM như sau:
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:
Code:
1
| <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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <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:
1
2
3
4
5
| function getValue(){var x=document.getElementById("myHeader")x.innerHTML=”Xin chào, tôi đây”} |
0 nhận xét: