版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領
文檔簡介
第6章DOM（上）《JavaScript+jQuery交互式Web前端開發(fā)（第2版）》學習目標/Target
了解WebAPI的概念，能夠闡述WebAPI的作用了解什么是DOM，能夠描述DOM中文檔、元素和節(jié)點的關系
掌握獲取元素的方法，能夠根據(jù)不同場景選擇合適的方法獲取元素
了解事件的概念，能夠描述事件的3個要素學習目標/Target
掌握事件的注冊，能夠為頁面中的元素注冊事件
掌握操作元素內(nèi)容的方法，能夠根據(jù)不同場景選擇合適的方法操作元素內(nèi)容
掌握操作元素屬性的方法，能夠根據(jù)不同場景選擇合適的方法操作元素屬性
掌握操作元素樣式的方法，能夠根據(jù)不同場景選擇合適的方法操作元素樣式章節(jié)概述/Summary通過第1~5章的學習，相信讀者已經(jīng)掌握了JavaScript的基礎知識。在實際開發(fā)過程中，若要實現(xiàn)網(wǎng)頁交互效果，僅僅掌握JavaScript的基礎知識是不夠的，還需要進一步學習WebAPI的相關知識。在本階段主要學習使用DOM和BOM實現(xiàn)網(wǎng)頁交互效果，由于DOM和BOM的知識內(nèi)容較多，所以本章首先對DOM（上）的基本知識進行講解，關于DOM（下）和BOM的相關知識將在后續(xù)章節(jié)中講解。目錄/Contents6.16.26.3WebAPI簡介DOM簡介獲取元素6.4事件基礎6.5操作元素WebAPI簡介6.1了解WebAPI的概念，能夠闡述WebAPI的作用6.1WebAPI簡介
先定一個小目標！API（ApplicationProgramInterface，應用程序接口）是軟件系統(tǒng)預先定義的接口，用于軟件系統(tǒng)不同組成部分的銜接。WebAPI是指在Web開發(fā)中用到的API。6.1WebAPI簡介例如，開發(fā)一個美顏相機手機應用，該手機應用需要使用手機上的攝像頭拍攝畫面，手機的操作系統(tǒng)需要將訪問攝像頭的功能開放給手機應用，為此，手機操作系統(tǒng)提供了攝像頭API，手機應用通過攝像頭API就可以獲得訪問攝像頭的功能。6.1WebAPI簡介在JavaScript中，WebAPI被封裝成對象，用于幫助開發(fā)者實現(xiàn)某種功能。開發(fā)人員無須訪問對象源代碼，也無須理解對象內(nèi)部工作機制和細節(jié)，只需要掌握如何使用對象的屬性和方法。例如，在程序中，經(jīng)常使用console.log()輸出一些信息，其中，console就是WebAPI對象，用于操作控制臺，log()方法用于在控制臺輸出信息。DOM和BOM都包含一系列對象，這些對象都屬于WebAPI。6.1WebAPI簡介DOM簡介6.2了解什么是DOM，能夠描述DOM中文檔、元素和節(jié)點的關系
先定一個小目標！6.2DOM簡介DOM（DocumentObjectModel，文檔對象模型）是W3C組織制定的用于處理HTML文檔和XML文檔的編程接口。在網(wǎng)頁開發(fā)中，DOM扮演著非常重要的角色，使用DOM可以獲取元素、操作元素的內(nèi)容、屬性和樣式等，從而實現(xiàn)豐富多彩的網(wǎng)頁交互效果。6.2DOM簡介DOM將整個文檔視為樹形結構，這個結構被稱為文檔樹。頁面中所有的內(nèi)容在文檔樹中都是節(jié)點（Node），所有的節(jié)點都會被看作是對象，這些對象都擁有屬性和方法。6.2DOM簡介節(jié)點有多種類型，常見的類型及解釋如下。元素節(jié)點：代表頁面中的標簽。例如，<div>標簽屬于元素節(jié)點，通常稱為div元素或div節(jié)點。文本節(jié)點：代表頁面中的文本內(nèi)容。例如，“<div>內(nèi)容</div>”中的“內(nèi)容”屬于文本節(jié)點。注釋節(jié)點：代表頁面中的注釋。例如，“<!--注釋-->”屬于注釋節(jié)點。文檔節(jié)點：代表整個文檔。文檔類型節(jié)點：代表文檔的類型定義。例如，“<!DOCTYPEhtml>”屬于文檔類型節(jié)點。6.2DOM簡介不同節(jié)點之間的關系可以用傳統(tǒng)的家族關系進行描述，例如，父子關系、兄弟關系，通過這些關系可以將節(jié)點劃分為不同層級，具體如下。父節(jié)點：是指某一節(jié)點的上級節(jié)點。子節(jié)點：是指某一節(jié)點的下級節(jié)點。兄弟節(jié)點：是指同一個父節(jié)點的兩個子節(jié)點。根節(jié)點：document節(jié)點是整個文檔的根節(jié)點。根節(jié)點是文檔樹中唯一沒有父節(jié)點的節(jié)點，所有其他節(jié)點都是根節(jié)點的后代。6.2DOM簡介如果一個節(jié)點的父節(jié)點、子節(jié)點或兄弟節(jié)點是元素節(jié)點，則可以將其稱為父元素、子元素或兄弟元素。根元素對應的標簽為<html>標簽。下面演示一個簡單的文檔樹示例，如下圖所示。6.2DOM簡介節(jié)點對象有3個常用的屬性，具體解釋如下。nodeType屬性：用于獲取數(shù)字表示的節(jié)點類型。1表示元素節(jié)點，3表示文本節(jié)點、8表示注釋節(jié)點、9表示文檔節(jié)點，10表示文檔類型節(jié)點。nodeName屬性：用于獲取節(jié)點名稱。nodeValue屬性：用于獲取節(jié)點值，適用于文本節(jié)點、注釋節(jié)點。6.2DOM簡介獲取元素6.3掌握根據(jù)id屬性獲取元素的方法，能夠根據(jù)getElementById()方法獲取元素6.3.1 根據(jù)id屬性獲取元素
先定一個小目標！在HTML中，為元素設置id屬性可以作為元素設置唯一標識。document對象提供了getElementById()方法，用于根據(jù)id屬性獲取元素，該方法的語法格式如下。document.getElementById(id)上述語法格式中，參數(shù)id表示id屬性值。在調用getElementById()方法后會返回一個元素對象，這個元素對象就是根據(jù)id屬性獲取的目標元素。若沒有找到指定id屬性的元素，則返回null。6.3.1 根據(jù)id屬性獲取元素6.3.1 根據(jù)id屬性獲取元素下面通過代碼演示getElementById()方法的使用。<body>
<ul>
<liid="menu">家居</li>
<li>美妝</li>
<li>食品</li>
</ul>
<script>
//根據(jù)id屬性獲取元素
varObox=document.getElementById('menu');
console.log(Obox);
</script></body>
先定一個小目標！6.3.2 根據(jù)標簽名獲取元素掌握根據(jù)標簽名獲取元素的方法，能夠根據(jù)getElementsByTagName()方法獲取元素在實際開發(fā)中，有時需要獲取多個元素，而getElementById()方法一次只能獲取一個元素，當要獲取多個元素時，操作比較煩瑣。為此，document對象還提供了一種通過標簽名獲取元素的方法，即getElementsByTagName()方法，該方法的語法格式如下。document.getElementsByTagName(name)上述語法格式中，參數(shù)name表示標簽名。在使用getElementsByTagName()方法時，只需將標簽名作為參數(shù)傳入即可。由于具有相同標簽名的元素可能有多個，所以該方法的返回結果不是單個元素對象，而是一個集合。6.3.2 根據(jù)標簽名獲取元素下面通過代碼演示getElementsByTagName()方法的使用。<body>
<ul>
<li>家居</li>
<li>美妝</li>
<li>食品</li>
</ul>
<script>
//根據(jù)標簽名獲取元素
varlist=document.getElementsByTagName('li');
console.log(list);
</script></body>6.3.2 根據(jù)標簽名獲取元素需要注意的是，getElementsByTagName()方法返回的集合與數(shù)組的使用方法類似，但是它本質上并不是數(shù)組。為了證明這一點，可以通過在前面示例代碼的第10行代碼下方添加如下代碼進行驗證。
console.log(Array.isArray(list)); //輸出結果為：false6.3.2 根據(jù)標簽名獲取元素上述運行代碼后，控制臺輸出的結果為false，說明調用getElementsByTagName()方法后返回的結果不是數(shù)組。這種類似數(shù)組但不是數(shù)組的數(shù)據(jù)稱為類數(shù)組（array-like）對象，類數(shù)組對象可以像數(shù)組一樣通過索引訪問元素，但不能使用數(shù)組的方法。6.3.2 根據(jù)標簽名獲取元素需要注意的是，即使頁面中只有一個li元素，getElementsByTagName()方法返回的結果仍然是一個集合，如果頁面中沒有該元素，那么將返回一個空集合。通過getElementsByTagName()方法獲取到的集合是動態(tài)集合，當頁面增加標簽時，在該集合中也會自動增加元素。
先定一個小目標！6.3.3 根據(jù)name屬性獲取元素掌握根據(jù)name屬性獲取元素的方法，能夠根據(jù)getElementsByName()方法獲取元素在實際開發(fā)中，經(jīng)常需要編寫表單頁面的交互邏輯代碼，此時就需要獲取表單元素。表單元素通過name屬性設置元素名稱，為了通過name屬性獲取表單元素，document對象提供了getElementsByName()方法，該方法的語法格式如下。document.getElementsByName(name)上述語法格式中，參數(shù)name表示name屬性值。在使用getElementsByName()方法時，只需將name屬性值作為參數(shù)傳入即可，由于name屬性的值不要求必須唯一，多個元素可以有相同的名稱，如表單中的單選框和復選框等，所以該方法的返回結果不是單個元素對象，而是一個集合。6.3.3 根據(jù)name屬性獲取元素下面通過代碼演示getElementsByName()方法的使用。6.3.3 根據(jù)name屬性獲取元素<body>
<p>請選擇你最喜歡的水果（多選）</p>
<inputtype="checkbox"name="fruit"value="草莓">草莓
<inputtype="checkbox"name="fruit"value="雪梨">雪梨
<inputtype="checkbox"name="fruit"value="芒果">芒果
<script>
varfavoriteFruit=document.getElementsByName('fruit');
console.log(favoriteFruit);
console.log(favoriteFruit[2]);
</script></body>
先定一個小目標！6.3.4 根據(jù)類名獲取元素掌握根據(jù)類名獲取元素的方法，能夠根據(jù)getElementsByClassName()方法獲取元素如果需要根據(jù)類名獲取元素，可以在頁面中為元素設置類名，然后使用document對象提供的getElementsByClassName()方法獲取元素，該方法的語法格式如下。document.getElementsByClassName(names)上述語法格式中，參數(shù)names表示要匹配的類名列表，多個類名之間使用空格分隔。需要說明的是，一些舊版本的瀏覽器（如IE6~IE8）不支持getElementsByClassName()方法。6.3.4 根據(jù)類名獲取元素下面通過代碼演示getElementsByClassName()方法的使用。<body>
<ul>
<liclass="girl">小花</li>
<liclass="girl">小紅</li>
<liclass="boy">小智</li>
<liclass="boy">小強</li>
</ul>
<script>
vargirlStudent=document.getElementsByClassName('girl');
varboyStudent=document.getElementsByClassName('boy');
console.log(girlStudent[0]);
console.log(boyStudent[0]);
</script></body>6.3.4 根據(jù)類名獲取元素
先定一個小目標！6.3.5 根據(jù)CSS選擇器獲取元素掌握根據(jù)CSS選擇器獲取元素的方法，能夠根據(jù)querySelector()方法和querySelectorAll()方法獲取元素在DOM中，還可以根據(jù)CSS選擇器獲取元素。document對象提供了querySelector()方法和querySelectorAll()方法獲取目標元素，這兩個方法的語法格式如下。document.querySelector(selectors)document.querySelectorAll(selectors)上述語法格式中，參數(shù)selectors表示CSS選擇器。querySelector()方法的使用方式和querySelectorAll()方法的使用方式相似，只需將CSS選擇器作為參數(shù)傳入即可。這兩個方法的區(qū)別是，querySelector()方法返回指定CSS選擇器的第一個元素對象，querySelectorAll()方法返回指定CSS選擇器的所有元素對象集合。6.3.5 根據(jù)CSS選擇器獲取元素在使用querySelector()方法和querySelectorAll()方法時，要注意IE瀏覽器的兼容問題，這兩個方法從IE9才開始被完整支持。6.3.5 根據(jù)CSS選擇器獲取元素下面通過代碼演示querySelector()方法和querySelectorAll()方法的使用。<body>
<divclass="book">西游記</div>
<divclass="book">紅樓夢</div>
<divclass="book">三國演義</div>
<divclass="book">水滸傳</div>
<script>
//獲取類名為book的第1個div元素
varfirstBook=document.querySelector('.book');
console.log(firstBook);
//獲取類名為book的所有div元素
varallBook=document.querySelectorAll('.book');
console.log(allBook);
</script></body>6.3.5 根據(jù)CSS選擇器獲取元素掌握獲取基本結構元素的屬性，能夠靈活應用獲取基本結構元素的屬性
先定一個小目標！6.3.6 獲取基本結構元素6.3.6 獲取基本結構元素屬性作用document.documentElement獲取文檔的html元素document.body獲取文檔的body元素document.forms獲取文檔中包含所有form元素的集合document.images獲取文檔中包含所有image元素的集合在實際開發(fā)中，若需要獲取HTML中的基本結構元素（如html、body等），可以通過document對象的屬性獲取。獲取基本結構元素的document對象的屬性如下表所示。6.3.6 獲取基本結構元素下面通過代碼演示如何獲取文檔中body元素和html元素。<script>
//獲取body元素
varbodyEle=document.body;
console.log(bodyEle);
//獲取html元素
varhtmlEle=document.documentElement;
console.log(htmlEle);</script>6.3.6 獲取基本結構元素獲取或設置當前文檔的標題多學一招在實際開發(fā)中，當需要獲取或設置當前文檔的標題時，可以使用document對象提供的title屬性，示例代碼如下。console.log(document.title); //獲取標題document.title='新標題'; //設置標題6.3.6 獲取基本結構元素多學一招下面通過代碼演示如何獲取當前文檔的標題。<!DOCTYPEhtml><html><head>
<metacharset="UTF-8">
<title>這是文檔標題</title></head><body>
<script>
console.log(document.title);
</script></body></html>6.3.6 獲取基本結構元素事件基礎6.4了解事件的概念，能夠描述事件的3個要素
先定一個小目標！6.4.1
事件概述事件是指可以被JavaScript偵測到的行為，如單擊頁面、鼠標指針滑過某個區(qū)域等，不同行為對應不同事件，并且每個事件都對應與其相關的事件驅動程序。事件驅動程序由開發(fā)人員編寫，用于實現(xiàn)由該事件產(chǎn)生的網(wǎng)頁交互效果。6.4.1
事件概述事件是一種“觸發(fā)-響應”機制，行為產(chǎn)生后，對應的事件就會被觸發(fā)，事件驅動程序就會被調用，從而使網(wǎng)頁響應并產(chǎn)生交互效果。6.4.1
事件概述6.4.1
事件概述事件有3個要素，分別是事件源、事件類型和事件驅動程序，具體解釋如下。事件源：承受事件的元素對象。例如，在單擊按鈕的過程中，按鈕就是事件源。事件類型：使網(wǎng)頁產(chǎn)生交互效果的行為對應的事件種類。例如，單擊事件的事件類型為click。事件驅動程序：事件觸發(fā)后為了實現(xiàn)相應的網(wǎng)頁交互效果而運行的代碼。若要實現(xiàn)網(wǎng)頁交互效果，首先需要確定事件源，事件源確定后就可以獲取這個元素；然后需要確定事件類型，為獲取的元素注冊該類型的事件；最后分析事件觸發(fā)后，實現(xiàn)相應網(wǎng)頁交互效果的邏輯，編寫實現(xiàn)該邏輯的事件驅動程序。6.4.1
事件概述掌握事件的注冊，能夠為頁面中的元素注冊事件
先定一個小目標！6.4.2
事件注冊在實際開發(fā)中，為了讓元素在觸發(fā)事件時運行特定的代碼，需要為元素注冊事件。注冊事件又稱為綁定事件，在JavaScript中，通過事件屬性可以為操作的元素對象注冊事件。事件屬性的命名方式為“on+事件類型”，例如，單擊事件的事件類型為click，對應的事件屬性為onclick。6.4.2
事件注冊注冊事件有兩種方式，一種是在標簽中注冊，另一種是在JavaScript中注冊。在標簽中注冊事件的示例代碼如下。<divonclick="">按鈕</div>6.4.2
事件注冊上述示例代碼中，在onclick屬性的值中可以編寫事件驅動程序。在JavaScript中注冊事件的示例代碼如下。//元素對象.事件屬性=事件處理函數(shù);element.onclick=function(){};下面通過代碼演示如何進行事件注冊。定義一個按鈕元素，通過注冊事件，實現(xiàn)單擊按鈕元素后彈出內(nèi)容為“事件注冊”的警告框，示例代碼如下。<body>
<buttonid="btn">單擊</button>
<script>
//獲取事件源
varbutton=document.getElementById('btn');
//為獲取的元素注冊單擊事件
button.onclick=function(){
alert('事件注冊');
};
</script></body>6.4.2
事件注冊操作元素6.5掌握操作元素內(nèi)容的方法，能夠根據(jù)不同場景選擇合適的方法操作元素內(nèi)容6.5.1
操作元素內(nèi)容
先定一個小目標！屬性作用innerHTML設置或獲取元素開始標簽和結束標簽之間的HTML內(nèi)容，返回結果包含HTML標簽，并保留空格和換行innerText設置或獲取元素的文本內(nèi)容，返回結果會去除HTML標簽和多余的空格、換行，在設置文本內(nèi)容的時候會進行特殊字符轉義textContent設置或獲取元素的文本內(nèi)容，返回結果保留空格和換行在實際開發(fā)中，當需要修改頁面中的內(nèi)容時，就需要操作元素內(nèi)容，例如，修改頁面元素的文本內(nèi)容，或動態(tài)生成頁面內(nèi)容等。下面列舉DOM提供的操作元素內(nèi)容的常用屬性，具體如下表所示。6.5.1
操作元素內(nèi)容innerHTML屬性獲取的元素內(nèi)容包含HTML標簽；innerText屬性獲取的元素內(nèi)容不包含HTML標簽；textContent屬性和innerText屬性相似，都可以用來設置或獲取元素的文本內(nèi)容，并且返回結果會去除HTML標簽，但是textContent屬性還可以用于設置和獲取占位隱藏元素的文本內(nèi)容。需要注意的是，IE8及更早版本的瀏覽器不支持textContent屬性，在使用時需要注意瀏覽器兼容問題。小提示：通過給元素的visibility樣式屬性設置hidden值即可實現(xiàn)占位隱藏。6.5.1
操作元素內(nèi)容首先搭建一個用于展示商品種類和商品狀態(tài)的表格，商品種類分別是過季舊款、當前熱銷、春季新品，對應的商品狀態(tài)分別是已下架、熱賣中、待上架。然后通過innerHTML屬性獲取過季舊款對應的商品狀態(tài)，并將過季舊款對應的商品狀態(tài)修改為已上架；通過innerText屬性獲取當前熱銷的商品狀態(tài)，通過textContent屬性獲取春季新品的商品狀態(tài)。6.5.1
操作元素內(nèi)容6.5.1
操作元素內(nèi)容掌握操作元素屬性的方法，能夠根據(jù)不同場景選擇合適的方法操作元素屬性
先定一個小目標！6.5.2
操作元素屬性在實際開發(fā)中，僅僅通過操作元素內(nèi)容并不能滿足開發(fā)的需求，還需要學習如何操作元素屬性。在DOM中，
可以操作元素的property屬性、attribute屬性和data-*屬性。6.5.2
操作元素屬性6.5.2
操作元素屬性1.操作property屬性property是一個統(tǒng)稱，它并不是一個具體的屬性名，而是指元素在DOM中作為對象擁有的屬性。對于頁面中property屬性的操作，可以通過“元素對象.屬性名”實現(xiàn)。6.5.2
操作元素屬性img元素用于顯示圖片。下面列舉img元素中的常用屬性及其作用，具體如下表所示。（1）操作img元素的屬性屬性作用src設置圖片的路徑alt設置圖片加載失敗時顯示在網(wǎng)頁上的替代文字title設置鼠標移到圖片上時顯示的提示文字width設置圖片的寬度height設置圖片的高度sizes設置圖片的尺寸下面以單擊按鈕操作img元素屬性為例，演示img元素中src、title屬性的使用方法，實現(xiàn)單擊按鈕時顯示圖片和圖片對應的提示文字，示例代碼如下。6.5.2
操作元素屬性<body>
<buttonid="vegetable">蔬菜</button>
<buttonid="fruit">水果</button><br>
<imgsrc="images/fruit.png"alt=""title="水果">
<script>
//通過id屬性獲取元素
varvegetable=document.getElementById('vegetable');
varfruit=document.getElementById('fruit');
//通過CSS選擇器獲取元素
varimg=document.querySelector('img');>>續(xù)上一頁代碼6.5.2
操作元素屬性
//注冊事件處理程序
vegetable.onclick=function(){
img.src='images/vegetable.png';
img.title='蔬菜';
};
fruit.onclick=function(){
img.src='images/fruit.png';
img.title='水果';
};
</script></body>6.5.2
操作元素屬性input元素用于使用戶在表單中輸入內(nèi)容。下面列舉input元素中的常用屬性及其作用，具體如下表所示。（2）操作input元素的屬性屬性作用type設置文本框的類型，例如text、checkbox、radio、submit等name設置表單的名稱value設置文本框的值，默認值為空字符串checked設置是否選中該元素，該屬性僅在type為checkbox或radio時有效disabled設置表單元素是否被禁用下面演示input元素中type、value和disabled屬性的使用，實現(xiàn)單擊按鈕時，通過獲取文本框的值并將其修改為“被單擊了！”來改變文本框的值，并在單擊按鈕時設置禁用按鈕，示例代碼如下。6.5.2
操作元素屬性<body>
<button>搜索</button>
<inputtype="text"value="輸入內(nèi)容">
<script>
//通過CSS選擇器獲取元素
varbtn=document.querySelector('button');
varinput=document.querySelector('input');>>續(xù)上一頁代碼6.5.2
操作元素屬性
//注冊事件處理程序
btn.onclick=function(){
input.value='被單擊了！';
//通過value修改表單中值
this.disabled=true;
//this指向事件函數(shù)的調用者btn
};
</script></body>6.5.2
操作元素屬性2.操作attribute屬性attribute屬性也是一個統(tǒng)稱，它是指HTML標簽的屬性。下面詳細講解attribute屬性的操作。（1）設置屬性通過元素對象的setAttribute()方法可以設置屬性，其語法格式如下。element.setAttribute('屬性','值');6.5.2
操作元素屬性下面通過代碼演示如何設置屬性。<body>
<div></div>
<script>
vardiv=document.querySelector('div');
div.setAttribute('flag',3);
div.setAttribute('id','book');
</script></body>6.5.2
操作元素屬性（2）獲取屬性值通過元素對象的getAttribute()方法可以獲取屬性值，其語法格式如下。element.getAttribute('屬性');下面通過代碼演示如何獲取屬性值。<body>
<divid="demo1"index="1"></div>
<script>
vardiv=document.querySelector('div');
console.log(div.getAttribute('id')); //輸出結果為：demo1
console.log(div.getAttribute('index'));
//輸出結果為：1
</script></body>6.5.2
操作元素屬性（3）移除屬性通過元素對象的removeAttribute()方法可以移除屬性，其語法格式如下。element.removeAttribute('屬性');下面通過代碼演示如何移除屬性。<body>
<divid="demo2"index="2"></div>
<script>
vardiv=document.querySelector('div');
console.log(div.removeAttribute('id'));
console.log(div.removeAttribute('index'));
</script></body>6.5.2
操作元素屬性3.操作data-*屬性data-*屬性是HTML5提供的一種新的自定義屬性，（通過“data-”前綴來設置開發(fā)所需要的自定義屬性，“*”可以自行命名）。（1）設置data-*屬性在HTML的標簽中可以直接為元素設置data-*屬性，示例代碼如下。<divdata-index="3"></div>在上述示例代碼中，“data-”是屬性前綴，index是自定義的屬性名。在DOM中設置data-*屬性值的方式有兩種，第1種方式是通過“元素對象.dataset.屬性名=值”設置，也可以寫為“元素對象.dataset['屬性名']=值”，如果屬性名包含連字符“-”，則需要采用駝峰命名法；第2種方式是通過setAttribute()方法設置。6.5.2
操作元素屬性下面通過兩種方式演示如何設置data-*屬性，示例代碼如下。6.5.2
操作元素屬性<body>
<div></div>
<script>
vardiv=document.querySelector('div');
div.dataset.index='3';
//演示第1種方式
div.setAttribute('data-name','小智');
//演示第2種方式
</script></body>6.5.2
操作元素屬性（2）獲取data-*屬性值獲取data-*屬性值的方式有兩種，第1種方式是通過“元素對象.dataset.屬性名”獲取，也可以寫為“元素對象.dataset['屬性名']”，如果屬性名包含連字符“-”，則需要采用駝峰命名法；第2種方式是通過getAttribute()方法獲取。下面通過兩種方式演示如何獲取data-*屬性值，示例代碼如下。6.5.2
操作元素屬性<body>
<divgetTime="20"data-index="3"data-list-name="小智"></div>
<script>
vardiv=document.querySelector('div');
//通過第1種方式獲取
console.log(div.dataset.index); //輸出結果為：3
console.log(div.dataset['index']);
//輸出結果為：3
console.log(div.dataset.listName);
//輸出結果為：小智
console.log(div.dataset['listName']);//輸出結果為：小智>>續(xù)上一頁代碼6.5.2
操作元素屬性
//通過第2種方式獲取
console.log(div.getAttribute('data-index'));
//輸出結果為：3
console.log(div.getAttribute('data-list-name'));//輸出結果為：小智
</script></body>掌握操作元素樣式的方法，能夠根據(jù)不同場景選擇合適的方法操作元素樣式
先定一個小目標！6.5.3
操作元素樣式在前面的學習中，已經(jīng)講解了操作元素內(nèi)容和元素屬性的方式，為了實現(xiàn)更加完善的頁面交互效果，還需要學習如何操作元素樣式。操作元素樣式有3種方式，分別是通過style屬性操作元素樣式、通過className屬性操作元素樣式和通過classList屬性操作元素樣式。6.5.3
操作元素樣式1.通過style屬性操作元素樣式6.5.3
操作元素樣式在實際開發(fā)中，頁面中樣式的交互效果，可以通過操作元素對象的style屬性實現(xiàn)，示例代碼如下。element.style.樣式屬性名='樣式屬性值'; //設置樣式console.log(element.style.樣式屬性名); //獲取樣式6.5.3
操作元素樣式下面列舉style屬性中常用的樣式屬性名，具體如下表所示。樣式屬性名作用background設置或獲取元素的背景屬性backgroundColor設置或獲取元素的背景顏色display設置或獲取元素的顯示類型fontSize設置或獲取元素的字體大小width設置或獲取元素的寬度height設置或獲取元素的高度left設置或獲取定位元素的左部位置6.5.3
操作元素樣式>>續(xù)上一頁表樣式屬性名作用listStyleType設置或獲取列表項標記的類型overflow設置或獲取如何處理呈現(xiàn)在元素框外面的內(nèi)容textAlign設置或獲取文本的水平對齊方式textDecoration設置或獲取文本的修飾textIndent設置或獲取文本第一行的縮進transform向元素應用2D或3D轉換6.5.3
操作元素樣式下面通過代碼演示如何對元素對象添加樣式。<body>
<divid="box"></div>
<script>
varele=document.querySelector('#box');
ele.style.width='100px';
ele.style.height='100px';
ele.style.transform='rotate(7deg)';
</script></body>其效果相當于在CSS中添加如下樣式。#box{width:100px;height:100px;transform:rotate(7deg);}2.通過className屬性操作元素樣式6.5.3
操作元素樣式在實際開發(fā)中，當需要為元素對象設置多種樣式時，若通過style屬性實現(xiàn)，就需要編寫多行“element.style.樣式屬性名='樣式屬性值';”形式的代碼，此種方式非常煩瑣。為了能夠方便快捷地實現(xiàn)為元素對象設置多種樣式，可以通過className屬性操作元素樣式，設置該屬性相當于設置元素對應標簽的class屬性。6.5.3
操作元素樣式操作className屬性時，首先將元素對象的樣式寫在CSS中，并使用CSS中的類選擇器為元素設置樣式，然后通過JavaScript操作className屬性更改元素的類名，實現(xiàn)元素樣式的更改。操作className屬性的示例代碼如下。element.className='類名'; //設置類名console.log(element.className); //獲取類名6.5.3
操作元素樣式下面通過代碼演示如何通過className屬性更改元素的樣式。<style>
.target{
width:200px;
height:200px;
border:1pxsolidblack;
font-size:10px;
text-align:center;
line-height:200px;
}</style>6.5.3
操作元素樣式通過JavaScript操作className屬性更改元素類名的示例代碼如下。<body>
<divclass="box">使用className更改元素的樣式</div>
<script>
//獲取div元素
varbox=document.querySelector('.box');
//為獲取到的div元素設置className
box.className='target';
</script></body>3.通過classList屬性操作元素樣式6.5.3
操作元素樣式在實際開發(fā)中，對于元素中類的操作還可以使用元素對象的classList屬性，在使用該屬性時，需要注意IE瀏覽器的兼容問題。classList屬性從IE10開始才被支持，且IE10中classList屬性不能對SVG（ScalableVectorGraphics，可縮放矢量圖形）元素進行操作。6.5.3
操作元素樣式通過classList屬性可以對元素中的類名進行獲取、添加、移除、判斷等操作。通過classList屬性獲取類名的示例代碼如下。element.classListclassList屬性返回一個對象，該對象稱為classList對象，是一個類數(shù)組對象，對象中的每一項對應一個類名，通過數(shù)組索引即可訪問類名。6.5.3
操作元素樣式classList對象還可以通過一系列屬性和方法對元素的類名進行設置和移除。classList對象常用的屬性和方法如下表所示。屬性和方法作用length獲取類名的數(shù)量add(class1,class2…)為元素添加一個或多個類名remove(class1,class2…)移除元素的一個或多個類名toggle(class,true|false)為元素切換類名，第2個參數(shù)是可選參數(shù)，設為true表示添加，設為false表示移除，若不設置表示有則移除，沒有則添加contains(class)判斷元素中指定的類名是否存在，返回布爾值item(index)獲取元素中索引對應的類名，索引從0開始掌握操作元素的綜合應用的案例，能夠編寫代碼實現(xiàn)案例
先定一個小目標！6.5.4
【案例】操作元素的綜合應用在一些網(wǎng)站輸入登錄密碼時，會發(fā)現(xiàn)用戶輸入的密碼是隱藏的（顯示為小黑點），通過單擊文本框右側的“眼睛”圖片就可以使密碼顯示。為了提升用戶體驗，可以使用兩張不同狀態(tài)的“眼睛”圖片充當按鈕，圖片中的“眼睛”睜開時顯示密碼，閉合時隱藏密碼。默認情況下，輸入的密碼是隱藏的，圖片中的“眼睛”是閉合狀態(tài)。6.5.4
【案例】操作元素的綜合應用1.顯示隱藏密碼明文要想實現(xiàn)密碼顯示和隱藏的頁面，首先通過<img>和<input>等標簽搭建密碼框結構，然后通過JavaScript實現(xiàn)密碼框和文本框的切換，并切換對應的“眼睛”圖片。6.5.4
【案例】操作元素的綜合應用本案例要求單擊文本框時，隱藏文本框默認的提示文字，單擊文本框之外的區(qū)域時，顯示文本框默認的提示文字。首先為元素注冊獲取文本框焦點事件onfocus和失去焦點事件onblur，在獲取焦點時，需要判斷表單中的內(nèi)容是否為默認文字，如果是默認文字，就清空表單內(nèi)容，如果失去焦點，需要判斷表單內(nèi)容是否為空，如果為空，則表單里邊的內(nèi)容改為默認文字。6.5.4
【案例】操作元素的綜合應用2.顯示隱藏文本框內(nèi)容6.5.4
【案例】操作元素的綜合應用在實際開發(fā)中，為了提高網(wǎng)頁的界面設計和用戶的使用體驗，可以實現(xiàn)在多個選項之間進行切換時，保持只有一個選項處于選中狀態(tài)，其他選項處于未選中狀態(tài)的交互效果。例如，在頁面中設置5個按鈕，當用戶單擊某個按鈕時，則改變按鈕背景顏色，而其他按鈕保持默認樣式。6.5.4
【案例】操作元素的綜合應用3.高亮顯示被單擊的按鈕本案例要求在頁面中設置5個按鈕，當用戶單擊某個按鈕時，高亮顯示被單擊的按鈕，其他按鈕保持默認樣式。6.5.4
【案例】操作元素的綜合應用在實際開發(fā)中，當表格中有多個單元格時，可以在鼠標指針經(jīng)過時為當前行添加背景顏色，使表格內(nèi)容一目了然。下面使用鼠標指針經(jīng)過事件onmouseover和鼠標指針離開事件onmouseout實現(xiàn)鼠標指針經(jīng)過時背景變色的案例效果。6.5.4
【案例】操作元素的綜合應用4.鼠標指針經(jīng)過時背景變色6.5.4
【案例】操作元素的綜合應用6.5.4
【案例】操作元素的綜合應用前面運行結果的頁面展示了編號01~03的商品信息，并且這3行商品信息均沒有背景顏色，鼠標指針經(jīng)過編號02的商品信息時的運行結果如下圖所示。本章小結本章主要對DOM（上）進行講解，首先講解了WebAPI和DOM的概念，然后講解了獲取元素和事件基礎，最后講解了元素內(nèi)容、屬性和樣式的操作。其中，獲取元素主要講解了根據(jù)id屬性、標簽名、name屬性、類名、CSS選擇器獲取元素以及獲取基本結構元素，事件基礎主要講解了事件的概念和事件的注冊。通過本章的學習，讀者應能夠運用DOM完成一些基本的頁面交互效果。本章小結第7章DOM（下）《JavaScript+jQuery交互式Web前端開發(fā)（第2版）》學習目標/Target
掌握節(jié)點操作，能夠完成節(jié)點的獲取、創(chuàng)建、添加、移除和復制操作
掌握事件的進階操作，能夠完成事件的監(jiān)聽、移除熟悉DOM事件流，能夠說明事件捕獲和事件冒泡的區(qū)別學習目標/Target
掌握事件對象，能夠使用事件對象進行事件操作
掌握鼠標事件，能夠使用鼠標事件對象進行鼠標操作掌握鍵盤事件，能夠使用鍵盤事件對象進行鍵盤操作學習目標/Target
掌握元素偏移量操作，能夠使用offset系列屬性進行元素偏移量操作
掌握元素可視區(qū)域操作，能夠使用client系列屬性進行元素可視區(qū)域操作掌握元素滾動操作，能夠使用scroll系列屬性進行元素滾動操作章節(jié)概述/Summary學習了第6章DOM（上）后，相信讀者已經(jīng)能夠通過注冊事件和操作元素的方式實現(xiàn)簡單的頁面交互效果，但是僅僅掌握這些內(nèi)容還無法滿足復雜的Web開發(fā)需求。本章將對DOM（下）進行講解，主要包括DOM的進階內(nèi)容，例如，節(jié)點操作、事件進階、事件對象、鼠標事件等。通過本章的學習，讀者能夠實現(xiàn)更加復雜的頁面交互效果。目錄/Contents7.17.2節(jié)點操作事件進階7.3事件對象目錄/Contents7.47.5鼠標事件鍵盤事件7.6元素位置操作節(jié)點操作7.1掌握節(jié)點的獲取，能夠獲取子節(jié)點、父節(jié)點和兄弟節(jié)點7.1.1獲取節(jié)點
先定一個小目標！7.1.1獲取節(jié)點1.獲取子節(jié)點在DOM中，document對象代表文檔節(jié)點，它是文檔樹的根節(jié)點，其他節(jié)點可通過獲取子節(jié)點的方式進行獲取。例如，獲取首個子節(jié)點、獲取最后一個子節(jié)點等。當獲取的節(jié)點不存在時，獲取結果為null。7.1.1獲取節(jié)點注意childrenNodes屬性存在瀏覽器兼容問題，在IE6~IE8中不可以獲取文本節(jié)點，在IE9及以上版本和主流瀏覽器中則可以獲取文本節(jié)點。獲取子節(jié)點的常用屬性如下表所示。屬性作用firstChild獲取當前節(jié)點的首個子節(jié)點lastChild獲取當前節(jié)點的最后一個子節(jié)點firstElementChild獲取當前節(jié)點的首個子元素節(jié)點lastElementChild獲取當前節(jié)點的最后一個子元素節(jié)點children獲取當前節(jié)點的所有子元素節(jié)點集合childrenNodes獲取當前節(jié)點的所有子節(jié)點集合7.1.1獲取節(jié)點2.獲取父節(jié)點使用節(jié)點的parentNode屬性可以獲取父節(jié)點，若沒有父節(jié)點，則獲取結果為null。下面通過代碼演示如何獲取父節(jié)點，示例代碼如下。<body>
<div>
<h1>
<spanclass="child">獲取父節(jié)點</span>
</h1>
</div>
<script>
varchild=document.querySelector('.child');
console.log(child.parentNode);
//獲取span元素的父節(jié)點，即h1元素
</script></body>在DOM中，常用的獲取兄弟節(jié)點的屬性有4個，具體如下表所示。7.1.1獲取節(jié)點3.獲取兄弟節(jié)點屬性作用previousSibling獲取當前節(jié)點的上一個兄弟節(jié)點nextSibling獲取當前節(jié)點的下一個兄弟節(jié)點previousElementSibling獲取當前元素節(jié)點的上一個兄弟元素節(jié)點nextElementSibling獲取當前元素節(jié)點的下一個兄弟元素節(jié)點當需要獲取的節(jié)點不存在時，獲取結果為null。以上4個屬性存在瀏覽器兼容問題，在IE9以下版本的IE瀏覽器中不支持使用。掌握節(jié)點的創(chuàng)建與添加，能夠創(chuàng)建節(jié)點和添加節(jié)點7.1.2創(chuàng)建并添加節(jié)點
先定一個小目標！在實際開發(fā)中，有時需要創(chuàng)建一個新節(jié)點并添加到文檔中。例如，在某個搜索引擎網(wǎng)站中進行搜索后，搜索框下方的搜索歷史記錄列表中會增加一個新歷史記錄，這個新歷史記錄可以通過創(chuàng)建并添加節(jié)點實現(xiàn)。7.1.2創(chuàng)建并添加節(jié)點7.1.2創(chuàng)建并添加節(jié)點1.創(chuàng)建節(jié)點創(chuàng)建元素節(jié)點可以使用document對象的createElement()方法，由于該方法創(chuàng)建的節(jié)點是頁面中原本不存在的，所以這種方式也稱為動態(tài)創(chuàng)建節(jié)點。使用createElement()方法創(chuàng)建節(jié)點時，只需將標簽名作為參數(shù)傳入即可，語法格式如下。document.createElement('tagName');上述語法格式中，tagName表示標簽名。7.1.2創(chuàng)建并添加節(jié)點vardiv=document.createElement('div');console.log(div);上述示例代碼通過createElement()方法創(chuàng)建了一個div元素節(jié)點。下面通過代碼演示如何創(chuàng)建節(jié)點，示例代碼如下。1.創(chuàng)建節(jié)點7.1.2創(chuàng)建并添加節(jié)點2.添加節(jié)點DOM提供了appendChild()方法和insertBefore()方法用于添加節(jié)點，這兩個方法都由父節(jié)點的對象調用，關于這兩個方法的具體說明如下。appendChild()方法：將一個節(jié)點添加到父節(jié)點的所有子節(jié)點的末尾。insertBefore()方法：將一個節(jié)點添加到父節(jié)點中的指定子節(jié)點的前面。該方法需要接收兩個參數(shù)，第1個參數(shù)表示要添加的節(jié)點，第2個參數(shù)表示父節(jié)點中的指定子節(jié)點。掌握節(jié)點的移除，能夠使用removeChild()方法移除節(jié)點7.1.3移除節(jié)點
先定一個小目標！node.removeChild(child);上述語法格式中，node表示父節(jié)點，child表示node中需要移除的子節(jié)點。在實際開發(fā)中，有時需要移除節(jié)點，DOM提供了removeChild()方法，可以將一個父節(jié)點的指定子節(jié)點移除。移除節(jié)點的語法格式如下。7.1.3移除節(jié)點下面通過代碼演示使用removeChild()方法實現(xiàn)單擊按鈕后移除子節(jié)點的效果，示例代碼如下。7.1.3移除節(jié)點<body>
<ul>
<li>第1個li元素</li>
<li>第2個li元素</li>
</ul>
<button>移除ul元素的第2個子元素節(jié)點</button>
<script>
varul=document.querySelector('ul');
varbtn=document.querySelector('button');
btn.onclick=function(){
ul.removeChild(ul.children[1]);
};
</script></body>掌握簡易留言板的案例，能夠編寫代碼實現(xiàn)案例7.1.4【案例】簡易留言板
先定一個小目標！7.1.4【案例】簡易留言板1.搭建頁面結構簡易留言板由展示區(qū)和發(fā)布區(qū)組成。展示區(qū)由無序列表搭建而成，用于展示發(fā)布的留言，默認情況下展示區(qū)的內(nèi)容為空；發(fā)布區(qū)由文本域和按鈕組成，用于發(fā)布留言。通過單擊“發(fā)布”按鈕可以將文本域中的留言內(nèi)容發(fā)布到展示區(qū)。7.1.4【案例】簡易留言板2.實現(xiàn)單擊“發(fā)布”按鈕發(fā)表留言的功能首先獲取button、textarea和ul元素，并為獲取的button元素注冊單擊事件，然后在對應的事件處理函數(shù)中創(chuàng)建li元素節(jié)點，將文本域中的文本設置為li元素節(jié)點的元素內(nèi)容，最后將li元素節(jié)點添加到ul元素的子節(jié)點列表中。為了提高用戶體驗，當用戶單擊“發(fā)布”按鈕后，如果文本域中的內(nèi)容為空，需要彈出一個內(nèi)容為“您沒有輸入內(nèi)容”的警告框。7.1.4【案例】簡易留言板首先在文本域中編輯兩條留言，然后單擊“發(fā)布”按鈕，發(fā)送留言的運行結果如下圖所示。7.1.4【案例】簡易留言板3.實現(xiàn)刪除留言的功能首先為展示區(qū)中的留言添加“刪除”按鈕，將按鈕的類名設置為remove，內(nèi)容為刪除，然后注冊單擊事件，實現(xiàn)單擊按鈕后刪除該按鈕的li元素。7.1.4【案例】簡易留言板varbutton=document.createElement('button');button.className='remove';button.innerHTML='刪除';button.onclick=function(){ul.removeChild(this.parentNode);};li.appendChild(button);首先在文本域中編輯兩條留言，并單擊“發(fā)布”按鈕，然后單擊第2條留言中的“刪除”按鈕。刪除留言的運行結果如下圖所示。7.1.4【案例】簡易留言板掌握節(jié)點的復制，能夠使用cloneNode()方法復制節(jié)點7.1.5復制節(jié)點
先定一個小目標！在實際開發(fā)中，有時會需要用到多個相同的節(jié)點，雖然使用連續(xù)創(chuàng)建相同節(jié)點的方式也能夠實現(xiàn)，但是該方式的實現(xiàn)過程非常煩瑣，會增加代碼量，為此，可以使用DOM提供的cloneNode()方法復制節(jié)點。7.1.5復制節(jié)點使用cloneNode()方法復制節(jié)點的示例代碼如下。7.1.5復制節(jié)點node.cloneNode(deep)在上述示例代碼中，node表示需要被復制的節(jié)點。cloneNode()方法被調用后會返回節(jié)點對象的副本，該方法中的deep參數(shù)為可選參數(shù)，默認值為false，表示只復制節(jié)點本身，不復制節(jié)點內(nèi)部的子節(jié)點，如果設置為true，表示復制節(jié)點本身及節(jié)點內(nèi)部所有的子節(jié)點。事件進階7.2掌握事件的監(jiān)聽，能夠完成事件的監(jiān)聽
先定一個小目標！7.2.1事件監(jiān)聽通過事件屬性的方式注冊事件時，一個事件類型只能注冊一個事件處理函數(shù)，而通過事件監(jiān)聽的方式注冊事件時，可以給一個事件類型注冊多個事件處理函數(shù)。7.2.1事件監(jiān)聽事件監(jiān)聽存在瀏覽器兼容問題，在早期版本的IE瀏覽器（IE6~IE8）中，事件監(jiān)聽的語法格式如下。element.attachEvent(type,callback);7.2.1事件監(jiān)聽上述語法格式中，attachEvent()方法可以為對象添加事件監(jiān)聽，該方法中的第1個參數(shù)type表示為對象注冊的事件類型，帶有on前綴，如onclick；第2個參數(shù)callback表示事件處理函數(shù)。在新版瀏覽器（如IE9及之后的版本、Chrome、Firefox）中，事件監(jiān)聽的語法格式如下。element.addEventListener(type,callback,[capture]);7.2.1事件監(jiān)聽上述語法格式中，addEventListener()方法可以為對象添加事件監(jiān)聽，該方法的第1個參數(shù)type表示為對象注冊的事件類型，不帶on前綴；第2個參數(shù)callback表示事件處理函數(shù)；第3個參數(shù)capture是可選參數(shù)，默認值為false，表示在事件冒泡階段完成事件處理，將其設置為true時，表示在事件捕獲階段完成事件處理。7.2.1事件監(jiān)聽通過事件監(jiān)聽的方式添加的多個事件處理函數(shù)具有觸發(fā)順序，瀏覽器的類型也會影響觸發(fā)順序。7.2.1事件監(jiān)聽下面以在Chrome瀏覽器中進行事件監(jiān)聽為例，演示addEventListener()方法的使用，示例代碼如下。<body>
<divid="t">test</div>
<script>
varobj=document.getElementById('t');
//添加第1個事件處理函數(shù)
obj.addEventListener('click',function(){
console.log('one');
});
//添加第2個事件處理函數(shù)
obj.addEventListener('click',function(){
console.log('two');
});
</script></body>掌握事件的移除，能夠完成事件的移除
先定一個小目標！7.2.2事件移除在實際開發(fā)中，有時需要對頁面中的事件進行移除。例如，頁面中領取優(yōu)惠券的按鈕，限定每個用戶只能領取1張優(yōu)惠券，當單擊按鈕的次數(shù)大于1時，領取優(yōu)惠券的按鈕不再生效，此時就可以將領取優(yōu)惠券的按鈕移除。不同方式注冊的事件移除方式不同，并且需要考慮兼容性問題。7.2.2事件移除移除通過事件屬性的方式注冊的事件，語法格式如下。element.onclick=null;上述語法格式中，將單擊事件的屬性設置為null即可移除事件。7.2.2事件移除移除通過事件監(jiān)聽的方式注冊的事件，語法格式如下。element.detachEvent(type,callback); //適用于早期版本的IE瀏覽器element.removeEventListener(type,callback);//適用于新版的瀏覽器上述語法格式中，type表示要移除的事件類型，callback表示事件處理函數(shù)，與注冊事件的處理函數(shù)相同。下面通過代碼演示如何將事件移除，示例代碼如下。<body>
<divid="t">test</div>
<script>
varobj=document.getElementById('t');
//定義事件處理函數(shù)
functiontest(){
console.log('test');
}
obj.addEventListener('click',test); //事件監(jiān)聽
obj.removeEventListener('click',test); //事件移除
</script></body>7.2.2事件移除熟悉DOM事件流，能夠說明DOM事件流的3個階段7.2.3 DOM事件流
先定一個小目標！當事件發(fā)生時，事件會在發(fā)生事件的元素節(jié)點與DOM樹的根節(jié)點之間按照特定的順序進行傳播，這個事件傳播的過程就是事件流。7.2.3 DOM事件流事件流分為事件捕獲和事件冒泡。事件捕獲由網(wǎng)景公司的團隊提出，指的是事件流傳播的順序應該是從DOM樹的根節(jié)點一直到發(fā)生事件的節(jié)點；事件冒泡由微軟公司的團隊提出，指的是事件流傳播的順序應該是從發(fā)生事件的節(jié)點到DOM樹的根節(jié)點。7.2.3 DOM事件流W3C對網(wǎng)景公司和微軟公司提出的方案進行了中和處理，將DOM事件流分為3個階段，具體如下。事件捕獲階段：事件從document節(jié)點自上而下向目標節(jié)點傳播的階段。事件目標階段：事件流到達目標節(jié)點后，運行相應的事件驅動程序的階段。事件冒泡階段：事件從目標節(jié)點自下而上向document節(jié)點傳播的階段。7.2.3 DOM事件流當事件發(fā)生后，瀏覽器首先進行事件捕獲，但不會對事件進行處理，然后進入事件目標階段，運行目標節(jié)點的事件驅動程序，最后進入事件冒泡階段，逐級對事件進行處理。下面以一個包含div元素的頁面為例，展示事件流的具體過程，如下圖所示。7.2.3 DOM事件流事件對象7.3掌握事件對象的獲取，能夠實現(xiàn)事件對象的獲取7.3.1 獲取事件對象
先定一個小目標！在不同的瀏覽器中，獲取事件對象的方式并不相同。在早期版本的IE瀏覽器中，只能通過window對象獲取事件對象；在新版的瀏覽器中，通過事件處理函數(shù)即可獲取事件對象。7.3.1 獲取事件對象早期版本的IE瀏覽器獲取事件對象的語法格式如下。var事件對象=window.event;新版的瀏覽器獲取事件對象的語法格式如下。元素對象.事件屬性=function(event){};在上述語法格式中，當事件被觸發(fā)時會產(chǎn)生事件對象，JavaScript會將其以參數(shù)的形式傳給事件處理函數(shù)
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 微生物除臭劑行業(yè)分析及未來五至十年行業(yè)發(fā)展報告
- 無人駕駛公共汽車相關行業(yè)公司成立方案及可行性研究報告
- 個性化產(chǎn)品定制化行業(yè)市場需求變化帶來新的商業(yè)機遇分析報告
- 智能門鎖行業(yè)分析及未來五至十年行業(yè)發(fā)展報告
- 教育電子書出版相關行業(yè)公司成立方案及可行性研究報告
- 鄉(xiāng)村健康養(yǎng)生基地行業(yè)市場需求變化帶來新的商業(yè)機遇分析報告
- 新藥臨床試驗行業(yè)五年發(fā)展洞察及發(fā)展預測分析報告
- 中專新模式英語基礎練習冊答案及解析
- 老舊小區(qū)改造施工方案設計
- 2024屆湖北省三校高三下學期高考模擬考試(一模)聯(lián)考物理試題（解析版）
- GB/T 18865-2002橡膠與橡膠制品實驗室間試驗確定的重復性值和再現(xiàn)性值置信區(qū)間
- 醫(yī)療衛(wèi)生法律法規(guī)
- GA 844-2009防砸復合玻璃通用技術要求
- 關于烏鎮(zhèn)的英語介紹ppt
- ERCP講義教學課件
- 2023年駐馬店市正陽縣醫(yī)院醫(yī)護人員招聘筆試模擬試題及答案解析
- 高分子材料與應用(英文版)-Chapter-8-Functional-Polymers課件
- 幼兒園家長助教課件
- 高速公路機電系統(tǒng)培訓課件
- 《古詩中的數(shù)字夸張》公開課課件
- 鍋爐工程施工進度安排
評論
0/150
提交評論