DOUG LLOYD: Trong video này, chúng tôi muốn để gọi sự chú ý riêng để một rất đặc biệt yếu tố của JavaScript mà bạn có thể thấy có ích khi bạn đang bắt đầu để làm việc trên các trang web và thao tác thay đổi nội dung của trang web của bạn trên bay. Và đó là khái niệm về Document Object Model. Vì vậy, như chúng ta đã thấy trong video của chúng tôi trên JavaScript, đối tượng là rất linh hoạt. Và chúng có thể chứa các lĩnh vực khác nhau. Và mặc dù chúng tôi đã không đi vào rất nhiều Cụ thể, các lĩnh vực hoặc tài sản, thì chúng ta sẽ có thể nhiều hơn thích hợp gọi cho họ trong bối cảnh của một đối tượng, thậm chí những tài sản có thể được các đối tượng khác. Và bên trong của những đối tượng có thể có các đối tượng khác. 

Bạn có đối tượng này rất lớn với rất nhiều đối tượng khác bên trong của nó, trong đó loại tạo ra ý tưởng này của một cái cây lớn. Bây giờ, các đối tượng tài liệu là một đối tượng rất đặc biệt trong JavaScript mà tổ chức toàn bộ trang web của bạn trang dưới này sắp xếp của ô của một đối tượng. Và như vậy bên trong của tài liệu đối tượng là các đối tượng trình bày đầu và cơ thể của trang web của bạn. 

Bên trong đó là những khác đối tượng, vân vân, vân vân, cho đến khi trang web của bạn có toàn bộ được tổ chức trong đối tượng lớn này. Lộn ngược ở đây là gì, phải không? Vâng, chúng tôi biết làm thế nào để làm việc với các đối tượng trong JavaScript. 

Vì vậy, nếu chúng ta có một đối tượng đề cập đến trang web của chúng tôi toàn bộ, mà có nghĩa là bằng cách gọi chính xác phương pháp để thao tác đối tượng hoặc sửa đổi nhất định các thuộc tính của nó, chúng tôi có thể thay đổi các yếu tố của Trang của chúng tôi lập trình sử dụng JavaScript thay vì có mã điều với, nói, HTML. Vì vậy, đây là một ví dụ của một rất đơn giản trang web, phải không? Đó là nhận thẻ HTML, một cái đầu. 

Bên trong có một tiêu đề, xin chào thế giới. Sau đó, tôi có một cơ thể. Bên trong đó, tôi có ba điều khác nhau. Tôi có một tag tiêu đề h2, một đoạn, và một liên kết. Đây là một trang web rất đơn giản. 

Vâng, những gì có thể các tài liệu đối tượng cho cái nhìn này như thế nào? Vâng, đó là một chút đáng sợ có lẽ lần đầu tiên. Nhưng nó thực sự chỉ là một cái cây lớn. Và tại gốc rễ của nó là tài liệu. 

Bên trong của tài liệu là khác đối tượng đề cập tới HTML của trang web của tôi. Và mã HTML của trang web của tôi là tất cả những điều này. Và sau đó bên trong của HTML đối tượng, tôi có một đối tượng đầu, trong đó đề cập đến tất cả mọi thứ ở đó. 

Và bên trong đó, Tôi có một đối tượng tên. Và bên trong đó, tôi có một đối tượng đó chỉ là hello world. Tôi có thể có cơ thể của tôi đại diện như thế này. 

Bên trong cơ thể của tôi, tôi có một h2 đối tượng và một đối tượng p cho đoạn và một đối tượng cho một liên kết. Và do đó, toàn bộ hệ thống phân cấp này có thể được biểu diễn như một cái cây lớn với rất nhiều nhỏ hơn chút thứ ra khỏi nó. Bây giờ, tất nhiên, khi chúng tôi đang lập trình, chúng tôi không nghĩ về những điều giống như một cái cây lớn. Chúng tôi muốn nhìn thấy thực tế Mã những thứ liên quan. 

