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

HTML DOM 將 HTML 文檔視作樹結(jié)構(gòu)。這種結(jié)構(gòu)被稱為節(jié)點樹：

通過 HTML DOM，樹中的所有節(jié)點均可通過 JavaScript 進行訪問。所有 HTML 元素（節(jié)點）均可被修改，也可以創(chuàng)建或刪除節(jié)點。
(2)、節(jié)點之間的關(guān)系
節(jié)點之間的關(guān)系就是嵌套關(guān)系（父子關(guān)系）、并列關(guān)系（兄弟關(guān)系）。注意區(qū)分節(jié)點與元素節(jié)點之間的區(qū)別。
父節(jié)點–parentNode
父元素節(jié)點–parentElement
子節(jié)點–childNodes：標(biāo)簽節(jié)點、文本節(jié)點、注釋節(jié)點 得到的是偽數(shù)組
子元素節(jié)點–children :標(biāo)簽節(jié)點
第一個子節(jié)點–firstChild:文本
第一個子元素節(jié)點–firstElementChild：第一個標(biāo)簽
最后一個子節(jié)點–lastChild:文本
最后一個子元素節(jié)點–lastElementChild: 最后一個標(biāo)簽
上一個子節(jié)點–previousSibling:文本
上一個子元素節(jié)點–previousElementSibling: 上一個標(biāo)簽
下一個子節(jié)點 --nextSibling:文本
下一個子元素節(jié)點–nextElementSibling: 下一個標(biāo)簽
總結(jié)：firstChild、lastChild、previousSibling、nextSibling獲取到的都是文本，如果沒有就是文本節(jié)點名稱#text， firstElementChild、lastElementChild、previousElementSibling、nextElementSibling獲取到的都是標(biāo)簽，如果沒有就是空。
演示示例：節(jié)點之間的關(guān)系
演示示例：節(jié)點之間的關(guān)系
(3)、節(jié)點隔行換色
我們之前學(xué)過的隔行換色都是通過遍歷偽數(shù)組然后奇偶數(shù)判斷，或者循環(huán)累加時+2等，現(xiàn)在我是利用節(jié)點之間的關(guān)系以及節(jié)點的名稱值等實現(xiàn)隔行換色的效果
第一種：奇偶數(shù)判斷
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”;
}
第三種：子元素節(jié)點
for (var i = 0; i < ulObj.children.length; i++) {
if (i % 2 == 0) {
liObj[i].style.backgroundColor = “red”;
}
}
第四種：節(jié)點操作
for (var i = 0; i < ulObj.childNodes.length; i++) {
// console.log(ulObj.childNodes[i]);
// 判斷是不是標(biāo)簽節(jié)點，把標(biāo)簽節(jié)點提取出來即可
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”;
}
}
演示示例：利用節(jié)點隔行換色
課堂練習(xí)：利用節(jié)點隔行換色
(4)、插入節(jié)點
insertBefore() 方法可在已有的子節(jié)點前插入一個新的子節(jié)點。
提示： 如果你想創(chuàng)建一個新的文本列表項，在 LI 元素后你應(yīng)該添加元素的文本節(jié)點，然后在列表中添加 LI元素。
你也可以使用 insertBefore 方法來 插入/移除 已存在的元素。
node.insertBefore(newnode,existingnode) 參數(shù)newnode是要插入的節(jié)點對象，existingnode是要添加新的節(jié)點前的子節(jié)點。
var node=document.getElementById(“myList2”).lastChild;
var list=document.getElementById(“myList1”);
list.insertBefore(node,list.childNodes[0]);
演示示例：插入節(jié)點
3. 創(chuàng)建元素的三種方式
(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);
演示示例：創(chuàng)建元素的幾種方式
(4) 、動態(tài)的創(chuàng)建列表
單擊按鈕，動態(tài)的創(chuàng)建無序列表，渲染在紅色邊框的box中.
思路：1、創(chuàng)建內(nèi)容數(shù)組
2、獲取元素，給按鈕綁定單擊事件
3、創(chuàng)建ul標(biāo)簽
4、將ul添加到box中
5、遍歷數(shù)組
6、創(chuàng)建li標(biāo)簽
7、添加內(nèi)容
8、按鈕禁用
演示示例：動態(tài)的創(chuàng)建列表

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

元素

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

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

(4)、加載事件
onload事件
onload 事件會在頁面或圖像加載完成后立即發(fā)生。
onload 通常用于 元素，在頁面完全載入后(包括圖片、css文件等等。)執(zhí)行腳本代碼。
(5)、Location對象
常用屬性
// //地址欄上#及后面的內(nèi)容
// 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);
// //協(xié)議
// console.log(window.location.protocol);
// //搜索的內(nèi)容
// console.log(window.location.search);
(6)、History對象

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。