JavaScript biểu cảm: Mô hình đối tượng tài liệu

Trong bài học này chúng ta sẽ xem xét những gì mô hình đối tượng tài liệu và vai trò của nó khi viết tập lệnh bằng JavaScript.

Mô hình đối tượng tài liệu (DOM) là gì?

Document Object Model (DOM - Document Object Model) là tập hợp các đối tượng mà trình duyệt tạo ra trong bộ nhớ của máy tính (trình duyệt) dựa trên mã HTML. Trong JavaScript, nó được sử dụng để tạo các trang web động, tức là. những trang đó sẽ thay đổi ngay lập tức nếu mô hình đối tượng của tài liệu này thay đổi. Những thứ kia. Khi tạo các trang như vậy, nhà phát triển web không làm việc với mã HTML của trang này mà làm việc với các đối tượng (DOM) mà trình duyệt tạo dựa trên mã này.

Khi viết tập lệnh JavaScript, bạn có thể làm nhiều việc hơn là chỉ thay đổi thuộc tính các đồ vật khác nhau, mà còn thêm các đối tượng mới ( phần tử HTML) và xóa những cái hiện có. Tất cả các thay đổi được thực hiện đối với mô hình đối tượng tài liệu sẽ được phản ánh ngay lập tức trên trang web.

Cấu trúc mã HTML

Nhưng trước khi chuyển sang nghiên cứu mô hình đối tượng tài liệu, bạn cần nhớ nó là gì nguồn trang web (tài liệu HTML).

Mã nguồn của một trang web (tài liệu HTML) bao gồm các thẻ HTML và văn bản. Thẻ là cấu trúc cú pháp cơ bản của mã HTML. Hầu hết các thẻ đều được ghép nối, tức là. một trong số chúng đang mở và cái còn lại đang đóng. Một cặp thẻ như vậy tạo thành một phần tử HTML. Trong một tài liệu HTML, các phần tử được lồng vào nhau. Kết quả là, một trang web (tài liệu HTML) là một tập hợp các phần tử HTML được lồng vào nhau.

Ví dụ: hãy xem xét mã HTML sau: Tiêu đề trang Tiêu đề bài viết Phần

Nội dung của bài viết

Phần tử gốc của tài liệu này là phần tử html, được lồng trong đó là các phần tử head và body. Phần tử head chứa phần tử title và phần tử body chứa phần tử h1 và div. Phần tử div lần lượt chứa phần tử h2 và phần tử p.

cây DOM

Trình duyệt, nhận mã HTML từ Internet, trước tiên sẽ xây dựng một cây nút (đối tượng) trong bộ nhớ của nó. Và chỉ sau đó, dựa trên cây này, nó mới “vẽ” hình ảnh của trang này trong cửa sổ hoặc tab của nó.

Cây DOM là một tập hợp các nút (đối tượng, phần tử) được kết nối với nhau. Mỗi phần tử HTML tạo thành một nút trong cây này.

Mối quan hệ giữa các nút (đối tượng, phần tử) được xác định dựa trên thực tế là mỗi phần tử trong tài liệu HTML được lồng trong một số phần tử khác. Một phần tử chứa các phần tử khác là phần tử cha của chúng. Bất kỳ phần tử nào trong mã HTML đều có phần tử gốc riêng và chỉ có một phần tử duy nhất. Nếu một phần tử chứa các phần tử khác, thì chúng là phần tử con (con, hậu duệ trực tiếp). Một phần tử có thể chứa bất kỳ số lượng phần tử con nào. Nếu chúng ta “sắp xếp” tất cả các thành phần của mã HTML tùy thuộc vào mối quan hệ của chúng với nhau thì chúng ta sẽ có một cái cây. Cây này được trình duyệt xây dựng từ trên xuống dưới.

Ở trên cùng của cây này là nút tài liệu. Nút này có một nút con html, được hình thành bởi phần tử html (...). Các nút đầu ( ... ) và thân ( ... ) được lồng trong nút html và liên quan đến nó là các nút con của nó. Nút đầu chứa một tiêu đề nút con ( ... ). Các nút h1 và div được lồng trong nút body, là nút cha của chúng. Nút div chứa các nút h2(...) và p(), là các nút con của nó.

Trình duyệt, sau khi xây dựng một cây nút dựa trên mã HTML, luôn có thể triển khai hoạt động ngược lại Tạo mã HTML dựa trên cây này.

Công việc chính của một trang HTML trong JavaScript là làm việc với các nút này. Ngay khi bạn thay đổi thuộc tính của các nút này trong cây, thêm nút mới hoặc xóa nút hiện có, các thay đổi sẽ tự động xuất hiện trên màn hình của người dùng và mã HTML cũng tự động thay đổi. Những thứ kia. Đang xảy ra hành động ngược lại, mã HTML được xây dựng dựa trên cây.

Bài tập

Dựa vào cây DOM như trong hình, tạo mã HTML.

Khi bạn mở một trang web trong trình duyệt, nó sẽ nhận được bản gốc văn bản HTML và phân tích nó gần giống như cách trình phân tích cú pháp của chúng tôi ở Chương 11 đã phân tích chương trình. Trình duyệt xây dựng mô hình cấu trúc của tài liệu và sử dụng nó để vẽ trang trên màn hình.

Trình bày tài liệu này là một trong những đồ chơi có sẵn trong hộp cát JavaScript. Bạn có thể đọc nó và thay đổi nó. Nó thay đổi theo thời gian thực - ngay khi bạn điều chỉnh nó, trang trên màn hình sẽ cập nhật để phản ánh những thay đổi.

Cấu trúc tài liệu

Bạn có thể coi HTML như một chuỗi các hộp lồng nhau. Các thẻ dường như bao gồm các thẻ khác, từ đó bao gồm các thẻ hoặc văn bản. Đây là một tài liệu ví dụ từ chương trước:

Trang chủ của tôi Trang chủ của tôi

Xin chào, tôi là Marijn và đây là trang chủ của tôi.

Và tôi cũng đã viết một cuốn sách! Đọc nó ở đây.

Trang này có cấu trúc như sau:

Cấu trúc dữ liệu mà trình duyệt sử dụng để trình bày một tài liệu phản ánh hình thức của nó. Đối với mỗi hộp, có một đối tượng mà chúng ta có thể tương tác và tìm hiểu dữ liệu khác nhau về nó - nó đại diện cho thẻ gì, hộp và văn bản nào chứa trong đó. Cách biểu diễn này được gọi là Mô hình đối tượng tài liệu hoặc viết tắt là DOM.

Chúng ta có thể truy cập các đối tượng này thông qua biến toàn cục document. Thuộc tính documentElement của nó đề cập đến đối tượng đại diện cho thẻ. Nó cũng cung cấp các thuộc tính head và body, chứa các đối tượng cho các phần tử tương ứng.

