IV. DOM và cách thức làm việc với DOM
4.1 Làm việc với DOM sử dụng JavaScript
Trong nhiều ứng dụng, ta muốn thay đổi giao diện ng−ời dùng khi họ làm việc, cung cấp các quay ng−ợc đối với các tiến trình cũng nh− với các hoạt động của họ . Để thực hiện đ−ợc điều này ta có thể thực hiện bằng cách thay thế nhãn hoặc màu sắc của một thành phần đơn, thông qua việc đ−a ra một hộp hội thoại, để thay thế những phần màn hình ứng dụng với một tập các widget mới. Cách thức thông dụng nhất là xây dựng một cấu trúc cây DOM thông qua việc điền đầy trình duyệt với một HTML (nói theo cách khác, ta thực hiện viết một trang HTML). Ví dụ, ta muốn đ−a ra một lời chào tới ng−ời
dùng. Ban đầu trang đ−ợc tải về, ta không biết tên của ng−ời đó, vì thế ta muốn có thể thay đổi cấu trúc của trang để thêm vào tên ng−ời dùng ở phía sau, ta có thể thực hiện thêm các node DOM một cách tự động.
Ví dụ:
<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>
Trong đoạn mã này chúng ta đã đ−a vào 2 thành phần: một CSS và một file chứa đoạn mã JavaScript. Ta cũng khai báo một giá trị trống <div> với nhận dạng là ID, thành phần này giúp ta có thể thêm vào các thành phần tiếp theo một cách tự động.
ở đây, CSS định nghĩa kiểu màu sắc và kiểu chữ khác nhau giữa các thành phần. Và đoạn JavaScript thực hiện công việc thêm các node mới một cách tự động giúp chúng ta. Nh− vậy DOM đã đ−ợc xây dựng và ta có thể thực hiện các công việc trên nó. Ta có thể thay đổi thuộc tính các node, ẩn và hiện các node cũng nh− tạo ra các node mới.
4.2. Tìm kiếm node DOM
Điều cần thiết đầu tiên khi muốn làm việc trên một DOM với JavaScript là phải tìm đ−ợc các thành phần mà ta muốn thay đổi. Nh− đã đề cập ở phần trên, chúng ta có một node gốc, trong biến toàn cục tài liệu (document) Mọi node trong DOM đều là node con, cháu của biến tài liệu. Tuy vậy việc vẽ lại toàn bộ theo cấu trúc cây là khá phức tạp, đặc biệt với những tài liệu có kích cỡ lớn. Để xử lý vấn đề này, đơn giản chúng ta chỉ cần sử dụng một số các shortcut. Hầu hết các thành phần đ−ợc sử dụng ở đây đều là một tag với một ID duy nhất.
Trong file JavaScript ở trên, giả sử ta muốn tìm 2 thành phần: một là thành phần đồ hoạ và một là tag <div> để thêm vào nội dung. Biết đ−ợc điều này, ta sẽ thêm vào các thuộc tính ID cho từng thành phần trong HTML :
<p id=’hello’>
Và <div id=’empty’></div>
Bất kỳ node DOM nào đều có một ID đ−ợc đăng ký, và ID này có thể đ−ợc sử dụng trong một hàm gọi, ví dụ:
Var hello=document.getElementById(‘hello’);
Nh− vậy ta có thể tìm kiếm một node DOM thông qua ID của nó hoặc thông qua loại tag HTML. Nhìn chung, sử dụng hàm getElementById() an toàn hơn so với hàm getElementsByTagName().