[Powered by Google Translate] [DOM]
[Tommy MacWilliams] [Đại học Harvard]
[Đây là CS50.] [CS50.TV]
Trong video này, chúng ta sẽ có một cái nhìn tại DOM.
Khi một trình duyệt tải một trang web, nó cần phải được thể hiện trong bộ nhớ bằng cách nào đó.
Mô hình đối tượng tài liệu, hoặc DOM,
mô tả cách thức trình duyệt đại diện cho một trang web trong bộ nhớ.
Trong video này, chúng ta sẽ có một cái nhìn tại DOM trong bối cảnh JavaScript,
nhưng DOM là một khái niệm ngôn ngữ độc lập.
Ví dụ, PHP có thực hiện DOM riêng của mình là tốt.
Tuy nhiên, DOM được thường xuyên sử dụng bằng JavaScript
từ JavaScript cho phép chúng ta thay đổi nội dung của một trang web trên bay,
và DOM cho phép chúng ta truy cập vào các phần của một trang web.
Chúng ta hãy nhìn vào một trang web ví dụ.
Được rồi, bây giờ chúng ta hãy xem làm thế nào trang này sẽ được đại diện trong DOM.
Và mỗi cây cần phải có một nút gốc ở đầu trang.
Đối với tài liệu này, các phần tử HTML là nút gốc
bởi vì đó là yếu tố đầu tiên xuất hiện.
Chúng ta hãy thêm một nút gốc để cây của chúng tôi.
Chúng ta hãy xem xét các tài liệu HTML một lần nữa.
Nhận thấy rằng các từ khóa cơ thể được lồng vào bên trong của thẻ HTML.
Điều này có nghĩa rằng các yếu tố cơ thể là một con của phần tử HTML.
Chúng tôi có thể đại diện này trong cây DOM của chúng tôi bằng cách làm cho cơ thể một lá
giảm dần từ HTML.
Chúng ta hãy làm điều đó.
Chúng tôi có cơ thể dưới dạng HTML.
Bây giờ chúng ta có thể nhìn thấy cơ thể có 2 con riêng của mình,
các yếu tố h1 và các yếu tố ul.
Điều này có nghĩa rằng chúng ta có thể kết nối cả hai trong những yếu tố
đến các yếu tố cơ thể, vì vậy hãy làm điều đó.
Chúng tôi có một h1 và một ul.
Cuối cùng, các yếu tố ul có 3 con hơn,
và điều này sẽ hoàn thành cây DOM của chúng tôi, vì vậy chúng ta hãy thêm li, li, li.
Điều này hoàn thành cây DOM của chúng tôi, và đây là cách trình duyệt được lưu trữ trang web của bạn.
Bây giờ chúng ta hãy xem làm thế nào chúng ta có thể đi qua cây này sử dụng JavaScript.
Chúng ta có thể truy cập vào cây này sử dụng một biến JavaScript đặc biệt gọi là tài liệu.
Một tài sản của đối tượng tài liệu này
là tài sản cơ thể, và đối tượng này đại diện cho
các yếu tố cơ thể trong trang web ví dụ của chúng tôi.
Nếu chúng ta muốn có được tất cả các con của phần tử cơ thể,
mà nếu bạn ghi nhớ là thẻ h1 và thẻ ul,
chúng ta có thể nói document.body.childNodes.
Và điều này sẽ cung cấp cho chúng ta trở lại một mảng có chứa cả hai thành phần h1
và các yếu tố ul vì chúng ta đều là con trực tiếp của cơ thể.
Nếu chúng ta muốn tạo ra một biến đại diện cho yếu tố ul
chúng ta có thể nói vrr ul = sau đó mã này lên đây,
và bây giờ bởi vì childNodes chỉ đơn giản là một mảng
chúng ta có thể chỉ vào nó với [1] để có được những yếu tố thứ hai của mảng đó.
Với đối tượng này ul mới, chúng tôi có thể truy cập tài sản khác nhau của các yếu tố như ID của nó.
Nếu chúng ta nói ul.id rằng sẽ là tương đương với danh sách chuỗi
bởi vì đó là những gì chúng tôi có trong trang HTML của chúng tôi.
Chúng tôi cũng có thể nhận được tagName của nó, mà trong trường hợp này là có được
loại yếu tố đó là, trong trường hợp này, ul.
Chúng tôi cũng có thể nhận được mẹ của nó hoặc các nút trên nó, mà trong trường hợp này
là có được các yếu tố cơ thể.
Nếu chúng ta nói. ParentNode, đó là sẽ được giống như document.body.
Tất nhiên, ul này có con của riêng mình,
vì vậy chúng tôi vẫn có thể nói. childNodes vào yếu tố này,
và mảng này bây giờ sẽ có chiều dài 3 vì có 3 mục trong danh sách của chúng tôi.
Cuối cùng, có lẽ là tài sản hữu ích nhất là có được. InnerHTML,
và điều này sẽ là nội dung thực tế của danh sách, mà trong trang ví dụ của chúng tôi
là những 3 thẻ li.
Tất nhiên, nếu chúng ta có một tài liệu lớn, truy cập vào các yếu tố
theo cách này là có được thực sự cồng kềnh vì
cuối cùng chúng tôi sẽ phải nói những điều như document.body.childNodes
khung một cái gì đó. childNodes khung cái gì khác,
và nó sẽ nhận được sự rườm rà.
Thay vì những gì chúng tôi thực sự muốn làm là có thể truy vấn các tài liệu,
vì vậy chỉ cần giống như chúng ta tìm kiếm những thứ trên Internet sử dụng từ khoá
chúng tôi thực sự cần một số cách để tìm kiếm tài liệu này một cách ngắn gọn
trở lại chỉ là yếu tố chúng tôi quan tâm mà không cần đi qua
toàn bộ trên cây xuống dưới.
May mắn thay, các trình duyệt hiện đại cho phép chúng ta làm điều này
với một chức năng đặc biệt gọi là querySelectorAll,
và chức năng này có một đối số duy nhất
đó là một chọn CSS, và nó sẽ trả lại cho chúng tôi
tất cả các yếu tố phù hợp mà chọn.
Có nghĩa là bạn không cần phải học một cú pháp hoàn toàn mới cho các truy vấn DOM.
Thay vào đó bạn có thể áp dụng những kiến ​​thức bạn đã biết
về lựa chọn CSS.
Chúng ta hãy xem xét một số ví dụ về truy vấn tài liệu.
Nếu chúng ta nói querySelectorAll và vượt qua nó chuỗi này # foo
đó là sẽ cung cấp cho chúng ta trở lại các phần tử với ID foo.
Bạn cũng có thể nói document.getElementById
và vượt qua nó chuỗi foo không hashtag đó.
Bạn sẽ lấy lại đối tượng chính xác.
Nếu thay vào đó chúng tôi vượt qua thanh để document.querySelectorAll chuỗi.
chúng ta sẽ lấy lại tất cả các yếu tố với thanh lớp.
Chúng tôi cũng có thể kết hợp lựa chọn CSS.
Nếu chúng ta vượt qua trong chuỗi # foo img
đó là sẽ cung cấp cho chúng ta trở lại tất cả các yếu tố hình ảnh
đó là con của phần tử với ID foo.
Như bạn có thể nhìn thấy, bởi bộ chọn kết hợp chúng tôi có một số khả năng tìm kiếm thật sự mạnh mẽ.
Nhưng dưới mui xe, DOM thực sự chỉ là một cây,
và những bộ chọn cho phép chúng ta trừu tượng đi một mức độ nào
bởi vì chúng ta không luôn luôn quan tâm đến toàn bộ cấu trúc của cây DOM.
Đó là một cái nhìn tổng quan nhanh chóng của các DOM, và cảm ơn cho chúng tôi tham gia.
[CS50.TV]