1. 程式人生 > >JS基礎丨02. DOM、BOM對比總結

JS基礎丨02. DOM、BOM對比總結

<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>