Cây Hãy nhớ lại cây cú pháp trong Chương 11. Cấu trúc của chúng rất giống với cấu trúc của một tài liệu trình duyệt. Mỗi nút có thể liên kết với các nút khác và mỗi nhánh có thể có nhánh riêng. Cấu trúc này là ví dụ điển hình các cấu trúc lồng nhau, trong đó các phần tử chứa các phần tử con tương tự với chính chúng.

Chúng tôi gọi cấu trúc dữ liệu là cây khi nó phân nhánh, không có vòng lặp (một nút không thể chứa chính nó) và có một “gốc” riêng biệt. Trong trường hợp DOM, gốc là document.documentElement.

Cây thường được tìm thấy trong khoa học tính toán. Ngoài việc giới thiệu các cấu trúc đệ quy như tài liệu HTML hoặc các chương trình, chúng thường được sử dụng để làm việc với các tập hợp dữ liệu đã được sắp xếp vì các phần tử thường dễ tìm hoặc chèn vào cây đã được sắp xếp hơn là vào mảng một chiều đã được sắp xếp.

Một cây điển hình có các nút khác nhau. Cây cú pháp ngôn ngữ Egg có các biến, giá trị và ứng dụng. Các ứng dụng luôn có các nhánh con, các biến và giá trị là "lá", tức là các nút không có nhánh con.

Điều tương tự cũng xảy ra với DOM. Các nút cho các phần tử thông thường đại diện Thẻ HTML, xác định cấu trúc của tài liệu. Họ có thể có các nút con. Một ví dụ về nút như vậy là document.body. Một số nút con này có thể là các lá - ví dụ: văn bản hoặc nhận xét (trong Nhận xét HTMLđược viết giữa các ký tự).

Mỗi đối tượng nút DOM có một thuộc tính nodeType, chứa mã số xác định loại nút. Đối với các phần tử thông thường, nó bằng 1, cũng được định nghĩa là một thuộc tính không đổi document.ELEMENT_NODE. Các nút văn bản biểu thị các đoạn văn bản có giá trị là 3 (document.TEXT_NODE). Bình luận có 8 (document.COMMENT_NODE).

Nghĩa là, đây là một cách khác để biểu diễn cây tài liệu bằng đồ họa:

Các lá là các nút văn bản và các mũi tên hiển thị mối quan hệ cha-con giữa các nút.

Tiêu chuẩn Sử dụng số khó hiểu để biểu thị loại nút không phải là một cách tiếp cận Kiểu JavaScript. Sau này chúng ta sẽ gặp những phần khác của giao diện DOM cũng có vẻ xa lạ và khó xử. Lý do là DOM không được thiết kế chỉ dành cho JavaScript. Nó cố gắng xác định một giao diện độc lập với ngôn ngữ có thể được sử dụng trong các hệ thống khác - không chỉ HTML mà còn cả XML, một định dạng dữ liệu mục đích chung với cú pháp gợi nhớ đến HTML.

Hóa ra là bất tiện. Mặc dù các tiêu chuẩn là một điều rất hữu ích, nhưng trong trường hợp của chúng tôi, lợi thế về tính độc lập của ngôn ngữ lại không hữu ích lắm. Sẽ tốt hơn nếu có một giao diện thích ứng tốt với ngôn ngữ bạn đang sử dụng hơn là một giao diện quen thuộc với nhiều ngôn ngữ.

Để minh họa sự tích hợp khó khăn với ngôn ngữ, hãy xem xét thuộc tính childNodes mà các nút DOM có. Nó chứa một đối tượng giống như mảng với thuộc tính độ dài và các thuộc tính được đánh số để truy cập các nút con. Nhưng đây là một thể hiện của kiểu NodeList, không phải là một mảng thực sự, nên nó không có các phương thức như forEach.

Cũng có những vấn đề liên quan đến thiết kế hệ thống kém. Ví dụ: bạn không thể tạo một nút mới và thêm ngay các thuộc tính hoặc nút con vào nút đó. Trước tiên, bạn cần tạo nó, sau đó thêm từng phần tử con và cuối cùng gán từng thuộc tính một bằng cách sử dụng các tác dụng phụ. Mã hoạt động chặt chẽ với DOM hóa ra dài, xấu và lặp lại nhiều.

Nhưng những vấn đề này không gây tử vong. JavaScript cho phép bạn tạo sự trừu tượng. Thật dễ dàng để viết các hàm trợ giúp cho phép bạn diễn đạt các thao tác rõ ràng và chính xác hơn. Nhìn chung, những loại công cụ này cung cấp nhiều thư viện nhằm mục đích lập trình cho trình duyệt.

Các nút DOM Traversal dạng cây chứa nhiều tham chiếu đến các nút lân cận. Điều này được thể hiện trong sơ đồ:

Mặc dù chỉ có một liên kết của mỗi loại được hiển thị ở đây, mỗi nút có thuộc tính parentNode trỏ đến nút cha của nó. Mỗi nút phần tử (loại 1) cũng có thuộc tính childNodes trỏ đến một đối tượng dạng mảng chứa các nút con của nó.

Về lý thuyết, bạn có thể truy cập bất kỳ phần nào của cây chỉ bằng các liên kết này. Nhưng JavaScript cung cấp cho chúng ta rất nhiều liên kết trợ giúp bổ sung. Các thuộc tính firstChild và LastChild trỏ đến phần tử con đầu tiên và cuối cùng hoặc là null đối với những nút không có phần tử con. previousSibling và nextSibling trỏ tới các nút lân cận - các nút có cùng cha với nút hiện tại nhưng ở ngay trước hoặc sau nút hiện tại trong danh sách. Thuộc tính previousSibling của nút đầu tiên sẽ là null và thuộc tính nextSibling của nút cuối cùng sẽ là null.

Khi làm việc với các cấu trúc lồng nhau như vậy, chúng có ích hàm đệ quy. Lệnh sau sẽ tìm kiếm các nút văn bản chứa chuỗi đã cho trong tài liệu và trả về true khi tìm thấy:

Hàm talkAbout(node, string) ( if (node.nodeType == document.ELEMENT_NODE) ​​​​( for (var i = 0; i< node.childNodes.length; i++) { if (talksAbout(node.childNodes[i], string)) return true; } return false; } else if (node.nodeType == document.TEXT_NODE) { return node.nodeValue.indexOf(string) >-1; ) ) console.log(talksAbout(document.body, "books")); // → đúng

Thuộc tính nút văn bản nodeValue chứa một dòng văn bản.

Tìm kiếm các phần tử Việc điều hướng qua các liên kết cha, con và anh chị em này và di chuyển qua toàn bộ tài liệu thường rất hữu ích. Tuy nhiên, nếu chúng ta cần một nút cụ thể trong một tài liệu, sẽ rất bất tiện khi đi qua nó, bắt đầu từ document.body và ngu ngốc đi qua đường dẫn được mã hóa cứng trong mã. Bằng cách này, chúng tôi đưa ra các giả định trong chương trình về cấu trúc chính xác của tài liệu - điều mà sau này chúng tôi có thể muốn thay đổi. Một yếu tố phức tạp khác là các nút văn bản được tạo ngay cả khi có khoảng cách giữa các nút. Trong tài liệu ví dụ thẻ cơ thể không phải ba con (h1 và hai con p), mà có tới bảy con: ba con này cộng với khoảng trắng trước, sau và giữa chúng.

