目錄
DOM檔案物件模型
節點
如何查找 HTML 元素
DOM查詢
DOM添加
事件
當網頁被加載時，瀏覽器會創建頁面的檔案物件模型（Document Object Model），js通過DOM來對HTML進行操作
DOM檔案物件模型
檔案 --檔案表示的就是整個HTML網頁檔案
物件 --物件表示將頁面中的每一部分都轉換為了一個物件
模型 --使用模型來表示物件之間的關系，這樣方便我們來獲取物件
HTML DOM 模型被構造為物件的樹：
節點
如何查找 HTML 元素
document節點找到元素
document.getElementById(); //通過元素id找到一個HTML元素節點物件
document.getElementsByTagName(); //通過元素標簽名找到一組HTML元素節點物件
document.getElementsByNama(); //通過name屬性找到一組HTML元素節點物件
DOM查詢
//document中有一個body屬性 ，他保存的是bady的參考
//document.documentElement保存的是html根標簽
//document.all代表頁面中的所有元素
var body =document.body;
var html =document.documentElement
var all = document.all;
document.getElementsByClassName(""); DOM添加
document.getElementById() // 獲取某document中的子節點
document.createTextNode() // 創建新節點中的文本
document.createElement() //創建新節點
父節點.appendChild(li); //添加子節點
子節點.parentNode() //獲取父元素
父節點.removeChild () //洗掉節點
父節點.replaceChild //替換子節點事件
事件就是檔案或瀏覽器視窗中發生的一些特定的互動瞬間
Javascript與HTML之間的互動是通過事件實作的，Javascript中常見的事件已在之前的博客中說到
事件物件event
當事件的回應函式被觸發時、瀏覽器每次都會將一個事件物件作為實參傳遞進回應函式，在事件物件中封裝了當前事件相關的一切系資訊，比如滑鼠的坐標、那個按鍵被按下、滾輪的移動
<script type="text/javascript">
/*
*鍵盤控制使div根據不同方向移動
*/
window.onload = function(){
document.onkeydown = function(event){
event=event || window.event;
console.log(event.keyCode);
switch(event.keyCode){
case 37 :
//alert("向左");
box1.style.left=box1.offsetLeft -10 +"px";
break;
case 39 :
//alert("向右");
box1.style.left=box1.offsetLeft +10 +"px";
break;
case 38 :
//alert("向上");
box1.style.top=box1.offsetTop -10 +"px";
break;
case 40 :
//alert("向下");
box1.style.top=box1.offsetTop +10 +"px";
break;
}
};
};
</script>事件的冒泡（Bubble）
所謂事件的冒泡就是事件的向上傳導，當后代元素上的事件被觸發時，父代的相同事件也會被觸發！
事件的委派
將事件統一系結給元素共同的祖先元素，這樣當后代元素上的事件被觸發時，會一直冒泡到祖先元素，從而通過祖先元素的回應函式來處理事件，
事件的委派利用了冒泡，通過委派可以減少事件系結的次數，提高程式的性能，
如果本篇博客對您有一定的幫助，大家記得留言+點贊哦，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/231588.html
標籤：其他
上一篇：JavaScript概述