Bài 5: Các công nghệ trong AJAX - DOM - Tìm kiếm & Tạo DOM Node

nguyenac

Administrator
Thành viên BQT
18/11/08
22.554
1
38
Tìm kiếm một DOM Node
Yêu cầu đầu tiên để làm việc trên DOM với JavaScript là đi tìm kiếm một phần tử để thay đổi. Trước hết cần bắt đầu tham chiếu qua nút gốc - root node, nút này thể hiện qua biến toàn cục document.
Mỗi nút trong DOM là một nút con (hoặc nút con cấp hai, ba…) của document, nhưng cứ đi dần vào cây DOM, sẽ thấy một tài liệu phức tạp được biểu diễn bởi DOM, và việc tìm kiếm là rất khó khăn.
Vì thế có các cách sau để tìm kiếm một nút nhanh chóng hơn. Mỗi phần tử HTML có một thuộc tính ID, ví dụ như,
HTML:
<p id=’hello’>
hay
HTML:
<div id=’empty’></div>
Mỗi một nút DOM có thể có một ID gán cho nó, và ID này có thể được dùng để tham chiếu tới nút qua hàm :
HTML:
var hello=document.getElementById(’hello’);
Trong một số trường hợp, cần duyệt qua cấu trúc cây từng bước một, mỗi nút DOM có một nút cha và nhiều nút con. Chúng có thể được truy cập bởi các thuộc tính parentNode và childNodes, thuộc tính parentNode trả về một đối tượng DOM node khác, trong khi childNodes trả về một mảng javascript:
Mã:
var children=empty.childNodes;
for (var i=0;i<children.length;i++){
…
}
Một cách khác để tìm kiếm là dựa trên loại thẻ HTML, dùng phương thức getElementsByTagName(). Ví dụ, document.getElementsByTagName(”UL”) sẽ trả về chuỗi tất cả các thẻ <UL> trong tài liệu.
Tạo DOM Node
Trong nhiều trường hợp cần tạo các nút mới và thêm nó vào tài liệu. JavaScript cung cấp một số phương thức để làm điều đó. Các phương thức chuẩn để tạo nút mới là document.createElement() và document.createTextNode(), phương thức createElement() có thể được dùng để tạo ra bất kỳ phần tử HTML nào, tham số là kiểu của loại thẻ HTML;
Mã:
var childEl=document.createElement(”div”);
createTextNode() tạo một nút thể hiện qua một đoạn text, thường được tìm thấy trong các thẻ về heading, div, paragraph, và list item.
Mã:
 var txtNode=document.createTextNode(”some text”);
Chuẩn DOM coi các text node tách rời khỏi biểu diễn HTML. Chúng không có các stye để áp đặt cho trực tiếp và vì thế chúng yêu cầu ít bộ nhớ hơn.
Một nút khi được tạo ra phải được gắn vào tài liệu trước khi hiển thị trên trình duyệt, phương thức appendChild() được dùng để thực hiện điều này
Mã:
el.appendChild(childEl);

Ba phương thức createElement(), createTextNode(), và appendChild() cho phép thực hiện hầu hết các thao tác để thêm một nút vào tài liệu.

Một tool (editor) mã nguồn mở, rất cool, xem chi tiết tại:
Mã:
[URL]http://wow-vn.net/forum/forumdisplay.php?f=40[/URL]
 

Facebook Comment

Find Diễn đàn Công nghệ thông tin và truyền thông on mobile

Thành viên trực tuyến

Không có thành viên trực tuyến.

Thống kê diễn đàn

Chủ đề
31.023
Bài viết
33.076
Unanswered questions
2
Answered questions
2
Thành viên
5.956
Thành viên mới
tienchiase

Mobile app users
0
Latest mobile user

Tài nguyên mới

Mobile app for XenForo 2 by Appify