Liên kết Var = document.body.getElementsByTagName("a"); console.log(link.href);

Tất cả các nút phần tử đều có phương thức getElementsByTagName thu thập tất cả các phần tử có thẻ nhất định là hậu duệ (hậu duệ trực tiếp hoặc gián tiếp) của nút đó và trả về dưới dạng đối tượng giống mảng.

Để tìm một nút cụ thể, bạn có thể cung cấp cho nó thuộc tính id và sử dụng phương thức document.getElementById.

Đà điểu Gertrude của tôi:

var đà điểu = document.getElementById("gertrude"); console.log(ostrich.src);

Phương thức thứ ba là getElementsByClassName, giống như getElementsByTagName, tìm kiếm nội dung của nút phần tử và trả về tất cả các phần tử có chứa chuỗi đã chỉ định trong lớp của chúng.

Thay đổi tài liệu Hầu hết mọi thứ trong cấu trúc DOM đều có thể được thay đổi. Các nút phần tử có một tập hợp các phương thức được sử dụng để sửa đổi chúng. Phương thức RemoveChild loại bỏ nút con được chỉ định. Để thêm nút, bạn có thể sử dụngappendChild để thêm nút vào cuối danh sách hoặc InsertBefore để thêm nút được chuyển làm đối số đầu tiên trước khi nút được chuyển làm đối số thứ hai.

var đoạn = document.body.getElementsByTagName("p"); document.body.insertBefore(đoạn văn, đoạn văn);

Một nút chỉ có thể tồn tại ở một nơi trong tài liệu. Vì vậy, bằng cách chèn đoạn “Ba” trước đoạn “Một”, chúng ta thực sự đang xóa nó khỏi cuối danh sách và chèn nó vào đầu danh sách, và chúng ta nhận được “Ba/Một/Hai”. Tất cả các thao tác chèn một nút sẽ dẫn đến việc nút đó biến mất khỏi vị trí hiện tại (nếu có).

Phương thức thay thếChild được sử dụng để thay thế một nút con bằng một nút khác. Nó chấp nhận hai nút: nút mới và nút cần được thay thế. Nút được thay thế phải là nút con của phần tử có phương thức mà chúng ta đang gọi. Cả thay thếChild và chènTrước đều mong đợi một nút mới làm đối số đầu tiên của chúng.

Tạo các nút Trong ví dụ sau, chúng ta cần tạo một tập lệnh thay thế tất cả các hình ảnh (thẻ) trong tài liệu bằng văn bản có trong thuộc tính “alt” của chúng, chỉ định cách trình bày văn bản thay thế của hình ảnh.

Để thực hiện việc này, bạn không chỉ cần xóa ảnh mà còn phải thêm các nút văn bản mới để thay thế chúng. Để làm điều này, chúng tôi sử dụng phương thức document.createTextNode.

Cái này V. .

Thay thế

hàm thayImages() ( var Images = document.body.getElementsByTagName("img"); for (var i = Images.length - 1; i >= 0; i--) ( var image = Images[i]; if ( image.alt) ( var text = document.createTextNode(image.alt); image.parentNode.replaceChild(text, image); ) ) )

Cho một chuỗi, createTextNode cung cấp cho chúng ta một nút DOM loại 3 (văn bản) mà chúng ta có thể chèn vào tài liệu để hiển thị trên màn hình.

Chu trình duyệt các hình ảnh bắt đầu ở cuối danh sách các nút. Điều này được thực hiện vì danh sách các nút được phương thức getElementsByTagName (hoặc thuộc tính childNodes) trả về được cập nhật liên tục khi tài liệu thay đổi. Nếu chúng ta bắt đầu lại từ đầu, việc xóa ảnh đầu tiên sẽ khiến danh sách mất phần tử đầu tiên và trong lần lặp thứ hai, khi i bằng 1, nó sẽ dừng vì độ dài của danh sách cũng sẽ trở thành 1.

Nếu bạn cần làm việc với một danh sách các nút cố định thay vì một danh sách trực tiếp, bạn có thể chuyển đổi nó thành một mảng thực bằng phương thức lát cắt.

Var arrayish = (0: "một", 1: "hai", chiều dài: 2); var real = Array.prototype.slice.call(arrayish, 0); real.forEach(function(elt) ( console.log(elt); )); // → một // hai

Để tạo các nút phần tử (loại 1), bạn có thể sử dụng document.createElement. Phương thức này lấy tên thẻ và trả về một nút trống mới thuộc loại đã cho. Ví dụ sau định nghĩa công cụ elt, công cụ này tạo một nút phần tử và sử dụng các đối số còn lại làm con của nó. Chức năng này sau đó được sử dụng để thêm thông tin bổ sung vào báo giá.

