道格·勞埃德：在這段視頻中，我們希望 召喚出不同的關注 一個非常特殊的 JavaScript的元素 你可能會發現得心應手 你開始的時候 工作在操縱網頁和 改變你的網頁的內容 上飛。 這就是概念 文檔對象模型。 所以當我們在視頻上看到 JavaScript中，對象是非常靈活的。 同樣也可以包含各種領域。 雖然我們沒去成很多 細節，這些字段或屬性， 那我們可能更多 適當地給他們打電話 在一個對象的情況下，甚至 這些屬性可以是其它的目的。 而這些對象的內部 可以是其它的目的。 

你有這非常大的對象 與很多其他對象 裡面的吧，這之類的 造成這種想法的一棵大樹。 現在，文檔對象是一個 在JavaScript中非常特殊的對象 ，組織您的整個網絡 在這種傘的頁面 的一個目的。 等內的文件的 對象是對象呈現 你的網頁的頭部和身體。 

這裡面的其他 對象，等等，等等， 直到你的整個網頁都有 被組織在這個大目標。 什麼是上攻這裡，對不對？ 好了，我們知道如何工作 在JavaScript對象。 

因此，如果我們有一個對象 指的是我們整個網頁，即 是指通過調用正確的 方法來操作對象 或修改某些 其特性，我們 可以改變的元件 我們的網頁編程 使用JavaScript，而不必 編寫東西，比如說HTML。 所以這裡有一個例子 很簡單的網頁，對不對？ 它有HTML標籤，一個頭。 

裡面有一個標題，你好世界。 然後，我有一具屍體。 裡面的，我有 三個不同的事情。 我有h2標題標籤， 一個段，和一個鏈接。 這是一個非常簡單的網頁。 

那麼，可能的文件 反對這個樣子？ 嗯，這是一個小 可怕的也許在第一。 但它實際上只是一棵大樹。 而在它的根源是文檔。 

內的文​​件是另一個 對象指的是我的網頁的HTML。 而我的網頁的HTML是這一切。 然後裡面的HTML 對象，我有一個頭的對象， 它指的是那裡的一切。 

而且還有裡面， 我有一個標題對象。 而且還有裡面，我有另一個 反對這只是世界你好。 我可以有我的身體 表示如下。 

在我的身體，我有一個H2 對象和第一個p對象 和鏈接的一個對象。 所以這整個層次 可以表示為一棵大樹 有很多小一點的 東西出來吧。 現在，當然時， 我們在編程時，我們 沒有想到的事情像一棵大樹。 我們希望看到實際的 代碼相關的東西。 

幸運的是，我們可以 使用我們的開發工具 實際看一看 此網站的文檔對象。 而且我們做到這一點。 所以，我已經打開了一個瀏覽器標籤。 

我已經打開了開發工具。 而在我的視頻上的JavaScript，我 提到的是，控制台是不 只有放在安全的位置 我們打印的信息， 它也是一個地方 我們可以輸入信息。 在這種情況下，什麼 我要說的是 我想找回 文檔對象， 這樣我就可以開始看看吧。 所以，我怎麼可以這樣做？ 好吧，如果我想 組織它真的很好， 我會說console.dir，D-1-R。 現在，我使用的console.log只是打印 出來的東西很簡單。 但是，如果我想組織這樣 分層像一個對象， 我想，它像是結構 像的目錄結構。 

所以我想console.dir文件。 我要敲回車。 而正下方，現在， 我會放大在這裡， 我有這個響應文件 與它旁邊的小箭頭。 現在，當我打開這個箭頭， 還有的將是一個很大的東西。 

但是，我們會忽略了很多 它和公正的一種重點 在最重要的一部分，所以我們 可以開始瀏覽這個文件。 還有很多更重要的DOM比 只是父節點和子節點。 有很多附屬的東西。 

所以，我要打開這個了。 還有一大堆 東西彈出。 但是，我所關心的是 在這裡，子節點。 讓我們打開了。 

