《JavaScript程序設(shè)計(jì)》課件-項(xiàng)目5-1 DOM簡(jiǎn)介和獲取_第1頁(yè)
《JavaScript程序設(shè)計(jì)》課件-項(xiàng)目5-1 DOM簡(jiǎn)介和獲取_第2頁(yè)
《JavaScript程序設(shè)計(jì)》課件-項(xiàng)目5-1 DOM簡(jiǎn)介和獲取_第3頁(yè)
《JavaScript程序設(shè)計(jì)》課件-項(xiàng)目5-1 DOM簡(jiǎn)介和獲取_第4頁(yè)
《JavaScript程序設(shè)計(jì)》課件-項(xiàng)目5-1 DOM簡(jiǎn)介和獲取_第5頁(yè)
已閱讀5頁(yè)，還剩20頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

JavaScript程序設(shè)計(jì)20211課程導(dǎo)入2任務(wù)導(dǎo)入3知識(shí)講解4任務(wù)實(shí)施項(xiàng)目5-1DOM簡(jiǎn)介和獲取5任務(wù)總結(jié)知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)數(shù)組對(duì)象怎么實(shí)例化？字符串對(duì)象怎么實(shí)例化？提問(wèn)知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)任務(wù)重難點(diǎn)練習(xí)獲取元素重點(diǎn)：WebAPIDOM樹獲取元素知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)WebAPI簡(jiǎn)介1.WebAPI簡(jiǎn)介WebAPI是瀏覽器提供的一套操作瀏覽器功能和頁(yè)面元素的接口。JavaScript語(yǔ)言由3部分組成，分別是ECMAScript、BOM和DOM，其中ECMAScript是JavaScript語(yǔ)言的核心，而WebAPI包括BOM和DOM兩部分。

1.1

初識(shí)WebAPIJavaScript的組成部分知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)WebAPI簡(jiǎn)介API：應(yīng)用程序編程接口，是一些預(yù)先定義的函數(shù)，這些函數(shù)是由某個(gè)軟件開放給開發(fā)人員使用的，幫助開發(fā)者實(shí)現(xiàn)某種功能，開發(fā)人員無(wú)須訪問(wèn)源碼、無(wú)須理解其內(nèi)部工作機(jī)制細(xì)節(jié)，只需知道如何使用即可。例如，調(diào)起手機(jī)的攝像頭拍攝畫面。1.2

WebAPI與API的關(guān)系知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)WebAPI簡(jiǎn)介WebAPI：主要針對(duì)瀏覽器的API，在JavaScript語(yǔ)言中被封裝成了對(duì)象，通過(guò)調(diào)用對(duì)象的屬性和方法就可以使用WebAPI。例如，console對(duì)象、document對(duì)象、window對(duì)象。document.title='設(shè)置新標(biāo)題'; //設(shè)置頁(yè)面標(biāo)題console.log(document.title); //獲取頁(yè)面標(biāo)題document.write('<h1>網(wǎng)頁(yè)內(nèi)容</h1>');//將字符串寫入頁(yè)面示例代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)DOM簡(jiǎn)介2.1

什么是DOMDOM：文檔對(duì)象模型，是W3C組織推薦的處理可擴(kuò)展標(biāo)記語(yǔ)言（HTML或者XML）的標(biāo)準(zhǔn)編程接口。W3C定義了一系列的DOM接口，利用DOM可完成對(duì)HTML文檔內(nèi)所有元素的獲取、訪問(wèn)、標(biāo)簽屬性和樣式的設(shè)置等操作。在實(shí)際開發(fā)中，諸如改變盒子的大小、標(biāo)簽欄的切換、購(gòu)物車功能等帶有交互效果的頁(yè)面，都離不開DOM。2.DOM簡(jiǎn)介知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)DOM簡(jiǎn)介2.2DOM樹DOM中將HTML文檔視為樹結(jié)構(gòu)，被稱之為文檔樹模型，把文檔映射成樹形結(jié)構(gòu)，通過(guò)節(jié)點(diǎn)對(duì)象對(duì)其處理，處理的結(jié)果可以加入到當(dāng)前的頁(yè)面。DOM樹知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)DOM簡(jiǎn)介接下來(lái)針對(duì)DOM中各節(jié)點(diǎn)的專有名詞解釋如下：文檔（document）：可以把一個(gè)頁(yè)面當(dāng)成一個(gè)文檔元素（element）：頁(yè)面中的所有標(biāo)簽都是元素節(jié)點(diǎn)（node）：網(wǎng)頁(yè)中的所有內(nèi)容，在文檔樹中都是節(jié)點(diǎn)（如：元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)、文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)等），在DOM中會(huì)把所有的節(jié)點(diǎn)都看作是對(duì)象，這些對(duì)象擁有自己的屬性和方法知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)獲取元素3.1

