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.