Và may mắn thay, chúng ta có thể sử dụng các công cụ phát triển của chúng tôi để thực sự có một cái nhìn tại của trang web này tài liệu đối tượng. Và chúng ta hãy làm điều đó. Vì vậy, tôi đã mở ra một tab trình duyệt. 

Và tôi đã mở ra công cụ phát triển. Và trong video của tôi trên JavaScript, tôi nói rằng giao diện điều khiển không phải là chỉ nơi nào đó ở đâu chúng tôi in thông tin, nó cũng là một nơi chúng ta có thể thông tin đầu vào. Trong bối cảnh này, những gì Tôi sẽ nói là Tôi muốn để có được trở lại các đối tượng tài liệu, vì vậy tôi có thể bắt đầu để có một cái nhìn vào nó. Vì vậy, làm thế nào tôi có thể làm điều này? Vâng, nếu tôi muốn tổ chức nó thực sự độc đáo, Tôi sẽ nói console.dir, D-I-R. Bây giờ, tôi sử dụng console.log để chỉ in một cái gì đó rất đơn giản. Nhưng nếu tôi muốn tổ chức này theo thứ bậc như một đối tượng, Tôi muốn nó loại cấu trúc giống như một cấu trúc thư mục. 

Vì vậy, tôi muốn console.dir tài liệu. Tôi sẽ nhấn Enter. Và ngay bên dưới nó bây giờ, và tôi sẽ phóng to ở đây, Tôi đã có tài liệu đáp ứng này với một ít mũi tên bên cạnh nó. Bây giờ, khi tôi mở mũi tên này, có đi được rất nhiều thứ. 

Nhưng chúng ta sẽ bỏ qua rất nhiều của nó và chỉ cần loại tập trung trên một phần quan trọng nhất, vì vậy chúng tôi có thể bắt đầu để di chuyển tài liệu này. Có rất nhiều chi tiết để các DOM hơn chỉ các nút và các nút con của phụ huynh. Có rất nhiều các công cụ phụ trợ. 

Vì vậy, tôi sẽ mở này lên. Và có một toàn bộ rất nhiều thứ mà bật lên. Nhưng tất cả tôi quan tâm là ngay tại đây, các nút con. Chúng ta hãy mở mà lên. 

Bên trong đó tôi thấy một cái gì đó quen thuộc, HTML. Vì vậy, bên trong tài liệu của chúng tôi một cấp, HTML. Tôi mở mà lên. Chúng ta mong đợi những gì? 

Nếu bạn nhớ lại từ sơ đồ của chúng tôi, những gì chúng ta nên tìm bên trong HTML? Những gì hai nút dưới nó trong cây? Hãy cùng tìm hiểu. Chúng tôi mở ra HTML. Chúng tôi đi xuống nút con của nó. 

Bật mở. Có đầu và thân. Và chúng ta có thể mở đầu. Đến nút con của nó. Vâng, có tiêu đề. 

Và chúng tôi có thể đi và trên như thế này mãi mãi. Chúng ta có thể làm điều này với cơ thể là tốt. Nhưng có một cách để chúng ta nhìn vào các tài liệu được tổ chức như là một đối tượng lớn. Và nếu chúng ta nhìn vào là một lớn đối tượng đó trông rất như mã, điều đó có nghĩa rằng chúng ta có thể bắt đầu để thao tác đối tượng lớn này bằng cách sử dụng mã để thay đổi những gì chúng tôi trang web trông và cảm thấy như thế nào. 

Vì vậy, đó là một công cụ khá mạnh mẽ chúng tôi có lúc xử lý của chúng tôi bây giờ. Vì vậy, như chúng ta vừa thấy, các tài liệu đối tượng chính nó và tất cả các đối tượng bên trong của nó có đặc tính và phương pháp, chỉ giống như bất kỳ đối tượng khác mà chúng tôi đã được làm việc với trong JavaScript. Nhưng chúng ta có thể sử dụng những tài sản và sử dụng các phương pháp để loại sâu từ các tài liệu lớn và nhận được thấp hơn và thấp hơn và thấp hơn, tốt hơn và tốt hơn các loại ngũ cốc chi tiết, cho đến khi chúng tôi có được một mảnh rất cụ thể của chúng tôi trang web mà chúng tôi muốn thay đổi. 