Không có cuốn sách nào được hoàn thành. Chúng ta học đủ trong khi làm việc với nó để thấy nó còn non nớt ngay khi chúng ta rời bỏ nó. hàm elt(type) ( var node = document.createElement(type); for (var i = 1; i< arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } document.getElementById("quote").appendChild(elt("footer", "-", elt("strong", "Карл Поппер"), ", предисловие ко второму изданию ", elt("em", "Открытое общество и его враги "), ", 1950"));

Thuộc tính Một số thành phần thuộc tính, chẳng hạn như href cho các liên kết, có thể được truy cập thông qua thuộc tính đối tượng cùng tên. Điều này có thể cho số lượng giới hạn thuộc tính tiêu chuẩn được sử dụng thường xuyên.

Nhưng HTML cho phép bạn gán bất kỳ thuộc tính nào cho các nút. Điều này rất hữu ích vì... cho phép bạn lưu trữ Thông tin thêm trong tài liệu. Nếu bạn nghĩ ra tên thuộc tính của riêng mình, chúng sẽ không nằm trong số các thuộc tính của nút phần tử. Thay vào đó, bạn sẽ cần sử dụng các phương thức getAttribution và setAttribution để làm việc với chúng.

Mã bắt đầu 00000000.

Con mèo có bốn chân.

var paras = document.body.getElementsByTagName("p"); Array.prototype.forEach.call(paras, function(para) ( if (para.getAttribution("data-classified") == "secret") para.parentNode.removeChild(para); ));

Tôi khuyên bạn nên đặt “data-” trước tên của các thuộc tính được phát minh để đảm bảo rằng chúng không xung đột với bất kỳ thuộc tính nào khác. BẰNG ví dụ đơn giản chúng tôi sẽ viết đánh dấu cú pháp để tìm kiếm các thẻ (“được định dạng sẵn” – được sử dụng cho mã và văn bản thô) với thuộc tính ngôn ngữ dữ liệu và cố gắng làm nổi bật các từ khóa trong ngôn ngữ một cách thô bạo.

Hàm highlightCode(node, keywords) ( var text = node.textContent; node.textContent = ""; // Xóa nút var match, pos = 0; while (match = keywords.exec(text)) ( var before = text .slice(pos, match.index);node.appendChild(document.createTextNode(trước)); var strong = document.createElement("strong"); strong.appendChild(document.createTextNode(match)); node.appendChild( mạnh ); pos = keywords.lastIndex; ) var after = text.slice(pos); node.appendChild(document.createTextNode(after)); )

Hàm highlightCode lấy một nút VÀ một ký tự thông thường (đã bật cài đặt chung) khớp với từ khóa ngôn ngữ lập trình có chứa phần tử.

Thuộc tính textContent được sử dụng để lấy tất cả văn bản của nút và sau đó được đặt thành chuỗi trống để xóa nút. Chúng tôi lặp qua tất cả các lần xuất hiện của biểu thức từ khóa, thêm văn bản giữa chúng dưới dạng các nút văn bản đơn giản và thêm văn bản phù hợp (từ khóa) bằng cách đặt chúng trong các phần tử (in đậm).

Chúng tôi có thể tự động đánh dấu toàn bộ mã trang bằng cách lặp qua tất cả các phần tử có thuộc tính ngôn ngữ dữ liệu và gọi highlightCode trên mỗi phần tử bằng biểu thức chính quy chính xác.

Ngôn ngữ Var = ( javascript: /\b(function|return|var)\b/g /* … etc */ ); hàm highlightAllCode() ( var pres = document.body.getElementsByTagName("pre"); for (var i = 0; i< pres.length; i++) { var pre = pres[i]; var lang = pre.getAttribute("data-language"); if (languages.hasOwnProperty(lang)) highlightCode(pre, languages); } }

Đây là một ví dụ:

Và đây là chức năng nhận dạng:

Hàm id(x) ( return x; ) highlightAllCode();

Có một thuộc tính thường được sử dụng, lớp, có tên là một từ khóa trong JavaScript. Vì lý do lịch sử, khi xưa Triển khai JavaScript không biết cách xử lý tên thuộc tính khớp với từ khóa, thuộc tính này có thể truy cập được thông qua thuộc tính có tên className. Bạn cũng có thể truy cập nó bằng tên thật “class” thông qua các phương thức getAttribution và setAttribution.

Bố cục Bạn có thể nhận thấy rằng các loại khác nhau các phần tử được sắp xếp khác nhau. Một số, như đoạn văn

Và các tiêu đề trải dài trên toàn bộ chiều rộng của tài liệu và xuất hiện trên các dòng riêng biệt. Những phần tử như vậy được gọi là phần tử khối. Những người khác như liên kết hoặc văn bản in đậm xuất hiện trên cùng một dòng với văn bản xung quanh. Chúng được gọi là tích hợp sẵn (nội tuyến).

Đối với bất kỳ tài liệu nào, trình duyệt có thể xây dựng sự sắp xếp các thành phần, bố cục trong đó mỗi thành phần sẽ có kích thước và vị trí dựa trên loại và nội dung của nó. Bố cục này sau đó được sử dụng để tạo ra diện mạo của tài liệu.

Kích thước và vị trí của một phần tử có thể được tìm thấy thông qua JavaScript. Các thuộc tính offsetWidth và offsetHeight cung cấp kích thước tính bằng pixel mà phần tử chiếm giữ. Pixel là đơn vị đo lường cơ bản trong trình duyệt và thường tương ứng với kích thước của điểm nhỏ nhất trên màn hình. Tương tự, clientWidth và clientHeight cung cấp kích thước bên trong của phần tử, không tính đường viền (hoặc, như một số người nói, lề đường).

Tôi đang ở trong một cái hộp

var para = document.body.getElementsByTagName("p"); console.log("clientHeight:", para.clientHeight); console.log("offsetHeight:", para.offsetHeight);

Cách hiệu quả nhất để tìm ra vị trí chính xác của một phần tử trên màn hình là phương thức getBoundingClientRect. Nó trả về một đối tượng có các thuộc tính trên, dưới, trái và phải chứa vị trí của phần tử so với góc trên cùng bên trái của màn hình tính bằng pixel. Nếu bạn cần lấy dữ liệu này liên quan đến toàn bộ tài liệu, bạn cần thêm vị trí cuộn hiện tại, được chứa trong các biến toàn cục pageXOffset và pageYOffset.

Phân tích một tài liệu là một công việc khó khăn. Vì lý do tốc độ, công cụ trình duyệt không xây dựng lại tài liệu mỗi khi nó được thay đổi mà phải đợi lâu như vậy. sao có thể như thế được. Khi chương trình JavaScript sửa đổi tài liệu chạy xong, trình duyệt sẽ cần tính toán bố cục trang mới để hiển thị tài liệu đã sửa đổi trên màn hình. Khi một chương trình yêu cầu vị trí hoặc kích thước của thứ gì đó bằng cách đọc các thuộc tính như offsetHeight hoặc gọi getBoundingClientRect, bố cục cũng phải được tính toán để cung cấp thông tin chính xác.

Một chương trình định kỳ đọc bố cục DOM và sửa đổi DOM sẽ buộc trình duyệt tính toán lại bố cục nhiều lần và do đó sẽ bị chậm. Trong ví dụ sau, có hai chương trình khác nhau xây dựng một dòng ký tự X rộng 2000 px và đo thời gian chạy.

function time(name, action) ( var start = Date.now(); // Thời gian hiện tại tính bằng mili giây action(); console.log(name, "taken", Date.now() - start, "ms"); ) time("ngu ngốc", function() ( var target = document.getElementById("one"); while (target.offsetWidth< 2000) target.appendChild(document.createTextNode("X")); }); // → тупо заняло 32 ms time("умно", function() { var target = document.getElementById("two"); target.appendChild(document.createTextNode("XXXXX")); var total = Math.ceil(2000 / (target.offsetWidth / 5)); for (var i = 5; i < total; i++) target.appendChild(document.createTextNode("X")); }); // → умно заняло 1 ms

Kiểu dáng Chúng ta đã thấy rằng các phần tử HTML khác nhau hoạt động khác nhau. Một số được hiển thị dưới dạng khối, một số khác là nội tuyến. Một số thêm phong cách trực quan, chẳng hạn như làm đậm văn bản và làm cho văn bản được gạch chân và có màu xanh lam.

Sự xuất hiện của hình ảnh trong thẻ hoặc việc liên kết trong thẻ mở ra một trang mới khi được nhấp vào có liên quan đến loại phần tử. Tuy nhiên, chúng tôi có thể thay đổi các kiểu cơ bản liên quan đến phần tử, chẳng hạn như màu văn bản hoặc gạch chân. Đây là một ví dụ về cách sử dụng thuộc tính style:

Liên kết xanh

Thuộc tính style có thể chứa một hoặc nhiều khai báo thuộc tính (màu), theo sau là dấu hai chấm và một giá trị. Trong trường hợp khai báo nhiều lần thì chúng cách nhau bằng dấu chấm phẩy: “color: red; biên giới: không có".

Rất nhiều thứ có thể được thay đổi bằng cách sử dụng phong cách. Ví dụ: thuộc tính display kiểm soát xem một phần tử được hiển thị ở dạng khối hay dạng nội tuyến.

Văn bản được hiển thị nội tuyến, dưới dạng một khối và hoàn toàn không hiển thị.

Một phần tử khối được hiển thị dưới dạng một khối riêng biệt và phần tử sau hoàn toàn không hiển thị – display: none vô hiệu hóa việc hiển thị các phần tử. Bằng cách này bạn có thể ẩn các phần tử. Điều này thường được ưa thích loại bỏ hoàn toàn chúng khỏi tài liệu vì sẽ dễ dàng hiển thị lại chúng sau này nếu cần.

Mã JavaScript có thể tác động trực tiếp lên kiểu của một phần tử thông qua thuộc tính style của nút. Nó chứa một đối tượng có các thuộc tính cho tất cả các thuộc tính kiểu. Giá trị của chúng là các chuỗi mà chúng ta có thể ghi vào để thay đổi một số khía cạnh về kiểu dáng của phần tử.

Sắc đẹp

var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "màu đỏ tươi";

Một số tên thuộc tính kiểu có chứa dấu gạch nối, chẳng hạn như họ phông chữ. Vì chúng sẽ khó làm việc với JavaScript (bạn sẽ phải viết style["font-family"]), nên tên thuộc tính trong đối tượng style được viết không có dấu gạch nối mà thay vào đó xuất hiện bằng chữ in hoa: style.fontFamily

Kiểu xếp tầng Hệ thống kiểu trong HTML được gọi là CSS (Cascading Style Sheets). Một bảng định kiểu là một tập hợp các kiểu trong một tài liệu. Nó có thể được viết bên trong một thẻ:
mạnh mẽ (kiểu chữ: in nghiêng; màu sắc: xám; )

Bây giờ văn bản của thẻ mạnh đã bị nghiêng và có màu xám.

"Xếp tầng" có nghĩa là nhiều quy tắc được kết hợp để tạo ra kiểu tài liệu cuối cùng. Trong ví dụ này, kiểu mặc định, làm cho văn bản được in đậm, được xếp chồng với một quy tắc từ thẻ, bổ sung thêm kiểu phông chữ và màu sắc.

Khi giá trị của một thuộc tính được xác định bởi nhiều quy tắc, những quy tắc sau sẽ được ưu tiên. Nếu kiểu văn bản bao gồm quy tắc font-weight: normal, xung đột với kiểu mặc định, thì văn bản sẽ ở dạng bình thường, không đậm. Các kiểu được áp dụng cho một nút thông qua thuộc tính phong cách, có mức độ ưu tiên cao nhất.

Trong CSS, không chỉ có thể đặt tên của các thẻ. Quy tắc cho .abc áp dụng cho tất cả các phần tử có lớp “abc” được chỉ định. Quy tắc #xyz áp dụng cho phần tử có thuộc tính id bằng “xyz” (thuộc tính id phải được đặt là duy nhất cho tài liệu).

Subtle ( color: grey; font-size: 80%; ) #header ( background: blue; color: white; ) /* Phần tử p có lớp a và b và id được đặt thành main */ p.a.b#main ( lề-bottom : 20px; )

Mức độ ưu tiên của các quy tắc mới nhất hoạt động khi các quy tắc có cùng mức độ chi tiết. Nó là thước đo mức độ mô tả chính xác các yếu tố đủ điều kiện, được xác định bởi số lượng và loại khía cạnh yếu tố cần thiết. Ví dụ: quy tắc cho p.a chi tiết hơn quy tắc cho p hoặc just.a và sẽ được ưu tiên.

Ký hiệu p > a (...) áp dụng cho tất cả các thẻ bên trong thẻ và là con cháu trực tiếp của nó.
p a (...) cũng áp dụng cho tất cả các thẻ bên trong, cho dù đó có phải là con trực tiếp hay không.

Bộ chọn truy vấn Chúng ta sẽ không sử dụng nhiều các biểu định kiểu trong cuốn sách này. Hiểu cách chúng hoạt động là rất quan trọng đối với việc lập trình trình duyệt, nhưng để giải thích chi tiết về tất cả các thuộc tính của chúng sẽ cần đến 2-3 cuốn sách. Lý do chính làm quen với chúng và với cú pháp của bộ chọn (các mục xác định phần tử nào mà quy tắc áp dụng) - chúng ta có thể sử dụng cùng một ngôn ngữ nhỏ hiệu quả để tìm kiếm các phần tử DOM.

Phương thức querySelectorAll, tồn tại trên cả đối tượng tài liệu và phần tử nút, lấy một chuỗi bộ chọn và trả về một đối tượng giống như mảng chứa tất cả các phần tử khớp với nó.

Tôi yêu cơn giông đầu tháng năm

Khi tiếng sấm đầu tiên của mùa xuân

Như đang nô đùa chơi đùa

Rung động trên bầu trời xanh.

hàm count(selector) ( return document.querySelectorAll(selector).length; ) console.log(count("p")); // Tất cả các phần tử

// → 4 console.log(count(".animal")); // Lớp động vật // → 2 console.log(count("p .animal")); // Lớp động vật bên trong

// → 2 console.log(count("p > .animal")); // Con trực tiếp

// → 1

Không giống như các phương thức như getElementsByTagName, đối tượng được querySelectorAll trả về không có tính tương tác. Nó sẽ không thay đổi nếu bạn thay đổi tài liệu.

Phương thức querySelector (không có Tất cả) hoạt động theo cách tương tự. Bạn cần nó nếu bạn cần một yếu tố cụ thể. Nó sẽ chỉ trả về kết quả khớp đầu tiên hoặc null nếu không có kết quả khớp nào.

Vị trí và Hoạt ảnh Thuộc tính vị trí của kiểu ảnh hưởng lớn đến vị trí của các phần tử. Theo mặc định, nó là tĩnh, có nghĩa là phần tử ở vị trí bình thường trong tài liệu. Khi ở dạng tương đối, phần tử vẫn chiếm không gian, nhưng bây giờ thuộc tính top và left có thể được sử dụng để di chuyển nó so với vị trí bình thường. Khi nó ở mức tuyệt đối, phần tử sẽ bị xóa khỏi "luồng" thông thường của tài liệu - nghĩa là nó không chiếm dung lượng và có thể chồng lấp với các phần tử khác. Ngoài ra, các thuộc tính left và top của nó có thể được sử dụng để định vị nó hoàn toàn tương đối với left. góc trên cùng phần tử gần nhất chứa nó có vị trí không bằng tĩnh. Và nếu không có phần tử nào như vậy thì nó sẽ được định vị tương ứng với tài liệu.

Chúng ta có thể sử dụng điều này để tạo hoạt ảnh. Tài liệu sau đây thể hiện hình ảnh một con mèo đang di chuyển theo hình elip.

var cat = document.querySelector("img"); góc var = 0, LastTime = null; hàm animate(time) ( if (lastTime != null) góc += (time - LastTime) * 0,001; LastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat .style.left = (Math.cos(góc) * 200) + "px"; requestAnimationFrame(animate); ) requestAnimationFrame(animate);

Hình ảnh được căn giữa trên trang và có vị trí nhất định: tương đối. Chúng tôi liên tục cập nhật các thuộc tính trên cùng và bên trái của hình ảnh để khiến nó chuyển động.

Tập lệnh sử dụng requestAnimationFrame để gọi hàm animate mỗi khi trình duyệt sẵn sàng vẽ lại màn hình. Bản thân hàm animate gọi lại requestAnimationFrame để lên lịch cập nhật tiếp theo. Khi cửa sổ trình duyệt (hoặc dấu trang) hoạt động, điều này sẽ dẫn đến các bản cập nhật với tốc độ khoảng 60 lần mỗi giây, cho phép tạo ra các hình ảnh động đẹp mắt.

Nếu chúng tôi chỉ cập nhật DOM theo vòng lặp, trang sẽ bị đóng băng và không hiển thị gì. Trình duyệt không làm mới trang trong khi Công việc JavaScript và không được phép làm việc với trang vào lúc này. Đó là lý do tại sao chúng ta cần requestAnimationFrame - nó cho trình duyệt biết rằng hiện tại chúng ta đã hoàn thành và nó có thể thực hiện các công việc của trình duyệt như làm mới màn hình và phản hồi các yêu cầu của người dùng.

Hàm hoạt ảnh của chúng tôi chuyển thời gian hiện tại thông qua các đối số, nó so sánh với thời gian trước đó (biến LastTime) để chuyển động của con mèo đồng nhất và hoạt ảnh chạy trơn tru. Nếu chúng ta chỉ di chuyển nó một khoảng nhất định ở mỗi bước, thì chuyển động sẽ chậm lại nếu, chẳng hạn, một tác vụ khác được tải vào máy tính.

Chuyển động tròn được thực hiện bằng cách sử dụng các hàm lượng giác Math.cos và Math.sin. Tôi sẽ mô tả ngắn gọn chúng cho những người chưa quen vì chúng ta sẽ cần chúng sau này.

Math.cos và Math.sin rất hữu ích khi bạn cần tìm các điểm trên đường tròn có tâm tại (0, 0) và bán kính bằng 1. Cả hai hàm đều hiểu đối số của chúng là một vị trí trên đường tròn, trong đó 0 là điểm ở cạnh phải của đường tròn, sau đó ngược chiều kim đồng hồ cho đến khi đường đi 2π (khoảng 6,28) đưa chúng ta đi vòng quanh đường tròn. Math.cos tính toán tọa độ x của điểm là vị trí hiện tại của chúng ta trên đường tròn và Math.sin đưa ra tọa độ y. Các vị trí (hoặc góc) lớn hơn 2π hoặc nhỏ hơn 0 cũng được phép - các phép quay được lặp lại sao cho a+2π có nghĩa là cùng một góc với a.

Sử dụng Sine và Cosine để tính tọa độ Hoạt hình con mèo lưu trữ một bộ đếm góc cho góc quay hiện tại của hoạt ảnh và tăng nó theo tỷ lệ với thời gian đã trôi qua mỗi khi hàm hoạt ảnh được gọi. Góc này được sử dụng để tính toán vị trí hiện tại của phần tử hình ảnh. Kiểu trên cùng được tính toán thông qua Math.sin và nhân với 20 - đây là bán kính dọc của hình elip của chúng ta. Kiểu bên trái được tính toán thông qua Math.cos và nhân với 200 nên chiều rộng của hình elip lớn hơn chiều cao rất nhiều.

Kiểu dáng thường yêu cầu đơn vị đo lường. Trong trường hợp của chúng tôi, chúng tôi phải thêm px vào số để giải thích cho trình duyệt rằng chúng tôi đang tính bằng pixel (chứ không phải tính bằng centimet, ems hoặc các đơn vị khác). Thật dễ dàng để quên. Việc sử dụng số không có đơn vị sẽ khiến kiểu bị bỏ qua - trừ khi số đó là 0, độc lập với đơn vị.

Tóm tắt Các chương trình JavaScript có thể kiểm tra và sửa đổi tài liệu hiện đang hiển thị trong trình duyệt thông qua cấu trúc được gọi là DOM. Cấu trúc dữ liệu này đại diện cho mô hình tài liệu của trình duyệt và chương trình JavaScript có thể sửa đổi nó để thay đổi tài liệu hiển thị. DOM được tổ chức dưới dạng cây, trong đó các phần tử được sắp xếp theo thứ bậc theo cấu trúc của tài liệu. Các đối tượng phần tử có các thuộc tính kiểu parentNode và childNodes, được sử dụng để định hướng trong cây.

Giao diện của tài liệu có thể được thay đổi thông qua các kiểu, bằng cách thêm kiểu trực tiếp vào các nút hoặc bằng cách xác định quy tắc cho một số nút. Kiểu dáng có nhiều thuộc tính, chẳng hạn như màu sắc hoặc cách hiển thị. JavaScript có thể ảnh hưởng trực tiếp đến kiểu của một phần tử thông qua thuộc tính style của nó.

Bài tập Xây dựng bảng Chúng ta đã xây dựng bảng từ văn bản thuần túy trong Chương 6. HTML giúp việc xây dựng bảng trở nên dễ dàng. Một bảng trong HTML được xây dựng bằng các thẻ sau:

tên quốc gia có chiều cao

Kilimanjaro	5895	Tanzania

Mỗi dòng chứa một thẻ. Bên trong nó, chúng ta có thể đặt các ô: ô tiêu đề hoặc ô thông thường.

Dữ liệu tương tự mà chúng ta đã sử dụng trong Chương 6 lại có sẵn trong biến MOUNTAINS.

Viết một hàm buildTable, lấy một mảng các đối tượng có cùng thuộc tính, xây dựng cấu trúc DOM đại diện cho bảng. Bảng phải có một hàng tiêu đề trong đó các tên thuộc tính được gói trong các phần tử và phải có một hàng cho mỗi đối tượng mảng trong đó các thuộc tính của nó được gói trong các phần tử. Đây là lúc hàm Object.keys phát huy tác dụng, trả về một mảng chứa tên các thuộc tính của đối tượng.

Khi bạn đã nắm được những kiến ​​thức cơ bản, hãy căn chỉnh các ô số sang bên phải bằng cách thay đổi thuộc tính style.textAlign của chúng thành "right".

/* Xác định kiểu cho các bảng đẹp */ bảng ( border-collapse: thu gọn; ) td, th ( border: 1px màu đen; đệm: 3px 8px; ) th ( text-align: left; ) function buildTable(data) ( / / Mã của bạn ) document.body.appendChild(buildTable(MOUNTAINS));

Các phần tử theo tên thẻ Phương thức getElementsByTagName trả về tất cả phần tử con Với Tên nhãn. Tạo phiên bản của riêng bạn cho phương thức này dưới dạng một hàm thông thường nhận vào một nút và một chuỗi (tên thẻ) rồi trả về một mảng chứa tất cả các nút giảm dần có tên thẻ đã cho.

Để tìm ra tên thẻ của một phần tử, hãy sử dụng thuộc tính tagName. Lưu ý rằng điều này sẽ trả về tên thẻ bằng chữ in hoa. Sử dụng các phương thức chuỗi toLowerCase hoặc toUpperCase.

Tiêu đề có phần tử span bên trong.

Đoạn văn có một hoặc hai phần tử span.

function byTagName(node, tagName) ( // Mã của bạn ) console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2

Mũ của mèo Mở rộng hoạt ảnh của con mèo để cả con mèo và chiếc mũ của nó đều bay về phía đối diện của hình elip.

Hoặc để chiếc mũ bay quanh con mèo. Hoặc nghĩ ra điều gì đó thú vị khác.

Để đơn giản hóa việc sắp xếp nhiều đối tượng, nên chuyển sang định vị tuyệt đối. Khi đó top và left sẽ được coi là tương đối so với góc trên bên trái của tài liệu. Để tránh sử dụng tọa độ âm, bạn có thể thêm số đã cho pixel để định vị các giá trị.

var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Mã của bạn ở đây.

Phần này giới thiệu ngắn gọn về Mô hình đối tượng tài liệu (DOM) - DOM là gì, nó được cung cấp như thế nào Cấu trúc HTML Và tài liệu XML và cách tương tác với chúng. Phần này chứa thông tin cơ bản và ví dụ.

Mô hình đối tượng tài liệu (DOM) là gì?

Mô hình đối tượng tài liệu (DOM) là giao diện lập trình (API) cho các tài liệu HTML và XML. DOM cung cấp cách trình bày có cấu trúc của một tài liệu và xác định cách cấu trúc đó có thể được truy cập bởi các chương trình có thể thay đổi nội dung, kiểu dáng và cấu trúc của tài liệu. Chế độ xem DOM bao gồm một nhóm có cấu trúc gồm các nút và đối tượng có các thuộc tính và phương thức. Về cơ bản, DOM kết nối một trang web với các ngôn ngữ kịch bản hoặc ngôn ngữ lập trình.

Một trang web là một tài liệu. Tài liệu có thể được trình bày cả trong cửa sổ trình duyệt và trong chính mã HTML. Trong mọi trường hợp, nó là cùng một tài liệu. DOM cung cấp một cách khác để trình bày, lưu trữ và thao tác với tài liệu này. DOM hỗ trợ đầy đủ cách trình bày hướng đối tượng của một trang web, cho phép sửa đổi nó bằng ngôn ngữ kịch bản như JavaScript.

DOM được truy cập như thế nào?

Bạn không cần phải làm gì đặc biệt để thao tác với DOM. Các trình duyệt khác nhau có cách triển khai DOM khác nhau và những cách triển khai này thể hiện mức độ tuân thủ khác nhau với tiêu chuẩn DOM thực tế (một chủ đề mà chúng tôi đã cố gắng tránh đề cập đến trong tài liệu này), nhưng mỗi trình duyệt sử dụng một DOM khác nhau để làm cho các trang web có thể tương tác được với các ngôn ngữ kịch bản.

Bằng cách tạo tập lệnh bằng cách sử dụng phần tử hoặc bằng cách bao gồm hướng dẫn trên trang web để tải tập lệnh, bạn có thể bắt đầu sử dụng ngay lập tức giao diện phần mềm(API), sử dụng các phần tử để tương tác với chính tài liệu đó hoặc để thu được phần tử kế thừa của tài liệu này, tức là. các yếu tố khác nhau trên trang. Lập trình DOM của bạn có thể đơn giản như in một tin nhắn bằng cách sử dụng hàm đối tượng hoặc sử dụng nhiều hơn phương pháp phức tạp Các DOM tạo nội dung mới, như trong ví dụ sau:

Ví dụ sau có mã JavaScript được xác định bên trong một phần tử, mã nàyđặt chức năng khi tài liệu được tải (khi toàn bộ DOM có sẵn để sử dụng). Chức năng này tạo ra phần tử mới H1, thêm văn bản vào phần tử đã cho và sau đó thêm H1 vào cây tài liệu:

< html > < head > < script >// khởi chạy chức năng này khi tải một cửa sổ tài liệu. onload = function () ( // tạo nhiều phần tử // trong một trang HTML trống tiêu đề = document. createElement( "h1" ) ; tiêu đề_text = document. createTextNode( "Big Head!" ) ; tiêu đề.appendChild( tiêu đề_text ) ; document . body.appendChild(tiêu đề) ; )< body >Các kiểu dữ liệu quan trọng

Phần này nhằm mục đích mô tả ngắn gọn các loại và đối tượng khác nhau một cách đơn giản và dễ tiếp cận. Có một số loại dữ liệu khác nhau được sử dụng trong API mà bạn nên chú ý. Để đơn giản, cú pháp ví dụ trong phần này thường đề cập đến các nút là phần tử s, mảng nút là nodeList s (hoặc đơn giản là phần tử s) và thuộc tính nút là thuộc tính đơn giản s.

Dưới đây là một bảng với mô tả ngắn gọn những kiểu dữ liệu này.

tài liệu	Khi một thành viên trả về một đối tượng thuộc loại tài liệu (ví dụ: thuộc tính ownerDocument của phần tử trả về tài liệu mà nó tham chiếu đến), đối tượng tài liệu đó là đối tượng gốc của chính nó. Phần Tham khảo tài liệu DOM mô tả đối tượng tài liệu. yếu tố
yếu tố	biểu thị một phần tử hoặc nút thuộc loại phần tử được trả về bởi thành viên của API DOM. Thay vì nói rằng phương thức document.createElement() trả về một tham chiếu đến một nút, chúng ta sẽ chỉ nói rằng phần tử này trả về một phần tử được tạo đơn giản trong DOM. Các đối tượng phần tử triển khai giao diện phần tử DOM và cả giao diện Node tổng quát hơn. Cả hai giao diện đều được bao gồm trong trợ giúp này. danh sách nút
Danh sách nút	một mảng các phần tử, giống như phần tử được trả về bởi phương thức Document.getElementsByTagName(). Các phần tử cụ thể trong một mảng được truy cập theo chỉ mục theo hai cách: danh sách.item(1) Những phương pháp này là tương đương. Trong phương thức đầu tiên item() - phương pháp duy nhấtĐối tượng NodeList. Cái sau sử dụng cú pháp mảng bình thường để lấy giá trị thứ hai trong danh sách.
thuộc tính	Khi thuộc tính được thành viên API trả về (ví dụ: phương thức createAttribution()), nó sẽ tham chiếu đến một đối tượng cung cấp giao diện đặc biệt (dù nhỏ) cho các thuộc tính. Thuộc tính là các nút trong DOM, giống như các phần tử, mặc dù bạn hiếm khi sử dụng chúng theo cách đó.
tênNodeMap	nameNodeMap tương tự như một mảng nhưng các phần tử được truy cập theo tên hoặc chỉ mục. Truy cập theo chỉ mục chỉ nhằm mục đích thuận tiện cho việc liệt kê, bởi vì Các phần tử không có thứ tự cụ thể trong danh sách. Kiểu dữ liệu này có phương thức item() cho mục đích này và bạn cũng có thể thêm và xóa các mục khỏi có tênNodeMap

Giao diện DOM

Hướng dẫn này nói về các đối tượng và những điều thực tế, mà bạn có thể sử dụng để thao tác với hệ thống phân cấp DOM. Có nhiều nơi mà việc hiểu cách thức hoạt động của nó có thể gây ngạc nhiên. Ví dụ: một đối tượng đại diện cho một thành phần biểu mẫu HTML lấy thuộc tính tên của nó từ giao diện HTMLFormElement và thuộc tính className của nó từ giao diện HTMLElement. Trong cả hai trường hợp, thuộc tính bạn muốn đều ở dạng đối tượng đó.

Ngoài ra, mối quan hệ giữa các đối tượng và giao diện mà chúng triển khai trong DOM có thể gây ngạc nhiên và phần này cố gắng trình bày một chút về các giao diện hiện có trong DOM và cách truy cập chúng.

Giao diện và đối tượng

Nhiều đối tượng thực hiện hành động từ nhiều giao diện. Ví dụ, đối tượng bảng triển khai một đối tượng đặc biệt bao gồm các phương thức như createCaption và InsertRow. Nhưng vì đây là một bảng nên nó cũng là một phần tử HTML nên bảng triển khai giao diện Phần tử, được mô tả trong phần này. Cuối cùng, vì phần tử HTML (theo nghĩa DOM) là một nút trong cây tạo nên mô hình đối tượng cho trang HTML hoặc XML, nên phần tử bảng cũng triển khai giao diện Node tổng quát hơn mà Element bắt nguồn từ đó.

Bảng Var = document.getElementById("bảng"); var tableAttrs = table.attributes; // Giao diện nút/phần tử cho (var i = 0; i< tableAttrs.length; i++) { // HTMLTableElement interface: border attribute if(tableAttrs[i].nodeName.toLowerCase() == "border") table.border = "1"; } // HTMLTableElement interface: summary attribute table.summary = "note: increased border";

Giao diện cốt lõi trong DOM

Phần này liệt kê một số giao diện phổ biến nhất trong DOM. Ý tưởng không phải là mô tả chức năng của các phương thức API này mà là để cung cấp cho bạn một số suy nghĩ về các loại phương thức và thuộc tính mà bạn thường thấy khi sử dụng DOM. Những phần chung này của API được sử dụng trong hầu hết các ví dụ ở phần cuối của trợ giúp này.

Document, window là những đối tượng có giao diện mà bạn rất hay sử dụng trong lập trình DOM. Nói một cách đơn giản, đối tượng window đại diện cho một cái gì đó giống như một trình duyệt và đối tượng document đại diện cho chính phần gốc của tài liệu. Phần tử kế thừa từ giao diện chung Nút và các giao diện này cùng nhau cung cấp nhiều phương thức và thuộc tính có thể được áp dụng cho các phần tử riêng lẻ. Những mặt hàng này cũng có thể có giao diện riêng biệtđể làm việc với các kiểu dữ liệu mà các phần tử này chứa, như trong ví dụ với đối tượng bảng trong trường hợp trước.

Dưới là danh sách ngắn Các thành viên API phổ biến được sử dụng trong lập trình trang web và trang XML bằng DOM:

• parentNode. nối thêmCon(nút)

Kiểm tra API DOM

Tài liệu này chứa các ví dụ cho từng giao diện mà bạn có thể sử dụng trong quá trình phát triển của mình. Trong một số trường hợp, các ví dụ là các trang web chính thức có quyền truy cập vào DOM trong phần tử, đồng thời liệt kê các phần tử cần thiết để chạy tập lệnh trên biểu mẫu và các phần tử HTML mà các thao tác DOM sẽ được thực hiện trên đó. Khi điều này xảy ra, bạn chỉ cần sao chép và dán ví dụ vào tài liệu HTML mới, lưu và chạy trong trình duyệt của mình.

Tuy nhiên, có những trường hợp các ví dụ ngắn gọn hơn. Để chạy các ví dụ chỉ minh họa những điều cơ bản về cách giao diện tương tác với các phần tử HTML, bạn có thể chuẩn bị một trang thử nghiệm trong đó bạn sẽ đặt các hàm bên trong các tập lệnh. Trang web rất đơn giản sau đây chứa phần tử tiêu đề nơi bạn có thể đặt các hàm để kiểm tra giao diện. Trang này chứa một số thành phần với các thuộc tính có thể được trả về, đặt hoặc nói cách khác là thao tác và chứa giao diện người dùng cần thiết để gọi chức năng cần thiết từ trình duyệt.

Bạn có thể sử dụng trang thử nghiệm này hoặc một trang tương tự để kiểm tra các giao diện DOM mà bạn quan tâm và xem cách chúng hoạt động trong trình duyệt. Bạn có thể cập nhật nội dung của hàm test() nếu cần, tạo nhiều nút hơn hoặc thêm các phần tử khi cần thiết.

< html > < head > < title >Kiểm tra DOM< script type = " application/javascript" >hàm setBodyAttr (attr, value) ( ​​​ if (document. body) eval ("document.body." + attr+ "="" + value+ """ ) ; else notSupported () ; )< body > < div style =" margin : .5 in; height : 400 ; " > < p > < b > < tt >chữ< form > < select onChange = " setBodyAttr(" text" , this.options.value);" > < option value = "đen" >đen< option value = "xanh đậm" >xanh đậm< p > < b > < tt >bgMàu sắc< select onChange = " setBodyAttr(" bgColor" , this.options.value);" > < option value = "trắng" >trắng< option value = "màu xám nhạt" >xám< p > < b > < tt >liên kết< select onChange = " setBodyAttr(" link" , this.options.value);" > < option value = "màu xanh da trời" >màu xanh da trời< option value = "màu xanh lá" >màu xanh lá< small > < a href = " http://www.brownhen.com/dom_api_top.html" id = " sample" >(liên kết mẫu)< br > < form > < input type = " button" value = "phiên bản" onclick = " ver()" />

Để kiểm tra nhiều giao diện trên một trang, một tập hợp thuộc tính thay đổi màu sắc của trang web, bạn có thể tạo một trang web tương tự với toàn bộ “bảng điều khiển” gồm các nút, trường văn bản và các thành phần khác. Ảnh chụp màn hình sau đây cho biết cách các giao diện có thể được nhóm lại với nhau để thử nghiệm

Trong ví dụ này, menu thả xuống cập nhật động các phần của trang web có thể truy cập được từ DOM (ví dụ: màu nền, màu liên kết và màu văn bản). Tuy nhiên, khi phát triển các trang thử nghiệm, thử nghiệm giao diện, khi bạn đọc về nó, một phần quan trọng học cách làm việc hiệu quả với DOM.