JS基礎丨02. DOM、BOM對比總結
阿新 • • 發佈:2018-12-13
<script type="text/javascript"> window.onload = function() { -----------------------BOM 物件----------------------- 1. 瀏覽器物件模型BOM裡常用的物件: 1、window: 是JS的最頂層物件,其他的BOM物件都是window物件的屬性; 2、document: 文件物件; 3、location: 瀏覽器當前URL資訊; 4、navigator: 瀏覽器本身資訊; 5、screen: 客戶端螢幕資訊; 6、history: 瀏覽器訪問歷史資訊; 2. window物件的常用方法: Alert()、confirm()、prompt() open()、close() setInterval()、setTimeout()、clearInterval()、clearTimeout() 3. window.location的常用方法: window.location.search 返回值: 答:查詢(引數)部分。 除了給動態語言賦值以外,我們同樣可以給靜態頁面, 並使用javascript來獲得相信應的引數值返回值:?ver=1.0&id=timlq<?後面的的鍵值對> //url:http://www.sina.com/getage?number=1&year=2016 window.location.hash 返回值: 答:錨點 , 返回值:#love ; //url:http://www.sina.com/getage?#age 這時就返回'#age' window.location.reload()作用: 答:重新整理當前頁面。 -----------------------BOM 物件----------------------- 2. DOM操作——怎樣新增、移除、移動、複製、建立和查詢節點。 1. 建立新節點: createDocumentFragment() // 建立一個DOM片段 createElement() // 建立一個具體的元素 createTextNode() // 建立一個文字節點 2. 新增、移除、替換、插入: insertBefore() // 在已有的子節點前插入一個新的子節點 // 在子節點之後插入一個新的子節點 function insertAfter(eNew, eTarget){ var eParent = eTarget.parentNode;// 獲取父節點 if(eParent.lastChild == eTarget){// target是否為父節點中last-child eParent.appendChild(eNew); }else{ eParent.insertBefore(eNew,eTarget.nextSibling); } } appendChild() replaceChild() removeChild() 3. 查詢: getElementById() // 通過元素Id,唯一性 getElementsByTagName() // 通過標籤名稱 getElementsByName() // 通過元素的Name屬性的值(IE容錯能力較強,會得到一個數組,其中包括id等於name值的) 3. document.write()方法可以用在兩個方面: 1、頁面載入過程中用實時指令碼建立頁面內容, 2、用延時指令碼建立本視窗或新視窗的內容。 documen.write和 innerHTML 的區別: document.write 只能重繪整個頁面 document.write是重寫整個document, 寫入內容是字串的html innerHTML 可以重繪頁面的一部分 innerHTML是HTMLElement的屬性,是一個元素的內部html內容 ----------------------- BOM 與 DOM 的關係與區別----------------------- 3. 關於BOM與DOM的關係與區別: 1. DOM 是 W3C 的標準; [所有瀏覽器公共遵守的標準] 2. BOM 是 各個瀏覽器廠商根據 DOM 在各自瀏覽器上的實現;// [表現為不同瀏覽器定義有差別,實現方式不同] 3. window 是 BOM 物件,而非js物件; 從window.document已然可以看出: DOM的最根本的物件是BOM的window物件的子物件。 區別: DOM描述了處理網頁內容的方法和介面, BOM描述了與瀏覽器進行互動的方法和介面。 } </script>