Và khi chúng tôi cập nhật thuộc tính của Tài liệu Object hoặc gọi những phương pháp, điều có thể xảy ra trên trang web của chúng tôi. Và chúng ta không cần phải làm bất kỳ làm mới để có những thay đổi có hiệu lực. 

Và đó là một khả năng khá mát mẻ để có khi chúng tôi đang làm việc với mã. Vì vậy, một số các thuộc tính là gì đó là một phần của một đối tượng tài liệu? Vâng, bạn có thể nhìn thấy một vài trong số họ thực sự nhanh chóng như chúng tôi đã nén qua tài liệu khổng lồ đối tượng, ta chỉ thấy trong các trình duyệt web. 

Tuy nhiên, một vài trong số này thuộc tính có thể là những thứ như HTML bên trong. Và thậm chí bạn có thể gọi lại cho tôi sử dụng điều này trong đoạn video JavaScript ở cuối khi tôi đang nói về các sự kiện. HTML bên trong này là gì? Vâng, nó chỉ là những gì ở giữa các thẻ. 

Và do đó, HTML bên trong, Ví dụ, các tiêu đề tag, nếu chúng ta đã tiếp tục đi trong rằng ví dụ lúc trước, sẽ là hello world. Đó là tiêu đề của trang của chúng tôi. Các tài sản khác bao gồm tên nút, mà là tên của một file HTML yếu tố như tiêu đề. ID, đó là ID thuộc tính của một phần tử HTML. 

Nhớ lại rằng chúng tôi đặc biệt có thể chỉ ra các yếu tố cụ thể của HTML của chúng tôi với một thuộc tính ID, mà thường có ích trong bối cảnh của CSS, đặc biệt. Nút cha, đó là một tham chiếu đến những gì chỉ lên trên tôi trong DOM. Và các nút con, mà là một tham chiếu đến những gì xuống bên dưới tôi. Và chúng tôi đã thấy rất nhiều mà chỉ cần nhìn qua. Nút con, đó là cách chúng tôi đã nhận thấp hơn và thấp hơn vào cây. 

Các thuộc tính, đó chỉ là một mảng các thuộc tính của phần tử HTML. Vì vậy, một ví dụ về thuộc tính might được nếu bạn có một thẻ hình ảnh, nó thường có một thuộc tính nguồn, có thể là một chiều cao và một thuộc tính chiều rộng. Và do đó sẽ chỉ là một mảng của tất cả các thuộc tính liên quan với phần tử HTML. 

Phong cách là một số khác mà đại diện cho sự CSS kiểu dáng của một yếu tố cụ thể. Và sau này trong này video, chúng tôi sẽ đặc biệt kiểu đòn bẩy để làm cho một cặp vợ chồng các thay đổi trang web của chúng tôi. Vì vậy, những người đang có một số tài sản. 

Và cũng có một số là phương pháp mà chúng ta có thể sử dụng để nhanh chóng hơn cũng có thể cô lập các yếu tố của Document Object. Có lẽ, sự linh hoạt nhất số này theo getElementById. Vì vậy, tôi có thể nói điều gì đó như thế, bởi vì nhớ đó là một phương pháp của các tài liệu Object, document.getElementById. 

Và bên trong những dấu ngoặc đơn, chỉ định một phần tử HTML với một ID riêng thuộc tính mà tôi đã từng thiết lập, và tôi sẽ ngay lập tức đi đúng cho phần tử đó của các trang web tổng thể. Vì vậy, tôi không có để có thể khoan xuống qua mỗi lớp duy nhất. Tôi chỉ có thể sử dụng phương pháp này để tìm thấy nó, loại giống như một tên lửa tìm kiếm nhiệt, bên phải? Nó chỉ đi và tìm thấy chính xác những gì nó đang tìm kiếm. 

