總結-DOM通用屬性&DOM獲取元素位置&事件繫結與移除&冒泡和標籤的預設行為
阿新 • • 發佈:2018-11-11
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