當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript HTML DOM

發布時間：2023/12/9 javascript 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript HTML DOM 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML DOM 文檔對象模型

通過 HTML DOM，可訪問 JavaScript HTML 文檔的所有元素。
當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）
HTML DOM 模型被構造為對象的樹：

查找HTML元素

a) id 查找：getElementById()
b) 標簽名查找：getElementsByTagName()
c) class 類名查找：getElementsByClassName()

<p id="demo" class="demo">hello</p><p id="demo1" class="demo">lotus</p><script type="text/javascript">let demo = document.getElementById('demo');let demo1 = document.getElementsByTagName('p');let demo2 = document.getElementsByClassName('demo')</script>

改變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：
傳統：

<a href="#">點我</a><a id="link" href="#" class="link">點我</a><script type="text/javascript">let link = document.getElementById('link');console.log(link.className); // 獲取class屬性值link.className = "linkNew"; // 更改class屬性值link.className += " linkNew1 linkNew2 linkNew3"; // 添加class屬性link.removeClass('linkNew3'); // 去除class屬性if (link.className.indexOf("linkNew3") >= 0) { //判斷class屬性里是否有要的屬性console.log(link.className); // 獲取class屬性值}</script>

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

瀏覽器兼容性寫法：

事件流、冒泡、捕獲 | 阻止

事件冒泡、捕獲：定義了元素事件觸發的順序

DOM事件流：包括三個階段（事件捕獲階段、處于目標階段、事件冒泡階段）
事件冒泡（事件穿透）：事件開始由最具體的元素接收，然后逐級向上傳播到較為不具體的節點（文檔）。。
事件捕獲：外部元素的事件會先被觸發，然后才會觸發內部元素的事件。

addEventListener(event, function, useCapture); useCapture 默認值為 false, 即冒泡傳遞，當值為 true 時, 事件使用捕獲傳遞。

阻止冒泡（阻止穿透）：終止事件在傳播過程中的捕獲、目標處理、起泡階段進一步傳播。

css屬性pointer-events： pointer-events: auto | none| visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all //據網傳，除了none/auto以外，其他都是用在svg項目中 auto:默認值 none:元素永遠不會成為鼠標事件的target。但是當其后代元素的pointer-events屬性指定其他值時，鼠標事件可以指向后代元素，在這種情況下，鼠標事件將在捕獲或冒泡階觸發父元素的事件偵聽器。eg： <style>.a {border: solid 1px red;width: 400px;height: 400px;pointer-events: auto;}.b {width: 200px;height: 200px;background: green;pointer-events: none;} </style> <div class="a" onclick="onclicka()"><div class="b" onclick="onclickb()"></div> </div> <script type="text/javascript">function onclicka() {console.log('click a'); //}function onclickb() {console.log('click b');//click a} </script> document.getElementById("button").addEventListener("click",function(event){alert("button");event.stopPropagation(); },false);冒泡的終點：最終可以冒泡到window上，即使是有iframe的話，也是不影響的，比如，我們把這個頁面嵌入到另外一個頁面中，最終也是會冒泡到這個頁面的window，即使是在iframe上添加一個click事件，也是不會冒泡到這個iframe上的，即事件的冒泡是相互獨立的。 eg： <style>.a {border: solid 1px red;width: 400px;height: 400px;}.b {width: 200px;height: 200px;background: green} </style> <div class="a" onclick="onclicka()"><div class="b" onclick="onclickb()"></div> </div> <script type="text/javascript">function onclicka() {console.log('click a'); //click a}function onclickb() {console.log('click b');//click bevent.stopPropagation();//阻止冒泡事件} </script>

事件的對象有一個stopPropagation()方法可以阻止事件冒泡，也可以阻止事件捕獲，也可以阻止處于目標階段。

阻止捕獲：

可以使用DOM3級新增事件stopImmediatePropagation()方法來阻止事件捕獲 document.getElementById("button").addEventListener("click",function(){alert("button");event.stopImmediatePropagation(); },true);

stopImmediatePropagation() 和 stopPropagation()的區別：
后者只會阻止冒泡或者是捕獲。但是前者除此之外還會阻止該元素的其他事件發生，但是后者就不會阻止其他事件的發生。

事件委托

用事件冒泡，只指定一個事件處理程序來管理某一類型的所有事件。
也就是，給父元素綁定事件，用來監聽子元素的冒泡事件。
也就是事件目標（子元素）不處理事件，把事件委托給父元素處理。

優點：減少了操作DOM節點的次數，從而減少了瀏覽器的重加載，提高代碼的性能。
適用場景：當子元素有很多，需要對子元素的事件進行監聽的時候
事件委托三部曲：

（1）：給父元素綁定事件
（2）：監聽子元素的冒泡事件
（3）：找到是哪個子元素的事件

<ul><li><a>測試1</a></li><li><a>測試2</a></li><li><a>測試3</a></li><li><a>測試4</a></li><li><a>測試5</a></li><li><a>測試6</a></li><li><a>測試7</a></li><li><a>測試8</a></li> </ul> <script type="text/javascript">var ul=document.getElementsByTagName("ul")[0];//給元素ul添加綁定事件，通過addEventListener為點擊事件click添加綁定ul.addEventListener('click',function(e){ //這里默認是冒泡，點擊子元素li會向上冒泡//通過匿名回調函數的參數e用來接收事件對象，//通過target獲取觸發事件的目標var tg=e.target;if(tg.nodeName=="LI"){ //防止父元素ul也觸發事件，點擊li的時候console.log(tg.nodeName.toLowerCase());}if(tg.nodeName=="A"){ //防止其他觸發事件，點擊a的時候console.log(tg.innerHTML);}}); </script> <ul><li>1</li><li>2</li><li>3</li><li>4</li> </ul> <script>var ul=document.querySelector("ul");//支持各種選擇器var li=document.querySelectorAll("li");//支持各種選擇器ul.onclick=function(e){ //e指event,事件對象var target=e.target || e.srcElement; //target獲取觸發事件的目標(li)if(target.nodeName.toLowerCase()=='li'){ //目標(li)節點名轉小寫字母，不轉的話是大寫字母alert(target.innerHTML))}} </script>

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