1. 程式人生 > >總結-DOM通用屬性&DOM獲取元素位置&事件繫結與移除&冒泡和標籤的預設行為

總結-DOM通用屬性&DOM獲取元素位置&事件繫結與移除&冒泡和標籤的預設行為

DOM通用屬性&DOM獲取元素位置&事件繫結與移除&冒泡和標籤的預設行為
	DOM物件的通用屬性
		innerHTML
			獲取/設定元素裡的html內容。在設定元素的HTML內容的時候,會覆蓋掉原來的內容。
		innerText
			獲取/設定元素裡面的文字內容
		 nodeName
			元素節點的 nodeName 與標籤名相同 
			​ 屬性節點的 nodeName 與屬性名相同 
			​ 文字節點的 nodeName 始終是 #text 
			​ 文件節點的 nodeName 始終是 #document
		nodeValue
			元素節點的 nodeValue 是 undefined 或 null 
			​ 文字節點的 nodeValue 是文字本身
			​ 屬性節點的 nodeValue 是屬性值
		nodeType
			呼叫nodeType屬性會得到一個數字,這個數字表示節點的型別
			 元素 1 
			​ 屬性 2
			​ 文字 3
			​ 註釋 8 
			​ 文件 9
	DOM獲取元素的位置
		offsetLeft     元素在網頁中水平座標值 
		offsetTop     元素在網頁中垂直座標值
		offsetWidth   元素在頁面中佔據的寬度
		offsetHeight  元素在頁面中佔據的高度
		scrollLeft     滾動條在容器中水平滾動的距離,多用於瀏覽器的滾動條
		scrollTop     滾動條在容器中垂直滾動的距離,多用於瀏覽器的滾動條
	事件繫結與移除
		直接在HTML標籤中新增,即使用onclick、onmouseover等HTML屬性;
		DOM的方式新增,即通過dom方法獲取節點,然後為其繫結事件;
			取消事件:節點.onclick=null;
		使用addEventListener或attachEvent(IE8及更低版本瀏覽器)
			元素節點.attachEvent(事件名, 事件處理函式);
				元素節點.dettachEvent(事件名 處理函式);
			元素節點.addEventListener(事件名, 事件處理函式);// 事件名不要帶on
				元素節點.removeEventListener(事件名, 處理函式); //事件名不要帶on
	事件物件相關屬性和方法使用
		冒泡事件及阻止冒泡事件的發生
			實際開發中,有些時候就希望事件冒泡,可以不對其進行處理;有些時候不希望事件冒泡,那麼就需要阻止事件冒泡。
		阻止冒泡
			evt.stopPropagation(); //evt指的是事件物件
				非IE
			window.event.cancelBubble = true;
				IE
		阻止標籤的預設行為
			有些時候,點選了a標籤或者submit按鈕後不希望執行標籤的預設行為,這時候就需要阻止預設行為。
		evt.preventDefault();
			非IE
		window.event.returnValue = false;
			IE
		return false;
			萬能阻止:
				return flase;
				onclick="return false";
				onclick ="return confirm('你確定要刪除嗎');"返回值true和false