GetElementsByTagName là rất giống nhau trong tinh thần. Có lẽ điều này sẽ tìm thấy tất cả các thẻ đậm hoặc tất cả các thẻ p và đưa cho tôi một mảng của tất cả mọi thứ mà tôi sau đó có thể làm việc với. appendChild thêm một cái gì đó một cấp xuống trong cây. 

Vì vậy, tôi có thể thêm toàn bộ mới yếu tố một mức độ thấp hơn. Hoặc tôi có thể loại bỏ một yếu tố đó là một cấp thấp hơn cũng như nếu tôi muốn để xóa một cái gì đó từ trang web của tôi. Bây giờ, một lưu ý mã hóa nhanh chóng và nhanh chóng đau đầu tiết kiệm lưu ý, hy vọng. 

getElementById-- các d là chữ thường. Tôi không thể nói cho bạn biết bao nhiêu lần tôi phải sử dụng getElementById và hoa các d có. Bởi vì nó thực sự phổ biến. Nếu chúng ta viết các ID từ, đó là thường vốn tôi vốn D. Và mã của tôi chỉ không làm việc. Và tôi không thể tìm ra lý do tại sao. Đây là một thực sự, thực sự, thực sự lỗi phổ biến mà mọi người làm, thậm chí các chuyên gia có đã làm điều này mãi mãi. Vì vậy, chỉ cần lưu ý, getElementById, d đó là chữ thường. Và hy vọng, giúp bạn tiết kiệm nhiều phút ít nhất đau lòng. 

Vậy tất cả những điều này cho chúng ta biết? Chúng tôi có những phương pháp này. Chúng tôi có các đặc tính này. Bây giờ, nếu chúng ta bắt đầu từ tài liệu, tài liệu. bất cứ điều gì, chúng ta bây giờ có thể có được để bất kỳ mảnh duy nhất của trang web của chúng tôi mà chúng tôi muốn sử dụng JavaScript chỉ bằng cách gọi các phương pháp và tận dụng các thuộc tính mà chúng tôi tìm thấy tại các địa điểm khác nhau. 

Điều này có thể dài dòng, điều này document.getElementById, có thể có một tên tag dài, có thể bạn làm thêm các cuộc gọi sau này. Những điều có thể có được một chút dài dòng. Và như lập trình, như bạn đã có thể nhìn thấy trong rất nhiều các video, chúng tôi không thích những thứ dài dòng. 

Chúng tôi muốn để có thể làm mọi thứ một cách nhanh chóng. Vì vậy, chúng tôi muốn một nhiều hơn cách ngắn gọn để nói điều gì đó. Vì vậy, loại này dẫn đến khái niệm về một cái gì đó gọi là jQuery. Bây giờ jQuery không phải là JavaScript. Đó không phải là một phần của JavaScript. 

Nó là một thư viện mà đã được viết bởi một số lập trình JavaScript khoảng 10 năm trước đây. Và mục tiêu của nó là để đơn giản hóa này có gì gọi là kịch bản phía máy khách, về cơ bản là những gì chúng tôi đã chỉ nói về với thao tác DOM. Và vì vậy nếu tôi muốn thay đổi màu nền của trang web của tôi, có lẽ một Div cụ thể. 

Ở đây, tôi dường như nhận được ElementById colorDiv. Và tôi muốn thiết lập màu nền của nó. Nếu tôi chỉ sử dụng JavaScript tinh khiết sử dụng Document Object Model, đó là rất nhiều thứ, phải không? document.getElementById colorDiv.style.backgroundColor = màu xanh lá cây. 

Whew. Đó là rất nhiều để nói. Đó là rất nhiều để gõ, quá. Và như vậy trong jQuery, chúng ta có thể có thể nói này một chút chính xác hơn. Các thương mại giảm là nó có thể là một chút chút khó hiểu hơn tất cả của một đột ngột, bên phải? 

