DOM&BOM

題目（答案見每題下方空白處）

　　1.DOM是哪一種基本數據結構

　　樹

　　2.DOM操做的經常使用API有哪些

　　獲取DOM節點以及節點的property、attribute，獲取父子節點，節點的添加和刪除

　　3.DOM節點的attribute和property的區別？

　　property操做的時候，是把DOM節點當成一個JS對象進行操做的，也就是說能夠理解成間接操做DOM節點，是對JS對象屬性的修改，所以只能操做DOM節點中的一些固有屬性，而對自定義屬性不能操做

　　而attribute操做的時候，是操做真正的DOM節點，也就是HTML標籤的屬性的操做，所以能夠直接修改DOM節點上的屬性，包括固有屬性和自定義屬性，通常是用getAttribute和setAttribute兩個方法進行操做

 　　4.如何檢測瀏覽器類型

　　用BOM中的navigator裏的userAgent屬性來判斷

　　5.url的組成

　　能夠用BOM中的location的幾個屬性去解釋，包括協議、域名、路徑、查詢字符串、哈希五個部分

 

知識點

DOM本質

　　DOM，即文本對象模型（document object model），本質上是一個樹結構

 　　實際上，DOM的做用（本質）是：瀏覽器把HTML代碼，結構化成一個瀏覽器可識別而且JS可操做的模型

DOM操做

　　DOM操做關鍵在三部分：節點獲取、property以及attribute

節點獲取

　　能夠分爲獲取單個節點元素（id）以及獲取節點元素集合（tag、class、queryselector），而這裏雖然獲取的是DOM節點，但這個節點本質上是一個JS對象（否則如何被JS操做呢）

　　具體的節點獲取再也不詳細列出

property

　　property即DOM節點的屬性，這裏能夠理解成，每個DOM節點在JS中實際爲一個JS對象，所以這些節點都是有屬性的

　　這些屬性例如style（能夠進一步獲取CSS樣式）、nodeName（節點名稱），實際在瀏覽器中的節點中是不存在的，所以不能夠設置/修改自定義屬性（例如dataname）

attribute

　　attribute是真正的DOM節點在文檔中所擁有的屬性，例如a標籤的href屬性、img標籤的src屬性等，也包括class以及自定義屬性（dataname之類的）

　　能夠經過getAttribute以及setAttribute來獲取並設置DOM節點的屬性，這裏的獲取和設置是直接的，設置的都將以屬性的形式添加到DOM標籤上，也能夠設置自定義屬性

　　這裏property和attribute的區別以下圖所示

　　

　　瀏覽器中的輸出如圖所示

　　

DOM結構操做

　　這裏的結構操做，即對DOM這顆樹來進行操做，包括節點的添加、父子元素節點的獲取、節點的刪除、遍歷節點等

節點添加

　　經常使用的是createElement（建立節點）、appendChild（在節點下添加子節點），這裏須要注意appendChild若是操做的是一個已有的節點，則會移動這個已有節點

　　

　　

父子元素節點獲取

　　經常使用的有parentElement以及childNodes屬性，也能夠用removeChild方法刪除子節點

　　這裏須要注意，如今主流的瀏覽器會把換行產生的空白當成一個子節點

　　

　　執行結果以下

　　

BOM

　　Browser Object Model，即瀏覽器對象模型

　　其中包括了navigator、screen、history、location

　　navigator中有userAgent屬性，屬性值是一個長字符串，裏面包括了瀏覽器的特性，可用來判斷瀏覽器的類型

　　若是在Chrome中模擬手機特性，則userAgent中也會對應出現手機的信息（例如iPhone）

　　

　　screen裏有width、height屬性，爲屏幕的寬高

　　location能夠理解成url，裏面有href（整個url）、protocal（協議，如https、http）、host（域名）、pathname（路徑）、search（？後的查詢字符串，多個之間用&鏈接）、hash（哈希，#後的內容）等屬性

　　history是瀏覽歷史記錄，有back和forward方法