根據(jù)id獲取元素document.getElementById('id')方法，是由document對(duì)象提供的用于查找元素的方法，該方法返回的是擁有指定id的元素，如果沒(méi)有找到指定id的元素則返回null，如果存在多個(gè)指定id的元素則返回undefined。<divid="box">你好</div><script>varObox=document.getElementById('box');console.log(Obox); //結(jié)果為：<divid="box">你好</script>示例代碼3.獲取元素知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)獲取元素3.2

根據(jù)標(biāo)簽獲取元素根據(jù)標(biāo)簽名獲取元素的兩種方式：可以通過(guò)document對(duì)象獲取元素和通過(guò)element對(duì)象獲取元素。document.getElementsByTagName('標(biāo)簽名');element.getElementsByTagName('標(biāo)簽名');語(yǔ)法結(jié)構(gòu)由于相同標(biāo)簽名的元素可能有多個(gè)，上述方法返回的不是單個(gè)元素對(duì)象，而是一個(gè)集合。這個(gè)集合是一個(gè)類數(shù)組對(duì)象，或稱為偽數(shù)組，它可以像數(shù)組一樣用索引來(lái)訪問(wèn)元素，但不能使用push()等方法，使用Array.isArray()也可以證明它不是一個(gè)數(shù)組。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)獲取元素注意getElementsByTagName()方法獲取到的集合是動(dòng)態(tài)集合，也就是說(shuō)，當(dāng)頁(yè)面增加了標(biāo)簽，這個(gè)集合中也會(huì)自動(dòng)增加元素。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)獲取元素

3.3

根據(jù)name獲取元素document.getElementsByName()方法，是通過(guò)name屬性來(lái)獲取元素，一般用于獲取表單元素。name屬性的值不要求必須是唯一的，多個(gè)元素也可以有同樣的名字，如表單中的單選框和復(fù)選框。document.getElementsByName('name名');語(yǔ)法結(jié)構(gòu)知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)獲取元素<body><p>請(qǐng)選擇你最喜歡的水果（多選）</p><label><inputtype="checkbox"name="fruit"value="蘋果">蘋果</label><label><inputtype="checkbox"name="fruit"value="香蕉">香蕉</label><label><inputtype="checkbox"name="fruit"value="西瓜">西瓜</label><script>varfruits=document.getElementsByName('fruit');

//返回對(duì)象集合fruits[0].checked=true;//將fruits中的第1個(gè)元素的checked屬性值設(shè)置為true</script></body>示例代碼案例需求：在復(fù)選框中選擇最喜歡的水果（多選）。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)獲取元素根據(jù)name獲取元素知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)獲取元素

3.4

HTML5新增的獲取方式HTML5中為document對(duì)象新增了querySelector()、querySelectorAll()和getElementsByClassName()方法。注意：這三種方式在使用時(shí)需要考慮到瀏覽器的兼容性問(wèn)題。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)獲取元素根據(jù)類名獲取document.getElementsByClassName()方法，用于通過(guò)類名來(lái)獲得某些元素集合。<body><spanclass="one">英語(yǔ)</span><spanclass="two">數(shù)學(xué)</span><spanclass="one">語(yǔ)文</span><spanclass="two">物理</span><script>varOspan1=document.getElementsByClassName('one');varOspan2=document.getElementsByClassName('two');Ospan1[0].style.fontWeight='bold';Ospan2[1].style.background='red';</script></body>示例代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)獲取元素通過(guò)類名獲取元素知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)獲取元素querySelector()和querySelectorAll()querySelector()方法用于返回指定選擇器的第一個(gè)元素對(duì)象。querySelectorAll()方法返回指定選擇器的所有元素對(duì)象集合。<body><divclass="box">盒子1</div><divclass="box">盒子2</div><divid="nav"><ul><li>首頁(yè)</li><li>產(chǎn)品</li></ul></div></body>結(jié)構(gòu)代碼類名：boxid名：nav知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)獲取元素<script>varfirstBox=document.querySelector('.box');console.log(firstBox);//獲取class為box的第1個(gè)divvarnav=document.querySelector('#nav');console.log(nav);//獲取id為nav的第1個(gè)divvarli=document.querySelector('li');console.log(li);//獲取匹配到的第一個(gè)livarallBox=document.querySelectorAll('.box');console.log(allBox);//獲取class為box的所有divvarlis=document.querySelectorAll('li');console.log(lis);//獲取匹配到的所有l(wèi)i</script>JS代碼通過(guò)CSS選擇器獲取元素知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)獲取元素

3.5

document對(duì)象的屬性document對(duì)象提供了一些屬性，可用于獲取文檔中的元素。例如，獲取所有表單標(biāo)簽、圖片標(biāo)簽等，document對(duì)象的常用屬性如下表：方法作用document.body返回文檔的body元素document.title返回文檔的title元素document.docu

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(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ì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論