裡面還有我看到 一些熟悉的東西，HTML。 因此，我們的文檔裡面 下一級別的HTML。 我打開了。 我們有什麼期待？ 

如果從圖中我們還記得， 我們應該怎樣HTML裡面找？ 哪兩個節點是在它下面的樹？ 讓我們來看看。 我們打開HTML。 我們去到其子節點。 

彈出打開。 有頭部和身體。 我們可以打開頭。 轉到其子節點。 嗯，有標題。 

而且我們可以繼續下去 就這樣永遠。 我們可以用身體做的這一點。 但是，有一種方法讓我們來看看 組織作為一個大對象的文檔。 如果我們看一下是個大 對象看起來很 像代碼，這意味著我們可以開始 通過操縱這個大目標 代碼改變了我們的 網站的外觀和感覺。 

所以這是一個非常強大的工具 我們有我們所掌握了。 所以，正如我們剛才看到的 文檔對象本身 和所有的其內的對象的 具有屬性和方法，只是 像我們已經其他對象 一直與在JavaScript中。 但是，我們可以利用這些特性， 使用這些方法排序的深入 從大的文檔，並得到 下限和低， 越來越細晶粒 細節，直到我們 得到一個非常特殊的一塊我們 我們要改變的網頁。 

而當我們更新的屬性 文檔對象或調用這些方法， 事情可能發生在我們的網頁上。 而且我們不需要做任何令人耳目一新 讓這些更改生效。 

這是一個很酷的能力， 當我們正在處理的代碼有。 那麼，什麼是其中一些屬性 這是一個文檔對象的一部分？ 好吧，你可能看到一個 他們夫婦真的很快 因為我們是荏苒 通過巨大的文件 對象，我們在Web瀏覽器中剛剛看到。 

但一對夫婦的這些屬性 可能會像內部HTML。 你甚至可能還記得我 在JavaScript中的視頻使用此 在最後的時候我 在談論事件。 什麼是這種內在的HTML？ 好吧，這只是什麼 在標記之間。 

等內部HTML， 例如，標題的 標籤，如果我們繼續前進的 這個例子剛才， 本來世界你好。 這是我們的頁面的標題。 其它性能 包括節點名，其中 是HTML的名稱 元素如標題。 ID，它是ID HTML元素的屬性。 

回想一下，我們可以專門指示 我們的HTML中的具體內容 有一個ID屬性，通常 就派上用場了在CSS的背景下， 特別。 父節點，這是一個參照 什麼是剛起來比我高的DOM。 和子節點，這是一個 參考什麼是下來我下面。 我們看到了很多的 只是翻翻。 子節點，這就是我們得到了 再降到樹。 

屬性，這只是一個數組 屬性的HTML元素。 所以屬性的例子可能 如果你有一個形象的標籤是， 它通常有一個源屬性， 也許一高度和寬度屬性。 所以這也只是一個數組 所有關聯的屬性的 與HTML元素。 

風格是另外一個， 確實代表了CSS 造型特定元素。 後來就在這 視頻中，我們會特別 槓桿式的，使一對夫婦 變化到我們的網站。 因此，這些都是一些屬性。 

而也有一些 方法我們就可以 使用也更迅速，也許隔離 文檔對象的元素。 也許，最通用的 這些是的getElementById的。 所以，我可能會這樣說，是因為 記住它的文檔的方法 對象的document.getElementById。 

而那些括號內，指定 通過特定的ID的HTML元素 屬性是我以前 定，我馬上 向右走該元素 整個網站。 所以，我沒有可能鑽 上下貫通的每一層。 我就可以用這個方法來找到它， 有點像熱尋的導彈， 對？ 它只是和發現 正是它的尋找。 

的getElementsByTagName是 非常相似的精神。 這也許會發現所有的 大膽標記或所有的p標籤 並給了我一切的數組 我可以再與工作。 的appendChild增加了一些 上一級樹上下來。 

