DOM節點操作、事件對象與BOM
V1.2
一、復習提問
? js中目前學到的事件由哪些
? 如何阻止a鏈接
? 設置表單例如disabled selected checked的正確方式是什么?
? 獲取元素有哪些方式
? Innrtext有哪些技術點
? 自定義屬性如何增刪改查
? 設置樣式顏色的幾種方式分別是什么
二、本章任務
? 完成隔行變色效果
? 完成切換背景圖片案例
? 一起搖起來
? 美女時鐘
三、本章目標
? 熟悉節點的操作
? 熟練掌握元素創建的多種方式
? 對于事件有完整清晰的認識
? 掌握BOM中的屬性和方法
四、知識點
1.節點操作
(1) 、什么是節點
根據 W3C 的 HTML DOM 標準，HTML 文檔中的所有內容都是節點：
整個文檔是一個文檔節點 document
每個 HTML 元素是元素節點
HTML 元素內的文本是文本節點
每個 HTML 屬性是屬性節點
注釋是注釋節點
(2) 、節點類型
通過noteType屬性可以獲取節點的類型
document的節點類型—9
console.log(document.nodeType);//9
標簽的節點類型—1
var box1 = document.getElementById(“box1”);
console.log(box1.nodeType);//1
屬性的節點類型—2，getAttributeNode(“屬性”):獲取元素的屬性節點
var attr1 = box1.getAttributeNode(“class”);
console.log(attr1.nodeType);//2
文本的節點類型—3，元素的第一個子節點就是文本節點
console.log(box1.firstChild.nodeType);//3
(3) 、節點名稱
通過nodeName可以獲取元素的節點名稱。
document的節點名稱—#document
console.log(document.nodeName);//#document
標簽的節點名稱—大寫的標簽名
console.log(box1.nodeName);//DIV
屬性的節點名稱—屬性名
console.log(attr1.nodeName);//class
文本的節點名稱—#text
console.log(box1.firstChild.nodeName);//#text
(4) 、節點值
通過nodeValue可以獲取元素的節點的值。
document的節點值—null
console.log(document.nodeValue);//null
標簽的節點值—null
console.log(box1.nodeValue);//null
屬性的節點值—屬性值
console.log(attr1.nodeValue);//boxCl
文本的節點值—文本的內容
console.log(box1.firstChild.nodeValue);//我是div元素
演示示例：節點類型、名稱、值
課堂練習：利用節點隔行換色
2.節點之間的關系
(1)、HTML DOM 節點樹

HTML DOM 將 HTML 文檔視作樹結構。這種結構被稱為節點樹：