Ít nhất là dài hơn một chút giải thích như những gì chúng tôi đang làm. Ký hiệu đô la này, dấu ngoặc đơn, báo duy nhất, băm, colorDiv, phải không? Điều đó có nghĩa là gì? Vâng, đó là về cơ bản chỉ document.getElementById colorDiv. 

Nhưng đó là loại này viết tắt cách làm việc đó bằng cách sử dụng jQuery. Hãy chỉ có một cái nhìn doanh nghiệp ở một vài cách khác nhau mà tôi có thể thực sự sử dụng Document Object này Mô hình để thao tác phần của trang web của tôi. Đặc biệt, chúng ta đang đi được làm việc trên thao tác màu sắc của một cụ thể Div, colorDiv, trên một trang web. Vì vậy, chúng ta hãy nhìn vào đó. Được rồi. Vì vậy, tôi đang trên một trang. Nó được gọi là test.html khi bạn tải về này nếu bạn muốn chắp vá với điều này. Và tôi đã có một bó của nút trên trang này. Và tôi nói chức năng cá nhân cho màu nền, màu tím, màu xanh lá cây, cam, đỏ, xanh, một chức năng duy nhất cho màu nền, xử lý sự kiện cho màu nền, và sử dụng jQuery. Tôi đang nói về cái gì khi tôi đang làm điều này? Vì vậy, chúng tôi đã nhìn thấy các nút. Bây giờ, chúng ta hãy nhìn vào một số các mã nguồn ở đây. Chúng tôi sẽ bắt đầu với test.html. Vì vậy, các chức năng cá nhân cho nền màu sắc là những gì tôi đã nhập ở đây. Hãy để tôi di chuyển một chút. 

Và bạn sẽ nhận thấy tôi rằng đã xác định các nút để nói khi nút này được nhấn vào, gọi hàm tím. Khi nút này được nhấn, thay, gọi hàm chuyển sang màu xanh, chuyển sang màu cam, màu đỏ, chuyển sang màu xanh. Bạn có thể đoán rằng đây có lẽ không phải là thiết kế tốt nhất ý nghĩa, phải không? 

Nó sẽ được tốt đẹp nếu tôi có thể có một cách tiếp cận tổng quát hơn. Vâng, đầu tiên chúng ta sẽ có một cái nhìn vào những gì những năm chức năng là document.getElementById colorDiv.style.background = tím, màu xanh lá cây, cam, đỏ, và màu xanh, tương ứng. Vì vậy, không đặc biệt thiết kế tốt nhất. 

Các tập tiếp theo của nút Tôi đã được tôi đã viết một chức năng duy nhất được gọi là thay đổi màu sắc mà dường chấp nhận một chuỗi như là đối số của nó. Vì vậy, đây là một chút tốt hơn. Tím, xanh lá cây, cam, đỏ, màu xanh bây giờ là một đối số. Vì vậy, tôi đã viết một tổng quát hơn Trường hợp chức năng Javascript, mà có thể giống như thế này. Tôi đang đi qua trong. Màu sắc thay đổi chức năng này mong đợi một đối số được gọi là màu sắc. Và tôi nói đặt màu nền cho màu sắc. Vì vậy, ở đây đại diện cho những gì tôi đã có ở đây. Vì vậy, đó là một chút tốt hơn. 

Nhưng tôi có thể có thể làm tốt hơn thế. Nếu chúng tôi đi xuống để có một cái nhìn vào tình hình xử lý sự kiện, bây giờ tất cả các cuộc gọi đều giống nhau. Nếu bạn gọi lại cho chúng tôi thảo luận về xử lý sự kiện, Tôi có thể nhận được thông tin về mà trong các nút này được nhấn và sử dụng đó. 

Và như vậy trong event.JavaScript, tôi đã bằng văn bản sự kiện thay đổi màu sắc, mà con số ra nút đó được nhấp. Đó là dòng đối tượng cò. Và sau đó ở đây, nó được thực sự dài dòng. Nhưng những gì tôi đang làm tôi là thiết lập nền màu để triggerObject inner.HTML. Đó là các văn bản trong giữa các thẻ nút. 

