[Powered by Google Translate] [DOM]
[Tommy瑪克威廉的] [哈佛大學]
[這是CS50。] [CS50.TV]
在這段視頻中，我們要看一看在DOM。
當瀏覽器下載一個網頁，它需要在內存中表示不知何故。
文檔對象模型DOM，
代表介紹了如何在瀏覽器內存中的網頁。
在這段視頻中，我們就來看看在DOM的JavaScript的背景下，
但DOM是一種與語言無關的概念。
例如，PHP有它自己的DOM實現。
然而，經常用來通過JavaScript DOM
因為JavaScript允許我們改變網頁的內容上飛，
和DOM允許我們訪問一個網頁的部分。
讓我們來看看一個例子網頁。
好吧，現在讓我們來看看這一頁將在DOM表示。
每一棵樹都需要有一個根節點在頂部。
此文檔的HTML元素是根節點
因為它是出現的第一個元素。
讓我們添加一個根節點到我們的樹。
讓我們再看看HTML文檔。
注意身體標記是嵌套的HTML標籤內。
這意味著，body元素是一個孩子的HTML元素。
我們可以代表這我們的DOM樹中，通過身體的葉
降HTML。
讓我們做到這一點。
我們有身體下面的HTML。
現在，我們可以看到該機構有2個孩子自身的，
h1元素和ul元素。
這意味著我們可以將這些元素都
到body元素，讓我們做到這一點。
我們有一個h1和UL。
最後，ul元素有3個孩子，
這將完成我們的DOM樹，所以，讓我們添加李麗，李。
這就完成了我們的DOM樹，這是瀏覽器是如何存儲你的網頁。
現在，讓我們來看看我們如何能夠使用JavaScript遍歷這棵樹。
我們可以使用特殊的JavaScript變量稱為文檔訪問此樹。
此文件對象的一個屬性
是身體屬性，這個對象代表
在我們的例子中網頁中的主體元素。
如果我們希望得到所有的孩子的身體元素，
如果你還記得的是，h1標籤和UL標籤，
我們可以說document.body.childNodes。
這會給我們雙方h1元素的數組，包含
ul元素，因為他們是直接的孩子的身體。
如果我們想創建一個變量代表ul元素
我們可以說VRR UL =那麼這段代碼在這裡，
現在，因為子節點是一個簡單的數組
我們可以索引到它與[1]得到該數組的第二個元素。
有了這個新的UL對象，我們就可以訪問不同的元素屬性，如它的ID。
如果我們說ul.id將是相等的字符串列表
因為這是我們所擁有的，在我們的HTML頁面。
我們還可以得到它的tagName，在這種情況下，將是
元素的類型，它是在這種情況下，微升。
我們還可以得到其父母或它上面的節點，在這種情況下，
將是身體的元素。
如果我們說。parentNode，那將是一樣document.body的。
當然，這微升有其自己的孩子，
所以我們仍然可以說這個元素的子節點，
和現在應該有這個數組長度為3，因為在我們的名單中有3項。
最後，也許是最有用的屬性是怎麼回事。的innerHTML
這將是列表中的實際內容，這在我們的示例頁面
是那些3華里標籤。
當然，如果我們有一個大的文件，訪問元素
以這種方式將是非常繁瑣的，因為
最終我們將不得不說之類的東西document.body.childNodes
支架的東西。子節點支架別的東西，
它要得到真正麻煩。
而不是我們真正想要做的是能夠查詢文檔，
所以就像我們的東西在互聯網上使用搜索關鍵字
我們確實需要一些方式簡明扼要地搜索這個文件
只拿回我們關心的元素，而無需遍歷
整個樹從上到下。
幸運的是，現代的瀏覽器允許我們這樣做
具有特殊功能的稱為querySelectorAll，
這個函數接受一個參數
這是一個CSS選擇器，它會返回給我們
所有匹配的元素，選擇。
這意味著你不需要學習一個全新的查詢DOM語法。
相反，你可以運用所學知識，你已經知道了
關於CSS選擇器。
讓我們來看看一些例子查詢文件。
如果我們說querySelectorAll，並通過這串＃富
那將會給我們的元素的ID富。
你也可以說的document.getElementById
並把它傳遞字符串foo，不包括hashtag。
你要去找回完全相同的對象。
相反，如果我們通過字符串。酒吧document.querySelectorAll的
我們要拿回所有的元素與類酒吧。
我們還可以結合CSS選擇器。
如果我們通過字符串中的＃foo的IMG
要給我們所有的圖像元素
兒童的元素的ID富。
正如你可以看到，通過組合選擇器，我們有一些非常強大的搜索功能。
但引擎蓋下，DOM是真的只是一棵樹，
這些選擇使我們能夠抽象，客場在一定程度上
因為我們不總是關心整個結構的DOM樹。
這是一個快速概述的DOM，並加入我們的感謝。
[CS50.TV]