所以，我可以添加一個全新的 元素一個水平。 或者，我可以刪除元素的 低一個級別，以及如果我想 要刪除我的網頁的東西。 現在，一個快速的編碼說明和快速 節能頭痛筆記，希望。 

getElementById--的d為小寫。 我不能告訴你我有多少次 使用的getElementById和資本化 對D那裡。 因為它真的很普遍。 如果我們寫的字ID，它是 通常我的資本資本D. 而我的代碼是行不通的。 我想不通為什麼。 這是真的，真的，真的 常見的錯誤，每個人都會， 即使是專家有 一直這樣做下去。 所以要知道，的getElementById， 使得d是小寫。 並希望，這可以節省數 至少心痛分鐘。 

那麼，是什麼這一切告訴我們什麼？ 我們有這些方法。 我們有這些屬性。 現在，如果我們從開始 文檔，文檔。 什麼，我們現在可以去任何 單件我們的網頁 我們要使用JavaScript 只是通過調用這些方法 並利用屬性 我們發現在各種位置。 

這可以得到羅嗦，這 的document.getElementById， 也許有很長的標籤名， 也許你以後做更多的電話。 事情可能會變得有點羅嗦。 而作為程序員，因為你已經 可能看到很多這樣的視頻， 我們不喜歡羅嗦的東西。 

我們希望能夠快速地做事情。 所以，我們想的更 簡潔的方式說些什麼。 所以這種動態到的 的一些概念叫jQuery的。 現在，jQuery是不是JavaScript的。 這不是JavaScript的一部分。 

這是寫的一個庫 一些JavaScript程序員 大約10年前。 而它的目標是簡化什麼 所謂的客戶端腳本，這 基本上我們是什麼只是 談到與DOM操作。 所以，如果我想修改 我的網頁背景顏色，也許 具體的股利。 

在這裡，我顯然得到 ElementById colorDiv。 我想設置它的背景色。 如果我只是用純JavaScript 使用文檔對象模型， 這是一個很多東西，對不對？ 的document.getElementById colorDiv.style.backgroundColor =綠色。 

呼。 這是一個有很多話要說。 這是一個很多鍵入。 所以在jQuery中，我們也許可以說， 這一點更簡潔。 在權衡是它也許有點 更多的神秘突然， 對？ 

至少長是有點多 解釋性以我們正在做什麼。 這個美元符號，括號， 單引號，哈希，colorDiv，對不對？ 這意味著什麼？ 好吧，這基本上只是 的document.getElementById colorDiv。 

但它的這種速記 做它使用jQuery的方式。 就讓我們來看看現在 在幾種不同的方法 我實際上可能 使用該文檔對象 型號操縱我的網站作品。 特別是，我們要去 是工作在操縱 的一個特定的顏色 事業部，colorDiv，在網頁上。 因此，讓我們來看看這一點。 好吧。 所以我在頁面上。 這就是所謂的test.html的，當你下載 這一點，如果你想鼓搗這個。 我有一堆的 此頁面上的按鈕。 而我要說的各個功能 為背景色，紫色，綠色， 橙色，紅色，藍色，一個單一的功能 作為背景色，事件處理 作為背景色，並使用jQuery。 我是什麼說什麼 當我這樣做呢？ 因此，我們已經看到了按鈕。 現在，讓我們來看看 這裡的一些源代碼。 我們將開始與test.html的。 為背景，使各個功能 顏色是我在這裡輸入。 讓我滾動一點點。 

而且你會發現，我 定義這些按鈕 要說單擊此按鈕時， 調用變成紫色的功能。 當這個按鈕被點擊，相反， 調用函數變成綠色， 變為橙色，變紅，發紫。 你可能已經猜到，這 也許不是最好的設計 某種意義上說，對不對？ 