通過 HTML DOM，樹中的所有節點均可通過 JavaScript 進行訪問。所有 HTML 元素（節點）均可被修改，也可以創建或刪除節點。
(2)、節點之間的關系
節點之間的關系就是嵌套關系（父子關系）、并列關系（兄弟關系）。注意區分節點與元素節點之間的區別。
父節點–parentNode
父元素節點–parentElement
子節點–childNodes：標簽節點、文本節點、注釋節點 得到的是偽數組
子元素節點–children :標簽節點
第一個子節點–firstChild:文本
第一個子元素節點–firstElementChild：第一個標簽
最后一個子節點–lastChild:文本
最后一個子元素節點–lastElementChild: 最后一個標簽
上一個子節點–previousSibling:文本
上一個子元素節點–previousElementSibling: 上一個標簽
下一個子節點 --nextSibling:文本
下一個子元素節點–nextElementSibling: 下一個標簽
總結：firstChild、lastChild、previousSibling、nextSibling獲取到的都是文本，如果沒有就是文本節點名稱#text， firstElementChild、lastElementChild、previousElementSibling、nextElementSibling獲取到的都是標簽，如果沒有就是空。
演示示例：節點之間的關系
演示示例：節點之間的關系
(3)、節點隔行換色
我們之前學過的隔行換色都是通過遍歷偽數組然后奇偶數判斷，或者循環累加時+2等，現在我是利用節點之間的關系以及節點的名稱值等實現隔行換色的效果
第一種：奇偶數判斷
for (var i = 0; i < liObj.length; i++) {
if (i % 2 == 0) {
liObj[i].style.backgroundColor = “red”;
}
}
第二種：累加2
for (var i = 0; i < liObj.length; i += 2) {
liObj[i].style.backgroundColor = “red”;
}
第三種：子元素節點
for (var i = 0; i < ulObj.children.length; i++) {
if (i % 2 == 0) {
liObj[i].style.backgroundColor = “red”;
}
}
第四種：節點操作
for (var i = 0; i < ulObj.childNodes.length; i++) {
// console.log(ulObj.childNodes[i]);
// 判斷是不是標簽節點，把標簽節點提取出來即可
if (ulObj.childNodes[i].nodeType == 1 && ulObj.childNodes[i].nodeName == “LI”) {
console.log(ulObj.childNodes[i]);
newObj.push(ulObj.childNodes[i]);
}
}
for (var i = 0; i < newObj.length; i++) {
if (i % 2 == 0) {
newObj[i].style.backgroundColor = “red”;
}
}
演示示例：利用節點隔行換色
課堂練習：利用節點隔行換色
(4)、插入節點
insertBefore() 方法可在已有的子節點前插入一個新的子節點。
提示： 如果你想創建一個新的文本列表項，在 LI 元素后你應該添加元素的文本節點，然后在列表中添加 LI元素。
你也可以使用 insertBefore 方法來 插入/移除 已存在的元素。
node.insertBefore(newnode,existingnode) 參數newnode是要插入的節點對象，existingnode是要添加新的節點前的子節點。
var node=document.getElementById(“myList2”).lastChild;
var list=document.getElementById(“myList1”);
list.insertBefore(node,list.childNodes[0]);
演示示例：插入節點
3. 創建元素的三種方式
(1) 、document.write()
弊端：只能往body中添加元素
document.write(‘

我是div ’);
(2) 、innerHTML
弊端：在同級下只能添加一種元素，多個會覆蓋
document.getElementById(“divObj”).innerHTML = “

哈哈哈

”;
(3) 、document.createElement()
父元素.appendChild(子元素)：給父元素末尾添加子元素（文本為createTextNode()）
var pObj = document.createElement(“p”);
divObj1.appendChild(pObj);
演示示例：創建元素的幾種方式
(4) 、動態的創建列表
單擊按鈕，動態的創建無序列表，渲染在紅色邊框的box中.
思路：1、創建內容數組
2、獲取元素，給按鈕綁定單擊事件
3、創建ul標簽
4、將ul添加到box中
5、遍歷數組
6、創建li標簽
7、添加內容
8、按鈕禁用
演示示例：動態的創建列表

事件進階
(1) 、事件三要素
事件源：是指那個元素引發的事件。比如當你點擊cdsn圖標的時候，會跳轉到cdsn首頁。那么這個cdsn圖標就是事件源,再或者，可以這樣理解， 當你對某個元素執行動作的時候，會觸發一系列效果（動畫，跳轉…），那么這個元素就是事件源。
事件類型：例如，點擊，鼠標劃過，按下鍵盤，獲得焦點。
事件驅動程序：事件驅動程序即執行的結果，例如，當你點擊cdsn圖標的時候，會跳轉到cdsn首頁。那么跳轉到cdsn首頁就是事件的處理結果。
執行事件的步驟：獲取元素、綁定事件、書寫事件驅動程序
(2) 、監聽事件(對比onclick綁定點擊事件)
綁定監聽事件 addEventListener(“事件的類型”,事件的處理程序)
box1.addEventListener(“click”, myFunc)
function myFunc() {
this.style.backgroundColor = “blue”;
}
解綁監聽事件removeEventListener(“事件的類型”,事件的處理程序)
box1.removeEventListener(“click”, myFunc);
演示示例：綁定監聽事件
(3) 、事件對象
任何事件都有內置對象event，事件對象的兼容性寫法為
var event = event || window.event;
// 事件的類型
console.log(event.type);
// 元素的ID
console.log(event.target.id);
// 文本的內容
console.log(event.target.innerText);
// 事件的觸發點是距離瀏覽器左側的橫縱坐標
console.log(“橫坐標：” + event.clientX + “,” + “縱坐標：” + event.clientY);
console.log(“橫坐標：” + event.pageX + “,” + “縱坐標：” + event.pageY);
console.log(“我單擊header!”);
演示綁定事件源對象解決新增元素沒有綁定事件的問題
演示示例：事件對象
(4) 、事件冒泡
什么是冒泡事件
事件冒泡階段：事件從事件目標(target)開始，往上冒泡直到頁面的最上一級標簽。
假設一個元素div，它有一個下級元素p。

