1. Cấu Trúc DOM
Trong một ứng dụng Extension tương tác với nội dung HTML, 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ế.
DOM có thể làm việc trực tiếp và dễ dàng thông qua JavaScipt. 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.
2. Truy cập văn bản trên trang web
Trong cấu trúc DOM, các tag HTML được ánh xạđưa vào cấu trúc cây thư mục. Với mỗi tag HTML có chứa thuộc tính văn bản được hiển thị trong nội dung trang web. Ta có thể
làm việc dễ dàng với nó bằng việc sử dụng các hàm truy cập DOM trong JavaScript. Ví dụ: trang HTML
…
<label id = “lb1”> button 1 </label> <button id = “bt1”> click here </button> …
Truy cập chuỗi văn bản thông qua các đối tượng thuộc tính của javascipt var node1 = document.getElementById(“lb1”);
var node2 = document.getElementById(“bt11”);
alert(“ID: ” + node1.id + “ value: ” + node1.textContent ); alert(“ID: ” + node2.id + “ value: ” + node2.textContent ); node1.textContent = “label 1”;
alert(“ID: ” + node1.id + “ value: ” + node1.textContent );
Ngoài ra trong cấu trúc DOM, sự hiện diện của văn bản trên cây thư mục được đưa vào một node “#text” với “nodeType” là “3”. Tuy nhiên đối tượng này chỉđơn thuần là một văn bản, và không có thuộc tính “style” có thể truy cập được thông qua javascipt.
Với node “#text” sẽ không có ID cho bạn truy cập trực tiếp. nó cũng không phải là một tag HTML, để có thể sử truy cập bình thường bằng các hàm JavaScript. Tuy nhiên, trong cấu trúc DOM được đặc tả bởi W3C coi tất cả các văn bản trong web được hiển thị trong nội dung trình duyệt là các đối tượng chuỗi khác nhău, và có thể truy cập thông qua quá trình duyệt cây văn bản document.
3. Các bước cần giải quyết khi chuyển mã văn bản
- Duyệt cây DOM lấy tất cả các chuỗi văn bản có thể hiển thị trên trang web.
- Với mỗi chuỗi văn bản được chuyển đổi phải xác định rõ bảng mã của chuỗi đó, và loại font mà nó đang sử dụng.
- Với mỗi chuỗi văn bản đã được xử lý chuyển đổi, cần xác định rõ loại font sẽ sử
dụng thay cho font của bảng mã nguồn.
- Đưa văn bản đã được xử lý chuyển đổi vào đúng vị trí của nó trên cây DOM mà không làm thay đổi cấu trúc của cây.