Đối tượng tài liệu DOM là giao diện có thể cho phép chương trình truy cập và thao tác với nội dung của một trang web hoặc tài liệu. nó cung cấp một sự trình bày về cấu trúc hướng đối tượng của những phần tử và nội dung riêng lẻ trong một trang với những phương pháp để khôi phục và đặt những thuộc tính của đối tượng đó. Nó cũng cung cấp những phương pháp để thêm và loại bỏ những đối tượng, như vậy nó cho phép bạn tạo ra nội dung động.
DOM cũng cung cấp một giao diện để giao tiếp với những sự kiện, cho phép bạn để bắt và trả lời tới người dùng hoặc những hoạt động của trình duyệt. Đặc tính này sẽ giới thiệu tóm tắt những đặc tính chung tổng quan trong phần này nhưng những chi tiết bạn có thể tham khảo thêm trên trang web phát triển của tổ chức WWW.
Trước đây, khi javascrip được giới thiệu trong trình duyệt, loại giao diện được yêu cầu cho phép những phần tử trên trang được truy cập thông qua những kịch bản. Mỗi nhà cung cấp có sự thi hành của chính mình nhưng về thực tế những tiêu chuẩn này hướng tới một mẫu chung đơn giản cho tất cả các chuẩn.
Ví dụ, đa số các trình duyệt sử dụng một mảng của những đối tượng image để đại diện tất cả các tag IMG trên một trang. Những thứ đó có thể được truy nhập và thao tác thông qua JavaScript. Một hình ảnh xoay vòng đơn giản có thể sử dụng mã tương tự như său :
document.images[3].src = " graphics / Button2.gif "
Những mô hình sớm đã có giới hạn. Chúng chỉ cung cấp những truy nhập tới một ít kiểu phần tử và thuộc tính, như hình ảnh, những mối liên kết hoặc những phần tử form.
Như những nhà cung cấp phát hành những phiên bản mới của trình duyệt, chúng mở rộng trên mô hình. Nhưng chúng cũng thường đụng độ với nhau, dẫn tới tính tương thích cùng với những vấn đề giữa khác nhau của các trình duyệt. những nhà cung cấp cố gắng làm tốt hơn đối thủ bằng việc thêm mới những đặc tính cho chính mình.
May mắn, đa số các nhà cung cấp bắt đầu chấp nhận tiêu chuẩn DOM đặt bởi Tập đoàn mạng toàn cầu WWW, đáng chú ý Internet Explorer, Netscape và Ô-pe-ra. Và DOM đã bắt đầu thành chuẩn chung được hỗ trợ trong tất cả các trình duyệt.
Để cung cấp tính tương thích cho nhữn phần trước đây, những mức khác nhau tiêu chuẩn DOM đợc định nghĩa. Bạn có thể tìm thấy cho những sự tham khảo tới level DOM 0 ( Hoặc " DOM0 ") Mà tương ứng tới mô hình sử dụng trước kia, những trình duyệt trước đây - Chủ yếu là Internet Explorer 4 và Netscape 4 trở về trước. Rồi có DOM1 mà được chấp nhận vào 1998 và thêm vào hâu hết trình duyệt.
1. Cây tài liệu “Document tree”
Khi trình duyệt tải một tran, nó tạo ra một hệ thống có thứ bậc về nội dung, một hệ thống có thứ bậc gần giống với cấu trúc HTML. Cấu trúc này tương tự như một cái cây, với những nút, trong đó mỗi nút đại diện cho một phần tử, một thuộc tính, hoặc nội dung cho một đối tượng khác nào đó.
1.1 Nút của cây:
Tất cả các đối tượng khác nhău có những thuộc tính và phương thức duy nhất của chính minh, nhưng mỗi phần tử đều sử dụng giao diện “Node”. Cái này là một chuẩn chung của những phương thức và thuộc tính liên quan đến cấu trúc cây tài liệu. để hiểu rõ hơn về điều này, ta xem xét đến biểu đồ đơn giản dưới đây:
Đối tợng nút “Node” cung cấp vài thuộc tính để ánh xạ cấu trúc này và cho phép bạn duyệt qua cái cây. ở đây vài mối quan hệ đang sử dụng ví dụ ở trên :
* NodeA.firstChild = NodeA1 * NodeA.lastChild = NodeA3 * NodeA.childNodes.length = 3 * NodeA.childNodes[0] = NodeA1 * NodeA.childNodes[1] = NodeA2 * NodeA.childNodes[2] = NodeA3 * NodeA1.parentNode = NodeA * NodeA1.nextSibling = NodeA2 * NodeA3.prevSibling = NodeA2 * NodeA3.nextSibling = null
* NodeA.lastChild.firstChild = NodeA3a * NodeA3b.parentNode.parentNode = NodeA
Giao diện Nút “Node interface” cũng cung cấp những phương pháp động khi thêm vào, cập nhật và loại bỏ những nút tương tự như său :
• insertBefore()
• replaceChild()
• removeChild()
• appendChild()
• cloneNode()
Chúng ta sẽ xem xét làm cách thức cây tài liệu phản chiếu nội dung của một trang Web.
2. Gốc tài liệu “Document root”
Đối tượng tài liệu gốc cung cấp một gốc “Document root” cho hệ thống cây này. Nút này cũng cần phải được thực hiện theo giao diện của nút “Node interface”. Nó sẽ có những nút con nhưn không có nút nào là nút cha hoặc nút anh chị em, nếu nó là nút đầu tiên
“Document root”. Ngoài việc nó là một nút, nó cũng thực hiện giao diện tài liệu.
Giao diện này cung cấp những phương thức để truy cập và tạo ra những nút khác nhău trong cây tài liệu. một vài phương thức truy cập tài liệu:
• getElementById()
• getElementsByTagName()
• createElement()
• createAttribute()
• createTextNode()
Đối tượng tài liệu có thể cũng có vài thuộc tính khác nhău liên quan đến level mà chuẩn DOM cũ hơn hỗ trợ. Ví dụ, bạn sẽ tìm thấy nhiều trình duyệt vẫn còn có document.images và những mảng document.links hoặc document.bgColor và document.fgColor là những thuộc tính liên quan đến BGCOLOR cùng với thuộc tính TEXT của tag BODY.
Những thuộc tính này dự định để cung cấp vài tính tương thích ngược để những trang thiết kế cho những trình duyệt cũ hơn sẽ vẫn còn làm việc đúng với những phiên bản mới hơn. Chúng có thể vẫn còn được sử dụng trong những kịch bản nhưng Chúng có thể không đợc hỗ trợ trong những phiên bản tương lai.
3. Duyệt cây tài liệu “Document Tree”
Một cây tài liệu là một ánh xạ của mã nguồn trang HTML. Mỗi tag hoăc cặp tag được đại diện bởi một nút phần tử trên cây, với những nút khác đại diện cho thuộc tính hoặc dữ liệu đặc tính.
Về mặt kỹ thuật nói, đối tượng tài liệu chỉ có một phần tử con, được lấy ra bởi document.documentElement . Với những trang Web, cái này đại diện vòng ngoài thẻ HTML nó đóng vai trò như là phần tử gốc của cây tài liệu. Nó sẽ có những phần tử con cho thẻ HEAD và thẻ BODY cái mà sẽ có thêm nhiều phần tử con khác.
Sử dụng điều này, với phương thức của giao diện Node, bạn có thể duyệt qua cây tài liệu để truy cập Node riêng lẻ trong cây. Xem xét phần său:
<html>
<head>
<title></title>
</head>
<body><p>This is a sample paragraph.</p></body>
</html>
Và dòng mã său đây:
alert(document.documentElement.lastChild.firstChild.tagName);
Dòng mã này sẽ hiển thị một thông báo với giá trị là “P”, tên của thẻ trong Node đó.
Có vài vấn đề hiển nhiên với việc truy nhập những nút theo cách này. Chẳng hạn, một sự thay đổi đơn giản tới mã nguồn trang , như thêm văn bản hoặc định dạng những phần tử hoặc những hình ảnh, sẽ thay đổi cấu trúc cây. Đờng dẫn sử dụng trước có thể không còn trỏ vào nút dự định.
Điều ít thấy hơn là vài vấn đề trong tương thích bộ duyệt. Chú ý rằng trong mẫu HTML ở trên, không có khoảng trông giứa những thẻ BODY và thẻ P. Nếu thêm một vài dòng đơn giản:
<html>
<head>
<title></title>
</head>
<body>
<p>This is a sample paragraph.</p>
</body>
</html>
Netscape sẽ thêm vào các node cho các dòng này, trong khi IE thì không. Song trong Nestscape,
mã JavaScript hiện ra ở trên trình bày "Undefined " trong khi nó bây giờ trỏ vào nút văn bản cho không gian trống này. Một khi nó (thì) không phải là một phần tử nút, nó không
có tên tag. Mặt khác trong IE, không thêm những nút cho không gian trống này, vì vậy nó vẫn trỏ vào tag P.
4. Truy cập những phần tử trực tiếp
Sử dụng phương thức document.getElementById() vận dụng trong việc truy cập các phần tử Node. Bằng việc thêm một thuộc tính ID vào thẻ P (hoặc bất kỳ thẻ nào khác), Bạn Có thể truy vấn trực tiếp tới nó.
< p id =" myParagraph "> đây là một đoạn mẫu. </ p >
...
alert(document.getElementById( " myParagraph "). tagName);
Với cách này, bạn có thể tránh những vấn đề tương thích và cập nhật nội dung trang ở trang hiện tại mà không lo lắng nơi mà thẻ này được đặt trong cây tài liệu, mà chỉ cần quan tâm đến mã ID duy nhất của nó trong trang.
Một phơng pháp ít trực tiếp hơn để truy nhập nút phần tử do phương thức document.getElementsByTagName() cung cấp. Cái này trả lại một mảng của những nút đại diện tất cả các phần tử trên về một trang với thẻ HTML xác định. Cho ví dụ, bạn có thể thay đổi màu của mỗi mỗi liên kết trên của một trang như sau:
var nodeList = document.getElementsByTagName("A");
for (var i = 0; i < nodeList.length; i++) nodeList[i].style.color = "#ff0000";
5. Những kiểu nút “Node Type ”
Như đợc đề cập, có vài kiểu nút định nghĩa trong mô hình đối tượng tài liệu, Nhưng Những thứ Bạn sẽ phần lớn bạn có thể tiếp xúc với những trang Web là phần tử, văn bản và thuộc tính.
Những nút Phần tử , như chúng ta nhìn thấy, tương ứng tới những tag riêng lẻ hoặc những tag trong mã HTML. Chúng có thể có những nút con,cũng có thể là những phần tử hoặc những nút văn bản khác.
Những nút văn bản “text node”đại diện cho nội dung, hoặc dữ liệu đặc tính. Chúng sẽ có một nút cha mẹ và có lẽ có nút anh chị em, nhưng chúng không có những nút con.
Những nút thuộc tính “attribute node” là một trường hợp đặc biệt. Chúng không được xem xét trong một bộ phận của cây tài liệu - Chúng không có node cha mẹ, node con hoặc những anh chị em ruột. Thay vào đó, chúng được sử dụng để cho phép truy cập thuộc tính của một phần tủ trên cây. Chúng đại diện cho thuộc tính định nghĩa trong một thẻ tag HTML. Ví dụ: thuộc tính HREF của thẻ tag A.
6. Thuộc tính “Style”
Đa số các thuộc tính cho những thẻ tag HTML khá đơn giản, chúng định nghĩa một giá trị đơn cho một đặc tính đặc biệt cho những tag. Như bạn biết, CSS có thể sử dụng để áp dụng những tham số kiểu dáng tới một thẻ tag riêng lẻ, tất cả các tag của một kiểu đã cho hoặc được gán sử dụng với những lớp. Giống như vậy, những kiểu cho một phần tử đặc biệt có thể đợc thừa kế từ bất kỳ nguồn này nào.
Bạn có thể cũng thay đổi những kiểu này ở nhiều mức. Cho ví dụ, bạn có thể thay đổi thuộc tính style của một tag HTML, hoặc nó là thuộc tính CLASS. Trừ phi những phư- ơng pháp này sẽ thay đổi tất cả những tham số kiểu của phần tử. Thông thường, bạn có thể muốn thay đổi chỉ là một kiểu tham số đơn, hoặc lựa chọn một ít thành phần, trong khi giữ nguyên những phần khác.
Thuộc tính kiểu dáng và nút phần tử được định nghĩa như một đối tượng với những thuộc tính cho mỗi tham số kiểu có thể. Bạn có thể truy nhập và cập nhật những tham số riêng lẻ này nếu Bạn muốn.
Ví dụ canh lề văn bản trong một phần tử đoạn.
<p id="sample2" style="text-align:left;">Text in a paragraph element.</p>
... code for the links ...
document.getElementById('sample2').style.textAlign = 'left';
document.getElementById('sample2').style.textAlign = 'right';
7. Sử dụng nội dung động
Thay đổi nguyên bản nội dung trang web khá dễ dàng, mọi chuỗi liên tục của dữ liệu ký tự trong BODY của trang HTML được trình bày trong text node. Thuộc tính
“nodeValue” của mỗi node là văn bản của chính nó. Thay đổi giá trị này sẽ thay đổi văn bản của một trang.
Xem xét ví dụ đơn giản dưới đây:
<p id="sample1">This is the initial text.</p>
... code for the links ...
document.getElementById('sample1').firstChild.nodeValue = 'Once upon a time...';
document.getElementById('sample1').firstChild.nodeValue = '...in a galaxy far, far away';
Như ta nhận thấy, những nút văn bản không có thuộc tính ID cho những phần tử nút. Do đó chúng không thể trực tiếp truy cập sử dụng document.getElementById() hoặc document.getElementsByTagName().
Thay vào đó, để tham chiếu tới những văn bản này mà nó có phần tử đoạn với ID
“sample1”. Node này có một node con là node văn bản ta cần tham chiếu tới. ta có thể nhận thấy theo sơ đồ dưới đây:
Như vậy document.getElementById( ' sample1 '). firstChild.nodeValue được sử dụng truy nhập nút và đọc văn bản này hoặc đặt giá trị chuỗi của nó.