如果我能這將是很好 有一個更通用的方法。 嗯，首先我們來看看 什麼這五個功能 的document.getElementById colorDiv.style.background =紫， 綠，橙，紅， 和藍色，分別。 所以，沒有特別的最好的設計。 

下一組按鈕 我已經是我寫 稱為單功能 改變顏色，顯然 接受字符串作為它的參數。 所以這是一個更好一點。 紫，綠，橙，紅， 藍現在是一個說法。 所以，我寫了一個更普遍 案例JavaScript函數， 這可能會是這個樣子。 我通過研究。 這個功能的改變顏色 期待所謂的顏色參數。 而我要說的設置 背景顏色以顏色。 所以在這裡代表我在這裡得到了什麼。 所以這是一個好一點。 

不過，我也許能 做的更好。 如果我們下去看看 在事件處理程序的情況下， 現在所有這些調用看起來是一樣的。 如果你還記得我們的 在事件處理程序的討論， 我可以得到哪些信息 這些按鈕被點擊並使用它。 

因此在event.JavaScript，我已經 書面變更色彩的​​事件，這 計算出該按鈕被點擊。 這是觸發對象行。 然後在這裡，它變得非常羅嗦。 但是我在做什麼是我 設置背景 顏色triggerObject inner.HTML。 這是在文本 按鈕標記之間。 

然後，我顯然有 將其設置為小寫。 這就是我可以把整個 字符串使用JavaScript的小寫 該方法為小寫。 因為當我設置顏色， 因為我想在這裡做， 顏色必須全部小寫。 

但是，我有按鈕， 如果我們再看看， 注意到文本有 寫一個大寫P表示紫色。 然後在最 底部在這裡，我明顯 嘗試做到這一點使用jQuery為好。 在這種情況下，我不竟 調用一個函數的。 我剛才說的類，我 使用此按鈕是一個JQ按鈕。 而已。 

那麼，如何jQuery的知道我在做什麼？ 那麼，這是一個優點 削減jQuery的缺點。 它可以讓我做的事情 很簡潔，但也許不是 為直觀。 也許那些其他三個做 一點感覺我在做什麼。 在這裡，雖然，這是怎麼回事？ 

顯然，創建 匿名函數 ，加載每當我的文檔 準備好了，那麼的document.ready， 有些功能會發生什麼。 基本上，當是文檔準備好了嗎？ 這是當我的頁面加載。 

所以，只要我的頁面加載時， 下面的功能是時刻準備著。 它說，如果類型jQButton的對象， 如果類jQButton已被點擊， 執行該功能。 因此，這裡的兩個匿名函數， 一個在另一個的內部限定。 

所以，我的整個背景 到這裡為止是我的網頁 在加載時調用此函數。 並且這個功能是在等待 為一個按鈕被點擊。 並且單擊一個按鈕時，JQ 按鈕特別被點擊， 它調用此等 功能，這是怎麼回事 設置背景 colorDiv的顏色為 無論文本是在標記之間。 

這是的概念 該按鈕被點擊。 但除此之外，這是有點 行為類似於事件。 這只是以同樣的方式我 會表達這種jQuery中。 再次，它可能是一個 很多嚇人。 這不是一樣清晰 像event.js， 這也許是一點點 詳細，但有點少 恐嚇。 

但是，如果我們彈回過我的瀏覽器 窗口，如果我開始clicking--好， 即改為紫色。 這是一個綠色的使用字符串的方法。 這是橙色使用的事件處理程序。 

這是紅色的使用jQuery的，對不對？ 他們都表現得一模一樣。 他們只是做它用不同的 接近要解決的問題。 還有很多更 jQuery的話我們肯定 要談談在這個視頻。 但是，如果你想了解更多，可以 去jQuery的排序文件 並了解了很多關於 這個非常靈活的庫，它 是非常適合做客戶端 腳本如我們在做什麼 操縱它的外表 感覺我們的網頁 與文檔對象模型。 我是道格·勞埃德。 這是CS50。