Và sau đó tôi dường như có để thiết lập nó thành chữ thường. Và đó là cách tôi có thể chuyển đổi toàn bộ một string thành chữ thường trong JavaScript sử dụng phương pháp mà thành chữ thường. Bởi vì khi tôi thiết lập một màu, như tôi đang cố gắng để làm ở đây, màu sắc có được tất cả các chữ thường. 

Nhưng các nút mà tôi đã có, nếu chúng ta có một cái nhìn khác, nhận thấy rằng các văn bản có bằng văn bản với một P vốn cho màu tím. Và sau đó ở rất dưới đây, tôi dường cố gắng và làm được điều này bằng cách sử dụng jQuery là tốt. Và trong trường hợp này, tôi không thực sự gọi một chức năng nào cả. Tôi vừa nói trong lớp mà tôi sử dụng cho nút này là một nút JQ. Đó là nó. 

Vì vậy, làm thế nào jQuery biết những gì tôi đang làm? Vâng, đây là một trong những lợi thế giảm nhược điểm của jQuery. Nó có thể cho phép tôi làm điều rất chính xác, nhưng có lẽ không là trực giác. Có lẽ những người ba khác làm cho một hơn chút cảm nhận những gì tôi đang làm. Ở đây, tuy nhiên, những gì đang xảy ra? 

Rõ ràng, sáng tạo một chức năng ẩn danh mà tải bất cứ khi nào tài liệu của tôi sẵn sàng, vì vậy document.ready, một số chức năng sẽ xảy ra. Về cơ bản, khi là một tài liệu đã sẵn sàng? Đó là khi trang của tôi đã được nạp. 

Vì vậy, ngay sau khi trang của tôi đã được nạp, chức năng sau đây luôn luôn sẵn sàng. Nó nói, nếu một đối tượng kiểu jQButton, hoặc nếu lớp jQButton đã được nhấn vào, thực hiện chức năng này. Vì vậy, đây là hai chức năng ẩn danh, một định nghĩa bên trong của người khác. 

Vì vậy, toàn bộ bối cảnh của tôi đây cho đến nay là trang của tôi khi nó tải nó gọi chức năng này. Và chức năng này được chờ đợi cho một nút được bấm. Và khi một nút được nhấn vào, JQ nút cụ thể chỉ được nhấp, nó gọi khác này chức năng, mà là có để thiết lập nền màu sắc của colorDiv được bất cứ văn bản là ở giữa các thẻ. 

Đây là khái niệm nút đó được nhấp. Nhưng mặt khác, đây là loại hành xử tương tự như một sự kiện. Nó chỉ giống như cách tôi sẽ thể hiện điều này trong jQuery. Một lần nữa, nó có thể là một rất nhiều đáng sợ hơn. Nó không phải là rõ ràng như một cái gì đó giống như event.js, đó là có thể nhiều hơn một chút dài dòng, nhưng ít hơn một chút đáng sợ. 

Nhưng nếu chúng ta bật lại qua trình duyệt của tôi cửa sổ, nếu tôi bắt đầu clicking-- tốt, làm thay đổi sang màu tím. Đây là màu xanh lá cây bằng cách sử dụng phương pháp chuỗi. Đây là cam sử dụng xử lý sự kiện. 

Đây là màu đỏ bằng cách sử dụng jQuery, phải không? Tất cả họ đều cư xử chính xác như nhau. Họ chỉ làm điều đó bằng cách sử dụng khác nhau phương pháp tiếp cận để giải quyết vấn đề. Có rất nhiều chi tiết để jQuery sau đó chúng tôi chắc chắn sẽ nói về trong video này. Nhưng nếu bạn muốn tìm hiểu thêm, bạn có thể đi đến jQuery loại tài liệu và tìm hiểu thêm một chút về thư viện rất linh hoạt này, mà là tuyệt vời để làm phía khách hàng kịch bản như những gì chúng tôi đã làm để thao tác xem và cảm nhận của trang web của chúng tôi với Document Object Model. Tôi Doug Lloyd. Đây là CS50.