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