元素

這兩個元素都綁定了click事件，如果用戶點擊了p，它在div和p上都觸發了click事件，那這兩個事件處理程序哪個先執行呢？事件順序是什么？ 如何阻止冒泡（存在兼容性） e.stopPropagation(); 谷歌和火狐支持, window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持

演示示例：事件冒泡
5. BOM
(1)、BOM的概念
BOM(Browser Object Model) 是指瀏覽器對象模型，瀏覽器對象模型提供了獨立于內容的、可以與瀏覽器窗口進行互動的對象結構。BOM由多個對象組成，其中代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象都是該對象的子對象。
我們在瀏覽器中的一些操作都可以使用BOM的方式進行編程處理，
比如：刷新瀏覽器、后退、前進、在瀏覽器中輸入URL等
(2)、BOM的頂級對象
window是瀏覽器的頂級對象，當調用window下的屬性和方法時，可以省略window注意：window下一個特殊的屬性 window.name
(3)、對話框
alert()
prompt()
confirm()

(4)、加載事件
onload事件
onload 事件會在頁面或圖像加載完成后立即發生。
onload 通常用于 元素，在頁面完全載入后(包括圖片、css文件等等。)執行腳本代碼。
(5)、Location對象
常用屬性
// //地址欄上#及后面的內容
// console.log(window.location.hash);
// //主機名及端口號
// console.log(window.location.host);
// //主機名
// console.log(window.location.hostname);
// //文件的路徑—相對路徑
// console.log(window.location.pathname);
// //端口號
// console.log(window.location.port);
// //協議
// console.log(window.location.protocol);
// //搜索的內容
// console.log(window.location.search);
(6)、History對象

//跳轉的
my$("btn1").onclick=function()window.location.href="15test.html";;//前進my$(“btn2”).onclick = function () {
window.history.forward();
};
//后退
my$(“btn”).onclick = function () {
window.history.back();
};

(7)、Navigator對象
通過userAgent可以判斷用戶瀏覽器的類型
console.log(window.navigator.userAgent);
//通過platform可以判斷瀏覽器所在的系統平臺類型.
//console.log(window.navigator.platform);
演示示例：BOM
6. 定時器
(1)、setInterval()
setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。
setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。
clearInterval()
clearInterval() 方法可取消由 setInterval() 函數設定的定時執行操作。
clearInterval() 方法的參數必須是由 setInterval() 返回的 ID 值。
//定時器
//參數1:函數
//參數2:時間—毫秒—1000毫秒–1秒
//執行過程:頁面加載完畢后,過了1秒,執行一次函數的代碼,又過了1秒再執行函數…
//返回值就是定時器的id值
(2)、setTimeout()
另一個定時器定義和用法
方法用于在指定的毫秒數后調用函數或計算表達式。
提示： 1000 毫秒= 1 秒。
提示： 如果你只想重復執行可以使用 setInterval() 方法。
提示： 使用 clearTimeout() 方法來阻止函數的執行。
參數：param1回調函數，param2時間

返回值: 返回一個 ID（數字），可以將這個ID傳遞給 clearTimeout() 來取消執行
五、總結
請查看腦圖(JavaScript-API(DOM節點操作、事件、BOM).xmind)
六、作業
作業1：
利用節點操作完成全選和全不選
作業2：
美女時鐘走一秒
作業3：
動態的創建表格
作業4：
通過事件監聽來獲取指針坐標
筆試題：見txt文件

總結

以上是生活随笔為你收集整理的js day04DOM节点操作、事件对象与BOM的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。