當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript HTML DOM
生活随笔
收集整理的這篇文章主要介紹了
JavaScript HTML DOM
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML DOM 文檔對象模型
通過 HTML DOM，可訪問 JavaScript HTML 文檔的所有元素。
當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）
HTML DOM 模型被構造為對象的樹：
查找HTML元素
a) id 查找：getElementById()
b) 標簽名查找：getElementsByTagName()
c) class 類名查找：getElementsByClassName()
改變HTML 內容、屬性、樣式
a) 改變輸出流：document.write()
b) 改變 HTML 元素的內容：
建議使用這個語法：document.getElementById(id).innerHTML = 新的 HTML
c) 改變 HTML 屬性：
建議使用這個語法：document.getElementById(id).attribute=新屬性值
d) 改變 HTML 樣式：
請使用這個語法：document.getElementById(id).style.property=新樣式
e) 改變 class：
傳統：
/html5增加了classList：
let link = document.getElementById('link');console.log(link.classList); // 獲取class屬性值對象link.classList.add('link1', 'link2','link3')// 添加class屬性link.classList.remove('link3') // 去除class屬性事件onload、onunload
用戶進入或離開頁面（頁面包含圖片等文件在內的所有元素都加載完成）時被觸發；用于 body 元素上
應用場景：檢測訪問者的瀏覽器類型和瀏覽器版本、用于處理 cookie
加載多函數寫法：
onchange 事件
通常結合對輸入字段的驗證來使用。
鼠標事件
onmouseover：鼠標 移至 HTML 元素上方時觸發
onmouseout：鼠標 移出 HTML 元素上方時觸發
onmousedown：鼠標 按下 HTML 元素 時觸發
onmouseup：鼠標 按下 HTML 元素 后抬起 時觸發
onclick：單擊 HTML 元素 時觸發
addEventListener 方法
向指定元素添加事件句柄。添加的事件句柄不會覆蓋已存在的事件句柄。
可以向任何 DOM 對象添加事件監聽，不僅僅是 HTML 元素。如： window 對象。
語法：不要使用 “on” 前綴。 例如，使用 “click” ,而不是使用 "onclick" element.addEventListener(event, function, useCapture); event 事件的類型 function 事件觸發后調用的函數 useCapture 是個布爾值用于描述事件是冒泡還是捕獲。該參數是可選的。 <p id="demo">點我</p><script type="text/javascript">let demo = document.getElementById('demo');demo.addEventListener('click', function() {console.log(this)})demo.addEventListener('click', ()=> {console.log(this)})demo.addEventListener('click', way)function way() {this.style.color="red";console.log(this)}</script>
Window 對象添加滾動事件
元素滑到頂部懸浮固定實例： <style>.demo1{ height:200px; background-color:#EFE4B0; }.demo2{ height:40px; width:100%; background-color:#7092BE; color:#fff; }.demo3{ height:2000px; background-color:#C3C3C3; }.fixed{position: fixed;top: 0;left: 0;} </style><body onunload="removeScroll();"><div class="demo1"></div><div id="fixed" class="demo2">這個div到達頂部時懸浮在頂部，不到頂部不懸浮</div><div class="demo3"></div><script type="text/javascript">var fixedDom = document.getElementById('fixed');window.addEventListener('scroll',winScroll); // addEventListener() 方法為window添加滾動事件function winScroll(e){var top = getElementViewTop(fixedDom);top < 0 ? fixedDom.classList.add("fixed") : fixedDom.classList.remove("fixed");}function getElementViewTop(element){var actualTop = element.offsetTop,elementScrollTop=document.documentElement.scrollTop || document.body.scrollTop;return actualTop-elementScrollTop;}function removeScroll() {window.removeEventListener('scroll',winScroll); //移除由 addEventListener() 方法添加的滾動事件}</script> </body>瀏覽器兼容性寫法：
function bind(obj , eventStr , callback){if(obj.addEventListener){//大部分瀏覽器obj.addEventListener(eventStr , callback , false);}else{//IE8及以下obj.attachEvent("on"+eventStr , function(){//在匿名函數中調用回調函數callback.call(obj);});} }事件流、冒泡、捕獲 | 阻止
事件冒泡、捕獲：定義了元素事件觸發的順序
- DOM事件流： 包括 三個階段（事件捕獲階段、處于目標階段、事件冒泡階段）
- 事件冒泡（事件穿透）：事件開始由最具體的元素接收，然后逐級向上傳播到較為不具體的節點（文檔）。。
- 事件捕獲：外部元素的事件會先被觸發，然后才會觸發內部元素的事件。
- 阻止冒泡（阻止穿透）：終止事件在傳播過程中的捕獲、目標處理、起泡階段進一步傳播。
事件的對象有一個stopPropagation()方法可以阻止事件冒泡，也可以阻止事件捕獲，也可以阻止處于目標階段。
- 阻止捕獲：
stopImmediatePropagation() 和 stopPropagation()的區別：
后者只會阻止冒泡或者是捕獲。 但是前者除此之外還會阻止該元素的其他事件發生，但是后者就不會阻止其他事件的發生。
事件委托
用事件冒泡，只指定一個事件處理程序來管理某一類型的所有事件。
也就是，給父元素綁定事件，用來監聽子元素的冒泡事件。
也就是事件目標（子元素）不處理事件，把事件委托給父元素處理。
-
優點：減少了操作DOM節點的次數，從而減少了瀏覽器的重加載，提高代碼的性能。
-
適用場景：當子元素有很多，需要對子元素的事件進行監聽的時候
-
事件委托三部曲：
（1）：給父元素綁定事件
（2）：監聽子元素的冒泡事件
（3）：找到是哪個子元素的事件
DOM 元素添加、刪除、修改
- 添加新元素：
1）appendChild()：parent.appendChild(el)添加新元素到某元素內的尾部
2）insertBefore()：parent.insertBefore(el, child) 將新元素添加到某元素內某節點之前
- 移除已存在的元素：parent.removeChild(child)
removeChild()：從父元素中移除子節點，刪除節點必須知道父節點
- 替換HTML元素：parent.replaceChild(el, child)
HTMLCollection DOM 集合
HTMLCollection 對象類似包含 HTML 元素的一個數組。
看起來可能是一個數組，但其實不是。
NodeList DOM 節點列表
從文檔中獲取的NodeList 節點列表 (集合)
看起來可能是一個數組，但其實不是。
HTMLCollection 與 NodeList 的區別：
相同：
都可以使用索引 (0, 1, 2, 3, 4, …) 來獲取元素
都有 length 屬性
不相同：
HTMLCollection 元素可以通過 name，id 或索引來獲取
NodeList 只能通過索引來獲取。
只有 NodeList 對象有包含屬性節點和文本節點。
總結
以上是生活随笔為你收集整理的JavaScript HTML DOM的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql自增id 重置
- 下一篇： 【Spring-AOP-学习笔记-3】@